Web Accessibility Techniques

The most important technique when building an accessible website is to ensure that the content is clearly separated from the presentation (style/layout). Many websites use tables for the presentation. The code for these tables is housed within the markup (HTML or XHTML), making it impossible to separate it from the content.

Its best to use CSS (Cascading Style Sheets) which lie in a separate document. It is also important to use valid markup (HTML or XHTML) and valid CSS as checked at the W3C.

Here are some web accessibility techniques that will help disabled and special needs users access the content and information on your website easily. These techniques will also help enhance the usability of your site for everyone. Moreover, many of these techniques will enhance your website's search engine visibility.

Colour blind users

• For colour blind users, ensure there is sufficient contrast between background and foregound colours.

Blind users

• Blind users use screenreaders (e.g. JAWS) which reads the content (HTML) of a web page back to them. Its really important therefore to use CSS and ensure the content is separated from the presentation.
• Other important things to do for blind users include using hidden text (won't be seen by sighted users unless they switch off the style sheets) for certain headings (e.g. site navigation), form labels, and skip links. Its also important to use succinct (quick and easy), front-loaded (meaning is clear straight away), descriptive, and conventional (alphabetised) link text. Never use ‘click here’ or ‘more’ for link text. Not only is it bad for accessibility, it is terrible for usability.
• Place any kind of instructions before the functionality.
• Make sure all informational images use ALT text. Blind people cannot see pictures or photos, but providing ALT text will allow the screenreader to read out a description of the picture to them. For decorative images, its best to assign a null value (alt="")
• Make good use of headings (H1, H2, H3, H4).
• Place the main content of each web page before the navigation in the markup (HTML) and provide a 'skip to navigation' link. Much better than placing the navigation before the content and providing a 'skip to content' link.
• Prompt text assigned to forms.
• Provide a site map.
• No pop-ups.

Users with sight problems

• For people with sight problems, make sure that the text can be resized (use a relative size font) and provide a visible text resizer or visible link to information on how to resize text.
• Its also important to use descriptive link text as partially sighted users tend to browse web pages by tabbing from one link to the next.
• Provide a site map.
• Do not use text embedded within images as the text cannot be resized.
• Break up the content of a web page into small paragraphs, sub-headings, lists, and group form items with the fieldset command to improve usability.
• Use consistent navigation.
• No pop-ups.

Screen magnifier users

• Do not use text embedded within images as the text appears blurry and pixelated when magnified.
• Its also important to use descriptive link text as screen magnifier users tend to browse web pages by tabbing from one link to the next.
• Place any kind of instructions before the functionality.
• Use large headings for H1, H2, H3, H4
• Break up the content of a web page into small paragraphs, sub-headings, lists, and group form items with the fieldset command to improve usability.
• Use consistent navigation.
• No pop-ups.
• Do not use scrolling text.

Deaf and hearing impaired users

• If you use any audio content on your website, make sure you provide subtitles or a written transcript for it. This is good for able bodied folk too as they can get a quick description of the audio content before choosing to download it or not.
• Keep the language simple, as they may not be able to understand some longer words as their first language is British Sign Language.

Keyboard/Voice users

• Provide a focus state for links. This is really helpful for users who use the TAB KEY to navigate a site as it is easy to lose track of where you are when relying on the tabbing method.

Users with learning difficulties

• Use a consistent look in your website.
• Avoid using words in their non-literal sense.
• Avoid using abstractions.
• Break information into small and simple chunks and illustrate them visually.
• Provide clearly signposted summaries of web pages at the top of the pages.
• Make it easy for these users to return to pages of simpler content if they find themselves on a page above their reading level.
• Provide an audio version of a site's content.
• Increase the spacing between paragraphs and lines of text.
• Increase the distance between the text and the underline in links.
• Use descriptive link text.
• Use large headings.
• Increase the target area of navigation links.

Epileptic users

• Be very careful to avoid flickering between 2 and 55 Hz.

Dyslexia users

• Use descriptive link text.
• Use large headings.

Users with dexterity problems

• Many of these users will only use a keyboard. However, some do try and use a mouse, so whenever possible do try to increase the area of the link target in vertical based navigation links.

Users with cognitive problems and reading problems

• Use simple and easy language.
• Do not use scrolling text.

Web users from outside your industry

• For acronyms use acronym titles so they can place their cursor over the acronym to view a description of it.

Older Users (60 years and older)

• Communicate the fact to older users that a web page is not finished and requires vertical scrolling. Many older people look at a web page like a page from a book and are not familiar with how it can be scrolled up and down.
• Keep technical language to a minimum.
• Clearly identify links.
• Make sure visited links use a different colour.
• Provide a search function (very important for large sites - not so important for simple 10 page sites with a site map).
• Use at least a font size of 12pt. (make sure it is relative i.e. x-small, small, large etc).
• Use a visible font resizer or link to text-resizing description.
• Attention grabbing features such as headings, pictures, icons, and instructions should be links.
• Avoid asking older users to download or install software such as Adobe Acrobat. Use HTML as much as possible.
• Use concise and clear content. Offer simple and detailed versions of content.
• Use imperative forms of verbs when providing explicit instructions.
• Make sure your site can be viewed without horizontal scrolling at 800x600 resolution as older users prefer this size to 1024x768.

All users

• Provide a bread-crumb trail.
• Provide a site map.
• Use bold (strong) text to highlight important words.

Web accessibility benefits

Developing an accessible website has many benefits. Check out our article on web accessibility benefits to find out more.

• Home
• Services
• Clients
• About / Contact

• Home >
• Articles >
• Web Accessibility Techniques