The World Wide Web Consortium defines accessibility as “equivalent user experience for people with disabilities, including people with age-related impairments”, while usability is defined as the “design of products to be effective, efficient and satisfying” for end users.
Tips for improving website accessibility:
- Consider colors
- Focus indication
- Alternative Content
- Review Your Website
- Tab Indexes
- Test Your Pages on a Mobile Device
Tip:1 Consider Colors
It is estimated that around ten million men suffer from some form of color-blindness in the U.S. The most common types are Protanopia and Deuteranopia; and those who suffer from these have trouble distinguishing between red, green and similar colors. With such a high prevalence of this condition, it really is worth considering when designing and coding your website.
A well-designed website will generally not cause any major problems for color-blind users. It is worth taking extra consideration however when designing interactive or call-to-action elements.
Tip:2 Focus Indication
Make sure that it’s clear which element has focus when tabbing around in your interface. The default focus indicator varies between browsers, but it’s often not very easy to spot.
Tip:3 Alternative Content
One of the core principles of the Web Accessibility Initiative is to make content on the web available to all regardless of any disability they may have. There are a number of techniques, such as the ones discussed in this article, which will help towards the WAI’s goal. There will always be some types of content however, that cannot be made accessible to some users, such as audio to those who are deaf. In this scenario, you should always provide alternative content where possible.
Provide text alternatives for any non-text content so that it can be changed into other forms people need such as large print, Braille, symbols or simpler language.
For example, if you have a video of an interview on your site, you could consider including a transcript of the conversation for users to download or read on the site. Another method is to add captions to the video – a method that YouTube is experimenting with using speech recognition software.
An even more complete approach is to provide a link to a text-only version of your website. This method will also make your site a lot more accessible to those with slow internet connections such as those still using a dial-up connection or browsing for a mobile device.
Tip:4 Review your Website
Automated Accessibility Assessment tools are a great way to begin a comprehensive review of accessibility and can help you identify critical accessibility issues with your website. These tools can help you identify common accessibility problems such as missing alt attributes, low contrast elements, invalid HTML/CSS markup, and more. Several of these automated tools also include markup warnings and manual checks for further testing.
Tip:5 Tab Indexes
The Tab Index basically establishes the order of elements that a user will cycle through when using the ‘Tab’ key. In the majority of cases, if a page design follows a logical order and establishes a strong hierarchy using headings, sub-headings, etc. then you need not worry about this too much. It is with the use of forms however that this function is really valuable.
Tip:6 Test your pages on a Mobile Device
An increasing number of users are accessing the Web via mobile devices. To guarantee the best experience for your visitors, it is a good idea to test your pages with one or more mobile devices (including phones and tablets). In addition to manual testing, there are several automated tools to assess the usability of your site on mobile devices. “Google Analytics” includes page speed and user experience analysis for mobile devices (under Behavior). You can also use the W3Cs MobileOK Checker to identify syntax and other errors that could affect site performance on mobile devices.