The Pope Is Dead ::

My mini guide to web accessibility

Posted on 11/05/2008 at 12:02 AM

After talking my friend through some accessibility stuff the other day I thought I would blog a little about the stuff I do to help users access my webpage. Hopefully someone may find this little guide useful.

Why bother???

I am quite a believer in creating accessible sites, I think the process of making a site accessible helps you to create better websites as it makes you think about the way you are handling the data/content within your site. Also an advantage of creating accessible sites for disabled people means that your site should be easily accessible by mobile devices.

Now I am not saying that all my websites are 100% accessible, but I do try and provide as much help as I possibly can to people using them. A lot of the standards require checks on colours which I must admit I don't really think about too much as with a modern browser, screen reader or text browser I don't see the point, long gone are the days where we displayed content within images! Now with css the user can disable the stylesheet and all the colours are gone, with browsers like opera they can even apply their own stylesheets.

I think its a good idea to always keep an open mind about accessibility issues as its a very subjective matter, as developers we can only try our best.

Read on for my mini guide

The UK Law

The UK Law does cover website accessibility under the disability discrimination's act. From what I understand there has never been a test case involving a website, so its hard to say what would be classed as breaching the clauses in the act.

I think the best way to protect yourself when it comes to accessibility is to make sure you can show that you have at least tried to make your site as accessible as you can. Hopefully even a court would be able to see that it is a very complex issue and that you trying your best and hence not discriminating against anyone!

Note I am not qualified to give legal advice this is just what I think and not advice in anyway, please see this as just me explaining my own thoughts on the matter.

Validation & CSS Use

Right to get anywhere towards an accessible site you must use CSS! and it helps greatly if your HTML/XHTML document validates!

Say no to tables kids!

Tools

Time to tool-up! Right I use a couple of really cool tools to help me when I am building a site.

• Firefox Developer Toobar ( http://chrispederick.com/work/web-developer/ )
• Firefox Accessibility Extension ( http://firefox.cita.uiuc.edu/ )

Fonts

Use relative font sizes...

This is really important using fixed sizes means users can't resize the text when viewing your webpage in a browser. Well actually modern browsers override the css sizes if you use px but still using em is much better :)

So the default text size is 16px - 100% ( most browsers! ), so I normally take this down to 10px for the whole of my document.

This is done using the css:

Here we are first fixing IE by specifying 100% font size for the document. Then we bring it down to 10px using the 62.5%.

This is calculated using the equation:

( Target Size px / 16 ) * 100

Once we have done this from then on we can use em's to specify our sizes. Now em's use relative sizes using inheritance in the DOM. This can be a little confusing so let me show you...

Say I have this HTML:

So here are the steps we take:

• We set our font-size from 16px to 10px in the body.
• For #content we set the font-size to 18px.
• For #item2 we set our front-size to 10px.
• For #innerItem we do nothing really but it shows how it has inherited its parents font-size so 1em = 10px (#item2)

So to work out the em values we use this equation:

Target Font Size px / Parent Font Size px

So for the example I did:

• 18 / 10 = 1.8 ( content em )
• 10 / 18 = 0.555 ( item2 em )

As you can see it pretty easy once you know the math :)

Headings & The Document Outline

Headings are very important for accessibility, if a users is using a screen reader they can use the headings to quickly navigate the document.

Now I find it a good idea to plan your documents header layout before you start, there are also a few rules I personally use to make a document more easily navigateable.

This is where the firefox web developer toolbar comes in handy. You can use the "Document Outline" ( information->document outline) feature to see how your documents heading flow.

So I normally use something like this:

• h1 - Only 1 per page, this should match the title of the page!
• h2 - Marks menu lists (see Menus below )
• h3,h4,h5,h6 I use these for actual content, generally I try to have as few levels as possible!

Ok so its probably best to start with an example.

So if you view the document outline in firefox you should see this.

As you can see we have a nice logical flow to our document! This is the point of this excerise, your document should have a logical flow, always try to imagine having the outline read out to you. Would you want to listen to 30 news item headlines that have h1's applied to them!

When the document flows correctly the user can step through the main elements of your page something like:

• Page Title - Ok I want to read this page goto h2
• Menu1 - Skip menu please I have already heard them goto h3
• About us - Not interrested carry on reading h3's
• Latest News - Ah news read me this block

As you can see the user can easily progress through the site when not using a standard access method. Obviously its not an exact science and all websites will have a different outline but hopefully this helps a user enough not to get too fustrated! Also try to mention the outline rules you have used in your accessibility statement (see accessibility statement section)

The Special noDisplay CSS!

When you are creating a site, sometimes there are elements you want to provide for accessibility reasons only and you dont want to show these visually. A major mistake a lot of developers make is using the css display: none; attribute this includes me. I used to use the display: none; quite a bit until someone contacted me having problems accessing a site, so this made me do more research into the matter and I found a method that works for the majority of screen readers. It was also very useful working with someone who actually used a screen reader!

So if you need to hide elements you can use this css:

You will need to have this style in a seperate style sheet as it needs to be included using @import so some readers ignore it!

Then you include it using:

<style type="text/css" media="screen">@import "/css/access.css";</style>

Once included you can just apply the noDisplay class to any element you want to hide. The principle of this is that screen readers respect the display: none; so they dont read it, this method just shifts it off the side of the page so its actually still in the DOM!

Menus

All sites have navigation, sub navigation etc. You can make your menus easier to access via screen readers by marking them with header tags. This is pretty simple really you just need to use the noDisplay css mentioned above to hide your headings visually.

Now using this method your users screen reader will recognise these as menus, you can check this using the firefox accessibility addon. Remember to use good descriptive headings when using these, also I normally include a totally hidden accessibility menu at the top of the dom which includes links to skip to content, accessibility statement etc.

Access Keys

Access keys should be used carefully as you can disable users standard keyboard shortcuts, which is annoying!

I normally try to use as little as possible and think of it as a very basic quick links menu.

My normal access key links are:

• 0 = Accessibility Statement
• 1 = Home page
• 2 = Skip to content

You could also provide links to you navigation menus but I prefer to keep it simple.

Links

Coming Soon...

Content

Coming Soon...

Tables

Coming Soon...

Forms

Coming Soon...

Javascript ( its not the enemy)

Coming Soon...

There may not have been a test case in UK Law, but I remember reading about the Sydney Olympics organising committee losing a case about having an inadequately accessible website. The Australian DDA and the UK DDA are close enough that it’s considered that it should be possible to win such a case in this country.