Despite their differences, usability and accessibility sometimes go hand-in-hand. The World Wide Web Consortium defines accessibility as an “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.
Common accessibility improvements such as providing a site map or using clear and consistent navigation mechanisms can improve the browsing experience for all users (including those making use of assistive technology). To ensure that your site is accessible for most users, we have compiled a list of common accessibility improvements that will also dramatically improve usability.
1. Include a Site Map
A site map is a great way to increase the usability and accessibility of your website. This is because a sitemap provides a complete overview of the logical structure of your site and includes all of the major sections and links in serialized format.
A sitemap is also a great way to address accessibility requirements of the World Wide Web Consortium’s Content Accessibility Guidelines (WCAG 2.0, success criteria 2.4.5).
In WordPress, there are numerous plugins for generating a site map page from posts and pages including Simple Sitemap and WP WordPress Sitemap.
Drupal users can automatically generate a site map of menu items or categories using the Site Map module.
2. Use Clear and Consistent Navigation Systems
Using consistent navigation systems is a major tenant of the W3C’s Content Accessibility Guidelines. It’s also a great way to improve the usability of your website as it allows your users to quickly understand the menu structure of your pages. Using consistent navigation means placing menus and submenus in the places where users expect to find them on your website, and allows assistive technology users to quickly navigate pages. Consistent navigation menus should also include a mechanism to skip over large blocks of links.
3. Validate Your Pages and Stylesheets
Using valid markup is essential for creating pages that can be readily interpreted and rendered by browsers. Proper markup also ensures that pages and stylesheets can be rendered by assistive technology devices such as screen readers and braille displays. To ensure that your pages and stylesheets use valid HTML and CSS, you can validate them using the W3Cs HTML and CSS validators.
4. Review Your Website using Automated Accessibility Assessment Tools
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. Check out another ist of essential accessibility Evaluation tools here.
5. Use HTML Markup to Provide Semantic Information
One of the most powerful features of HTML is the ability to structure content. Structured content allows browsers (and users) to understand the context of information in an HTML document. Properly structured pages make use of ordered and unordered lists, headers (h1, h2 … h6), paragraphs, sections, articles and more. Including semantic information and structure in your pages is essential to ensure that browsers and assistive technology devices can parse and interpret the content of your pages. Check out some great articles on semantic markup and HTML.
6. Include alt text for all images and graphics that convey information.
Including alternate (Alt) text is one of the recommended techniques for improving the usability of images on a website. It also allows screen readers and other assistive technology to provide information about images embedded in HTML pages. Alt text should be sufficiently descriptive and concise to give users an accurate impression of the contextual meaning of an image. Alternate descriptions that are more than 5-7 words can be provided as long descriptions, either using the “longdesc” attribute, or linking to a new page with a full description. For images that are purely decorative (such as borders, dividers, etc) you can instruct assistive technology devices to ignore the image by setting the alt attribute to NULL.
7. Test Your Pages with a Keyboard
Assistive technology users typically utilize a keyboard to navigate pages. You can test for keyboard accessibility by using the keyboard and “tab” and “shift + tab keys” keys to navigate through all of the links on your site. Use the “enter” key to activate controls and links while ensuring that all page functions are accessible using a keyboard only.
Here are some tips for designing pages for keyboard accessibility:
- Avoid using “display:none” or “display: 0” in your style sheets. For stylesheets that use these properties, be sure to include another indicator of keyboard focus (i.e. a:focus { } styles).
- Check that the tab order for page controls and links follows the natural reading order of the document.
- Include links or buttons to implement accessibility of interactive elements.
- Provide a means for users to skip over large blocks of links.
For more information, check out WebAim’s article on Keyboard Accessibility.
8. Provide Captions for Embedded Video
Captions are an essential tool for accessibility. They provide real-time equivalent content for users who do not have access to audio. To meet basic guidelines for accessibility, captions should be properly synchronized with video content, provide equivalent information to the audio track, and be accessible on all devices.
Captions come in two varieties: open and closed captions. Closed captions can be turned on and off and are included as a separate track in a video file. Open captions are embedded directly in video files and cannot be turned off by the user. Both formats are equally accessible but there may be some instances where open captions are preferred as they provide greater flexibility for caption formatting.
Popular captioning tools include: MAGpie, Subtitle Workshop, and ccPlayer. Please note that the transcription tools are not 100% accurate so all captions created using these programs should be checked for accuracy.
For more information on caption formats, check out WebAim’s article on Captions, Transcripts, and Audio descriptions: .
9. Provide Transcripts for Time-Based Media
Text transcripts provide an accessible alternative to time-based media. To ensure the accessibility of embedded audio and video on your site, it is good practice to include both synchronized captions and a complete text transcript.
For video content, text transcripts should include additional contextual information where appropriate. This may include descriptions of activities presented, and information about speakers or presenters.
10. 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.
Conclusion
Accessibility and usability are the foundations for creating a great user experience. By making a Website that is both accessible and usable, you have the best chance to improve other facets of a successful web presence – including but not limited to user engagement, conversions optimization and an increase in repeat visitors.
Inspiration for this article: World Wide Web Consortium’s Web Accessibility and Usability Working Together.
Want to learn more?
To learn about Accessibility and Usability Testing, consider the following courses by the Interaction Design Foundation:
To brush up on the basics of UX and Usability consider taking this beginner’s course on User Experience. Good luck on your learning journey!
(Lead image: Depositphotos)
