Accessibility simply means the ability of everyone to easily access your website. Aside from the ethical and legal issues, making your site accessible expands your potential audience. The authors of a Searchmetrics accessibility study noted that “If you don’t make your site easily accessible to those with disabilities…you cut yourself off from a large group of visitors.” Despite its importance, the study found that top-ranked websites scored just 66.6 out of 100 for accessibility, the lowest score of all measured categories. Among other elements, the study looked at color contrast and whether images, buttons, and online forms were tagged with meaningful names and descriptions — issues we’ll discuss below.
Screen Reader Support
For those without sight, screen readers are helpful tools that convert digital text, such as code, into speech so that users can hear what’s on the page. For that reason, sites not optimized for screen readers can prove a frustrating experience, with users having to sit through a barrage of confusing and irrelevant information. Because screen readers read code, you’ll need to be vivid and succinct with your page headings, link text, and image alt-text. Visualize yourself reading the code of your page to discover the most efficient way of describing the elements of each page. Some elements, such as navigation menus, should be pushed to the bottom of a page, which allows sight-impaired users to avoid having to listen to the menu for every page they access. The two most popular screen reading programs are JAWS for Windows and VoiceOver for Mac, so you’ll want to become familiar with these programs. Here are some additional resources for page reader optimization from Stanford.
Keyboard Access
Keyboard access allows users unable to use a mouse to access your site. Test your website without using a mouse to see how your keyboard functions work. The most common functions include using tab to move to the next link, form, or button, and enter to activate a link or button. You can find a complete list of W3C Content Accessibility Guidelines (WCAG) 2.0 here.
Document Titles
All web pages and documents should have titles that clearly describe their function and purpose. Use frequent headers and subheadings to keep your site’s information organized.
Alt-Text
Alt-text is used to describe an image and is essential for those using screen readers or with slow internet service. Be as succinct and specific as possible when using alt-tags and consider the context of your site. For example, if your webpage contains an article about duck migration and includes a photo of a mallard, your alt-tag could be written as “duck migration patterns,” rather than just “duck.” Here’s more on alt-tags from Web AIM, a site specializing in web accessibility.
Video/Audio
The popularity of video and audio content has exploded, yet many sites still cut off a good chunk of their audience by not optimizing for accessibility. Provide transcripts for all audio and video content or provide closed captioning. For videos housed on Youtube, you can upload a .txt file of the transcript. Include not just the spoken words, but also sounds such as “door knocks.” You can also employ Youtube’s automated captioning option, although the captions are usually far from perfect. Here’s a helpful guide about creating captions and transcripts from the University of Minnesota.
Accessible Rich Internet Applications (ARIA)
The World Wide Web Consortium (W3C) created the Accessible Rich Internet Applications (ARIA) as a set of HTML attributes that define ways to make web content and applications more accessible for people with disabilities. ARIA contains special HTML attributes that can be added to your site. For example, the role attribute defines a specific, unchanging role for a type of object, such as buttons, articles, or alerts. Other ARIA attributes include JavaScript widgets, error messages, live content updates, and more. You can view the complete W3C guidelines or use this tutorial from Mozilla to learn more about ARIA.
