We recently completed a redesign of the website for The Australian Disability Organization: www.ad.org.au. As part of this project and to make the website more accessible we have included important accessibility elements in the design. If you look at this site you will see a little widget in the top right hand corner which is a simple, easy way to make your site accessible to most differently abled people.
Let us take a closer look at the importance of an accessible website and what you can do to make your website accessible to all.
• being able to be reached or entered
• being easy to obtain or use
• being easily understood or appreciated.
Web accessibility refers to the practice of designing a website that is easily reached, entered, or used by anybody - most importantly include those with disabilities.
In the US, some larger companies have been succussfully sued for inaccessible websites based on discrimination against those with disabilities. The American Diability Association now has an approval process for US-based sites. Worldwide, rules are not as draconian nor are organisations as litigeous! However ensuring your website is accessible to all is actually good practise from a business point of view, not to score points or avoide litigation.
Millions of people rely on websites being accessible with special needs, disabilities and impairments that can make it difficult or even impossible for them to use certain sites. Some of the most common categories of impairment to keep in mind when designing a website are visual impairments, hearing impairments, photosensitive seizures, cognitive disabilities and motor skills or physical disabilities.
To be able to work around these issues many people make use of assistive technologies like vocalizing screen readers, speech recognition software and Braille terminals.
There are different ways in which you can design your website to increase accessibility and make their experience significantly better. Here are but a few:
• Make sure you have a keyboard-friendly site
Many assistive technology devices rely on keyboard-only navigation and it must therefore be possible to use all the major features of your site with a keyboard only. This must include accessing all pages, content, links etc. Your goal should be for all web content and navigation, as much as possible, be accessed using the Tab key on the keyboard.
• Choose your colors with care
People often assume color blindness as a black-and-white issue when in fact it is more of a spectrum due to people perceiving color in different and unique ways. The colors on your site should contrast well to make sure that everyone can differentiate between the various elements on your page. The most important factor is to make sure that the text stands out against the background. Also avoid clashing colors that might cause eye strain.
• Include proper Alt text for images
Provide Alt text for images on your site to assist screen reader users to understand the message conveyed by the image used on the site. Make sure when creating the Alt text that it contains the message you want to convey to your users clearly. Should the image contain text, it must be included in the Alt text as well. The only exception to this is when an image is purely for decoration. Note that using alt-text on images is also good for your SEO - so this is a win-win.
• Ensure dynamic content is easily accessible
Not only is it important to make your site keyboard-friendly, but it is also important to make all the content on the page accessible. Content that updates dynamically such as screen overlays, lightboxes, popups, in page updates etc. cannot be read easily by screen readers. Keyboard-only users can get stuck in page overlays while magnification software users might be zoomed in on the incorrect section of the page. These functions can easily be made accessible through options such as front-end development frameworks or Aria roles and alerts specifically supporting accessibility. Try and reduce this functionality as much as possible.
• Structure your content correctly by using headers
Using headers to structure your content on your site will make the content much easier to understand and improves the flow on your page. Clear headers will also assist screen readers to interpret your pages which makes the provision of in-page navigation easier. This is easy to do because you only need to make sure you use the correct heading levels in your content.
• Forms must be designed for accessibility
Although forms are a useful addition to most sites it must be designed with care. Each field must be clearly labelled, and you should aim to place the labels adjacent to the relevant field. It might be easy for a sighted user but for someone using a screen reader it is much more difficult to match a label to a corresponding option or field.
• Avoid Automatic Media and Navigation
Most, if not all people, find it annoying when music or videos start automatically when a page loads and this is an even bigger issue in terms of accessibility. Not only is it difficult to figure out how to tun the media off when using a screen reader, but some users can be confused or frightened by the sudden noise. Only include elements that start when user prompt them. It is also not advised to use automatic navigation such as sliders and carousels. This can be very frustrating if the viewer needs more time to absorb the information before the next slide or section. Note that most browsers no longer allow videos and music to play automatically anymore, so you should have a play button included.
• Remember accessibility when creating content
The core of every site is its content and consideration must be kept in mind of accessibility when creating content. You need to pay attention to minor things from fully writing out acronyms to making sure all your links have unique, descriptive names and anchor text. Not only does your site be usable by anybody, but your content should be approachable and readable no matter who discovers it.
By taking the time to identify and understand the possible flaws in the design and content of your site, you can make sure your site is optimized for accessibility by everybody. Of course, improving the accessibility on your site will be beneficial to all but even more, it will immediately expand your potential audience.
If more users are able to use your site, you have grown your potential user base exponentially which can put you one step ahead of competitors who have not yet taken steps toward accessibility.