| Coding Tutorials

accessibilityAccessible websites allow users with disabilities to navigate the web and access information. A disabled user may be blind, have a motor disability, dyslexia, or a range of other disabilities that make web navigation difficult. Most users with disabilities will access the web using adaptive equipment, such as a screen reader or refreshable Braille display. Many will not use a mouse.

And these disabled users make up around 10-20% of Internet users in most countries, so creating websites with them in mind will have a positive effect on your bottom line.

Fortunately for developers, an accessible website is also a good website. The features that make a website accessible to people with disabilities also have advantages for other uses, such as those using a Smartphone, working in a noisy environment, and users with a low literacy level. Many of the same techniques used to optimize a site for search engines and create clean code will give that website the big accessibility tick.

Below I've outlined some of the basic features of accessible websites, but there is too much to cover in one article. If you're interested in creating the best accessible website you can, check out the resources section at the bottom for in-depth tutorials and standards.

So, how do you create an accessible website?

1) Provide Text Equivalents to Visual and Audio content

media_1367887061571.png

A screen reader will skip over any non-text content on your website, so it's vital to provide text equivalents to any visual or audio content, so that all users can access it. This includes images, diagrams, audio files, video, and graphical buttons.

In recent years, SEO specialists have usurped the alt text field, but it was actually designed for disabled users accessing a site via screen reader. If a screen reader finds Alt text, it will read out this description instead of simply skipping over the picture. Rather then trying to shove all your priority keywords in there, use the Alt text field to give a clear, one-sentence description of the important points of the image.

Graphs and Diagrams can be more difficult. I find the best way to deal with these is to convert the information to a table (which can be accessed via a screen reader) accessible by a link beneath the graph, and then add an alt tag describing the general trend shown on the graph. There are lots of different solutions discussed in the W3C Techniques for Web Content Accessibility Guidelines document.

For video and audio, written transcripts can be provided on the site or through file downloads.

Action points:

  • Use alt text to describe images.

  • Place information in graphs and diagrams into text.

  • Transcribe audio and video.

  • Find alternatives for image-based navigation and graphic buttons.

2) Provide Clear Navigation

media_1367887140155.png

Clear navigation is vital if you want all users to find their way around your site. This is even more important for disabled visitors, as many of them won't be able to access the visual clues that aid navigation.

One of the best tests for good navigation is to move through your website without using a mouse. Many people with motor disabilities don't use a mouse – can they reach all areas of the site?

Action Points:

  • Add a sitemap or table of contents.

  • Ensure a user can easily tab between all elements on a page.

  • Clearly identify links with contrasting colors and underlined text.

  • Provide a way to skip over sections and return to the top of a page.

  • Ensure colors in navigation bars are in high contrast.

  • Avoid the use of tiny links for navigation.

3) Use Good Markup

media_1367887589348.png

When creating any kind of content, begin by analyzing the structure you want – Headings and subheadings, sections and hierarchy. Create an outline for your content – each point on that hierarchy denotes a change in the structure.

When you create the markup for your site, make sure you use the structural elements to denote this hierarchy – e.g. the h1-h2 heading levels. Do not use these heading levels for purely aesthetic purposes outside of the structure. A person using a screen reader relies on this structure for navigation and comprehension.

Other aesthetic components can compliment this structure – such as horizontal lines denoting the end of sections, but should always be accompanied with structural navigation.

Action Points:

  • Ensure information conveyed with color is also available without color – e.g. Through context or document markup.

  • Use heading elements to convey structure.

  • Don't use structural markup elements for visual appeal.

  • Use aesthetic elements only to compliment these headings.

  • Do not use tables for layout unless the table makes sense when read in a linear fashion.

4) Clear Content

media_1367887542457.png

For those readers who can view a website, the way in which content appears has a dramatic affect on whether they read it or not. People browsing the web read differently to when they are enjoying a book – they tend to skim through text looking for the pertinent information.

If a web reader encounters large chunks of text – especially if they have a cognitive disability or reading impairment – they will probably click away and look for another site.

Dividing your content into smaller paragraphs and breaking these up with headings not only aids navigation and helps with SEO, it creates a more pleasant reading experience.

Action Points:

  • Break up large chunks of text into shorter paragraphs.
  • Use headings, bullet points and other text elements to further break up text.
  • Don't rely on color only for emphasis.
  • Use h1-h6 headings to create a hierarchy structure within your pages.

5) Forms and Captcha

media_1367887496753.png

The web is full of forms: forms to contact a business, forms to enter competitions, forms to fill out surveys and forms to send essential information. If a form is faulty, it's the users of screen readers who will miss out.

The first step to creating accessible forms is to ensure your form can be filled out using only the keyboard. Avoid using Javascript to manipulate form data, as a Javascript form cannot be navigated using the keyboard.

Organize your form in a logical way and provide clear and simple instructions. If your form runs over several pages, it may help to repeat instructions throughout the form. Remember that a screen reader will read the form in descending order and from left to right across the page, which may not be the order you use visually. The WebAim: Creating Accessible Forms document explains this issue clearly.

Captcha images supposedly prevent spam, but they make it difficult for people with disabilities to complete forms. Captcha images are getting more and more complex, and they can be difficult to read – and not just for disabled people, as a recent SitePoint article explains. The audio commentary is equally garbled and inaccessible. The W3C have written a useful document on Captcha, and accessibility expert Jim Thatcher offers a few ideas for Captcha alternatives.

Action Points:

  • Check your forms can be navigated using the tab key.

  • Strip out any Javascript elements.

  • Ensure all fields on your form follow a logical order.

  • Make your form instructions clear and concise.

Resources

Accessibility is definitely something all webmasters and web developers should be thinking about. The more you learn about accessibility, the more you understand about the different ways people can access information online. And this knowledge will make you a more considerate and more widely recognized webmaster.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.