Beyond Guidelines Advanced Accessibility Techniques

Beyond Guidelines Advanced Accessibility Techniques

When creating accessible websites, most web developers and web managers tend to​ follow the W3C accessibility guidelines. And rightly so - they are the most comprehensive accessibility resource on the Internet after all.

The W3C accessibility guidelines, or​ Web Content Accessibility Guidelines as​ they're officially known, could go slightly further however. Fulfilling the guidelines will give you a​ very accessible website (remember though, they are just guidelines so shouldn't always be taken literally). For ultimate accessibility though, try implementing some of​ these techniques too:

Hidden text

Hidden text can be very useful for screen reader users. if​ there isn't sufficient text for these users to​ gain an​ understanding of​ a​ particular section, then you can simply create this extra information and hide it​ from sighted users.

The most common and useful page items to​ insert invisible text for screen reader users include:

- Headings - Every single section on each page should have a​ heading placed immediately before it. This way, screen reader users always know that the preceding section has finished and a​ new section has begun. So, before the main navigation begins, you should insert a​ heading labelled, 'Site navigation'. Although this heading is​ extremely useful for screen reader users, it​ may look rather unsightly visually, so you can just make the text invisible.

- Form labels - Every form item must have a​ label immediately preceding it​ - otherwise, screen reader users won't know what the form item is​ about. Date of​ birth fields, with three separate fields for date, month and year, are common culprits of​ not providing form labels for each form field. So, place the date of​ birth label before the three form fields, and then insert an​ invisible label before each of​ the other two form fields, 'Month of​ birth' and 'Year of​ birth'.

- Skip links - a​ skip link is​ an​ invisible link that's placed at​ the very top of​ the HTML file. It's a​ relative link within the page, allowing users to​ jump straight to​ a​ section on the page, usually the main content. Skip links are really useful for both screen reader and keyboard-only users who can jump straight to​ the content, without having to​ work through the navigation.

Succinct, front-loaded and conventional link text

As a​ method of​ browsing through a​ page, screen reader users can call up a​ list of​ links on a​ page and jump to​ the link in​ which they're most interested. It's common knowledge that link text should make sense out of​ context, and this is​ indeed a​ W3C guideline. Link text such as​ 'Click here' would obviously make no sense in​ a​ list like this. It's also crucial that link text is:

- Succinct - so that it's quick and easy for screen reader users to​ work through this list
- Front-loaded - so that screen users can understand the meaning of​ the link straightaway and jump down to​ the next one if​ they're not interested
- Conventional - so screen reader users can alphabetise the list and jump to​ the link they're looking for (e.g. if​ the 'Contact us' link was labelled as​ 'Enquiries' it​ would be harder to​ find the website's phone number)

Link text is​ additionally important for users that finds it​ difficult to​ read online, such as​ screen magnifier users and those with learning difficulties and dyslexia. For these users when they scan through web pages, they'll often be unable to​ make out specific words - instead, they'll see shapes and colours. Anything that's in​ a​ high contrast colour is​ obviously a​ link, so they can stop and read it.

By making link text succinct and front-loaded, and using conventional link text, it's far easier for users that finds it​ difficult to​ read online to​ immediately comprehend links and what their destination is.

Visible font resizer

It's crucial that text is​ resizable for web users with poor or​ limited vision - or​ so the theory goes. in​ actual fact, user testing has shown time and time again that few web users actually know how to​ resize text, or​ that this functionality even exists.

By providing a​ visible font resizer all users are of​ course made aware that they can resize the text should they need to. to​ find out how to​ put a​ font resizer on to​ your website, read this article about stylesheet switching at​

(Incidentally, if​ you don't know how to​ resize text simply select 'View > Text size' in​ either Internet Explorer or​ Firefox; alternatively, scroll with the wheel of​ your mouse whilst holding down the control key.)

Place instructions first

If you provide instructions for any kind of​ functionality on your site, make sure that the instructions are placed before the functionality. This of​ course sounds obvious, but it's amazing how many times this rule isn't adhered to.

Screen reader users listen to​ pages in​ the order that they're written in, so if​ any instructions come after what they're relating to​ then that's obviously going to​ be too late.

Placing instructions first is​ also crucial for screen magnifier users. Screen magnifier users can only see a​ small section of​ the screen at​ any one time, so if​ instructions are placed in​ an​ out-of-the-way place they'll likely be overlooked.

Web forms are perhaps the most common type of​ functionality to​ contain instructions. Do be sure that any instructions are placed above the form and not below it. Mis-placed instructions usually include explaining which fields are required and error messages.

Large headings

Headings are crucial for all users to​ find what they're looking for quickly and efficiently. They are however particularly useful for any user that finds it​ difficult to​ read online, such as​ screen magnifier users and those with learning difficulties and dyslexia.

When these users scan through web pages, they'll often be unable to​ pick up words and instead will see shapes and colours. By using a​ large font size for headings, these users will easily be able to​ spot these important headings.

Focus state for links

Keyboard-only web users can navigate through web pages by tabbing from link to​ link (and form item to​ form item). it​ can however sometimes be difficult to​ know exactly where you are on the page when relying on the tabbing method. By assigning a​ background colour to​ the focus state of​ each link, it​ becomes much easier for these users to​ orientate themselves on the page.

Large link target

Many web users with dexterity problems will use only the keyboard to​ browse through a​ website. Some will still continue to​ use a​ mouse but with rather limited control, so wherever possible do try increase the area of​ the link target. This is​ of​ course not possible for regular links, but for vertical based navigation lists it's easy to​ extend the clickable area to​ the full width of​ the column by assigning the style, display: block to​ each link.


The W3C accessibility guidelines are of​ course important, but if​ you want your website to​ be truly accessible then there's more that you can do. Following the advice in​ this article is​ of​ course a​ great start!

Related Posts:

Powered by Blogger.