Links on this page that end with an asterisk (*) will take you to our glossary. Use your browser's Back button to get back to this page.
On this page we'll give you some pointers on how to turn that beautiful design into a functional, accessible web page.
Write standards-compliant code
The single thing you can do that'll have the most impact on accessibility is to write standards-compliant code. Make sure that any front-end developers working on the site understand the benefits of ensuring that all code conforms to W3C* standards. As well as dramatically increased levels of accessibility, standards-compliant sites are more search-engine friendly, work more reliably with CSS* …, and are easier to use with various device, browser and access technology* combinations.
Layout and design
Flexible layout
People with poor sight sometimes set the screen resolution quite low to increase text size. Make sure your layout is flexible enough so that these users aren't constantly scrolling left and right to read your text, and that if a multi-column page becomes too wide to fit on the screen, columns will slot in seamlessly underneath one another.
Flexible fonts
Rather than choosing a specific font size for your text, declare all of your font sizes in percentages or EMs so they'll respect the browser's text resizing functionality. Also make sure to choose an easy-to-read font and add a generalised sans-serif declaration to cover browsers that don't have your font installed. A CSS font declaration could look something like this:-
body {
FONT-SIZE: 1em; FONT-FAMILY: arial, helvetica, sans-serif
}
Style switchers
A style switcher is one of the most acceptable ways to overcome colour contrast issues if your corporate colour scheme or preferred theme colours don't provide an accessible colour contrast. If you haven't the time, or can't decide which colour combinations to use for a style colour switcher, the best thing to do is produce a stylesheet that strips all colours from the main content, and provide good strong contrast text and background combinations for the different navigation sections. This will enable the user to define their own colours for main content, where they'll be doing most concentrated reading, but still give colour clues for the navigation regions.
A style switcher is a set of buttons, usually located at the top of each page, that allow users to choose a different font size and/or colour scheme. Even though it's possible to increase or decrease the font size or to ignore the colours specified on your website using browser settings, many people won't know how to do this and will appreciate this explicit functionality.
Navigation
Top ten tips for good navigation
-
Design your navigation with someone visiting your site for the first time in mind. If possible, all your pages should be no more than three clicks away from the home page.
-
Page titles should describe the page. This is the first text that a screen reader user hears when a page loads, and a well-written page title will give users confidence that they've reached the right page.
-
Website navigation should be in the same place and if possible your global navigation should be identical across all pages.
-
If you're creating script-driven mouseover menus, these are unlikely to be usable with a keyboard or screen reader. Make sure that the top level link leads to a page where the user can find links to the other pages.
-
Access keys can sometimes conflict with screen reader and browser commands, so must be chosen with care if used at all.
-
Links, including graphical links, should describe the page that'll load when the link is clicked, so that users understand what'll happen next.
-
Consider providing an accessibility help section containing information about scaling text, viewing PDF's, access keys and popup window warnings.
-
Skip links can save keyboard and screen reader users a lot of tabbing to get to the page's main, and arguably most interesting, content.
-
New window warnings will avoid the confusion and frustration that can happen when users don't realise a new window has opened.
-
It's worth running your proposed navigation scheme past some users very early in the game so you can tweak the parts they find difficult to understand or use.
Images
-
Alt text: add descriptive alt text to all but decorative or spacer images. Adding alt text exposes the content or purpose of the image to people with images switched off or who use Braille devices or speech software. Make sure decorative and spacer images have empty alt text, so that screen reader users don't have to listen to meaningless "page noise" like "spacer", "vertical bar" or "woman playing with two small children":-
<img src="decorativeImage.jpg" alt="" ... />
-
Animated images: these can be difficult to read, distracting and worst of all, if they have a flashing or strobe effect, dangerous for people with epilepsy. If you must use animated or moving content, you must also give users a way to stop the animation.
-
Image maps: these are a great visual aid as long as they have alt text and the same information is also available elsewhere in plain text.
-
Images of text: these can cause problems for screen magnification users, as they don't respect the user's text size and colour preferences, so avoid them and style your text with CSS unless absolutely necessary.
Clear and simple content
There's a lot you can do to make things easier for people with poor vision, learning or cognitive issues to read and navigate your site.
-
Keep your content as short and to the point as you reasonably can.
-
Keep your language simple. Don't use a long word or sentence when a shorter one will do.
-
Put groups of ideas into bulleted lists, like this one, rather than in a long and distracting paragraph.
-
Organise the elements on your page in a logical way that avoids guesswork.
Forms
-
Writing standards-compliant code, where all tags are properly closed and nested and all the attributes appear in the right places, is especially important when you're building forms.
-
Make sure all of your fields have explicitly associated text labels.
<label for="firstName">First name</label>
<input name="firstName" id="firstName" type="text" ... />
-
Don't be tempted to create wizzy, great-looking controls from scratch. The native HTML controls can cater for all types of input, and you can always use CSS to improve how they look.
-
If you *must* attach OnChange events to drop-down lists or other controls, make sure they don't refresh the page or move the focus. Screen reader and keyboard users will effectively activate the OnChange event every time they use the up/down arrows to browse the options in the list, and every time they do it'll fire off your OnChange event.
-
Break longer forms into two or more subforms, and provide instructions about how many pages are in the form, how much time it should take to complete, and the current page number.
Client-side scripts
-
If you're using client-side scripts to create menus, validate forms, dynamically change page content or submit data, write it in a way that doesn't lock out any of your users.
-
Don't assume that all screen reader users have JavaScript switched off. Putting important content in a <noscript> tag isn't enough to make a page accessible as a screen reader user with JavaScript switched on won't see it.
Time outs and page refreshes
If you're delivering data on a secure page that needs to time out or refresh after a specific time, let your users know in advance. Also where your page or session times out, you'll need to offer users a control mechanism to extend the time limit. If the time limit is governed by JavaScript then use an accessible alert to warn users that the page is about to expire and give them the chance to extend it. Or if this is controlled by the server, you'll need to find another way to make sure users are in control.