Building Accessible Websites
Ticking check boxes isn’t enough
We have excellent accessibility guidelines like the Web Accessibility Initiative (WAI) - external link and automated website evaluation tools like WAVE - external link. But simply adhering to technical accessibility guidelines does not guarantee that a website will be easy to use or be a pleasant experience for users with disabilities.
Building accessible websites
Designing user–friendly websites is also one of the most effective ways to make them more accessible for people with disabilities. By following the basic rules of good design, making the site structure clear and obvious – emphasising importance, meaning and hierarchy – and writing content that’s concise improves the user experience for everyone.
Myth: accessibility requires you to create two versions of your site
The truth is that many web users with disabilities don’t want a special version of the site. Assistive technology has come a long way and almost anything on a web page can be made fully, or partially, accessible. Also, text–only assumes colour blind users can’t see and those with limited mobility have no use for pictures. For website developers, maintaining two versions of the site is time–consuming and costly; rather spend the time on creating a single site that serves all users.
Basic techniques to improve accessibility
- Write for the web, mark up headings with HTML tags
We spend little time reading web pages: we scan and skim content. Screen reader users are just as impatient as sighted users: they scan with their ears. Creating a clear structure divided by descriptive headings helps users quickly get a sense of what the page is about. Write short sentences and use bullet and numbered lists to break up copy to help scanning behaviour and search for trigger words. Mark up headings with HTML tags:
h6; some screen reader software allows users to skip from heading to heading.
- We spend little time reading web pages: we scan and skim content. Screen reader users are just as impatient as sighted users: they scan with their ears. Creating a clear structure divided by descriptive headings helps users quickly get a sense of what the page is about. Write short sentences and use bullet and numbered lists to break up copy to help scanning behaviour and search for trigger words. Mark up headings with HTML tags:
- Allow users to skip past complex navigation
- Screen reader users have to listen to the long list of global and sub navigation links before getting to any content, which can be tedious on large websites with many options. Provide a skip navigation link at the top of the page to allow users to jump straight to the content or search box.
- Add appropriate
alttext to every image
Include meaningful descriptions on images using the
altattribute, short for alternative text. Leave the
alt=“”, for images that convey no meaning like decorative design effects.
- Include meaningful descriptions on images using the
- Use semantic markup
- Building websites according to web standards is one of the simplest ways to ensure accessibility. Structured markup helps convey the meaning of the content that assistive technology can access and make sense of: headings, paragraphs and lists. Create page layouts with Cascading Style Sheets (CSS); leave tables only for table data.
- Allow text to be resized
- Specify font sizes in CSS using relative values so that users can change them to their own preference – fonts specified in pixels cannot be scaled in older versions of Internet Explorer. Most modern browsers have a zoom feature which allows the user to magnify the entire web page, but it is important to stick to one standard for all users.
- Make forms accessible to assistive technology
- A major use of the web is allowing users to interact with your site like filling out forms, checking check boxes and radio buttons. Associate all form elements and controls with appropriate labels so they can be recognised by assistive technologies, like screen readers.
- Ensure links make sense out of context
- Each link should make sense if read by itself. Screen reader users may choose to read only the links on a web page. Therefore certain phrases like click here and more must be avoided as they provide no meaning as to where the link will go to.
Advanced techniques to improve accessibility
Web developers now have an array of advanced tools developed by Web Accessibility Initiative’s Accessible Rich Internet Applications (WAI–ARIA) - external link specification. ARIA – as the specification is more commonly referred to – is easy to implement and although not yet fully supported by assistive technologies, it is growing.
With ARIA, web pages can be marked up with logical regions. Regions can then be assigned semantic navigation landmarks that browsers and assistive technologies can access. ARIA provides a collection of landmarks which are applied to each of the regions, for example:
- navigation: contains the links to navigate this document and/or related documents.
- main: content that is directly related to or expands on the central content of the document.
- search: contains a search form to search the site.
Examples of setting landmarks:
<div id=“main” role=“main”>
For more examples of putting landmarks into practice:
- ARIA cheat sheet - external link
- Using navigation landmarks – GOV.UK - external link
- How ARIA landmark roles help screen reader users: You Tube video - external link
ARIA can be implemented right away, without any negative side-effects. Major browsers have implemented support for ARIA, or planning to, as well as becoming widely supported by assistive technologies.
Accessible content is findable content
The overlap between accessibility and Search Engine Optimisation (SEO) – the process of designing, writing, coding entire websites so that they have a good chance at appearing in the top positions of search results – is not immediately obvious. But search engines are after all blind users; indexing tens of millions of websites, giving out recommendations in the form of search results without seeing any pictures, graphics or page layouts. The same goal of accessibility – making web content as accessible as possible – aids search engines read, understand and index content.
Accessibility and the law
Although there’s no obligation required to build accessible websites, increasingly there are legal reasons for doing so.
The United States and United Kingdom governments have passed accessibility legislation for information technology, like websites, that must be met by vendors doing business with them.
In South Africa, policies have not been fully implemented yet. Our law guarantees that all citizens are equal under law, and that all should have the same fundamental rights and responsibilities as any other citizen; that includes the protection of the rights of people with disabilities - external link. Making information accessible will help play and important role in removing barriers to participation of disabled people in our society.
But fear of lawsuits is the wrong reason to build accessible websites; accessibility enhances the web for everyone and is the original vision of its founder: