The following is by Trenton Moss
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 find 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 find 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.
(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. Misplaced 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 from item to from 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.
Conclusion
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!
Event: Website Accessibility 2006
Edinburgh, 13th June
OUT-LAW has teamed up with Parallel 56 and User Vision to
organise a national conference on best-practice public sector
website accessibility. Hear from expert speakers on PAS 78, WCAG
2.0 and more.
Full
details at Parallel 56's website
