We have all heard of Web accessibility, but it’s often overlooked due to knowledge, time or financial constraints. However, over the last decade, accessibility has gained traction primarily due to social and legal factors.
According to a 2010 United States Census Bureau report, 6.4% of Americans have some form of hearing or vision disability, while 18.7% of Americans have a form of disability that could affect how they interact with the Internet. As the Internet continues to mature, we need to build a socially responsible “equal opportunity Internet.”
In 2006, accessibility was highlighted in mainstream media when Target Corporation had to pay over $9.7 million in damages and fees after a lawsuit was filed by the National Federation of the Blind (NFB) claiming blind people were unable to access Target content or purchase products. Since then, W3C’s Web Content Accessibility Guidelines (WCAG) are increasingly mandated by governments to increase the accessibility of websites and applications for people with disabilities. Even though the U.S government does not currently mandate WCAG, it is becoming a best practice and is likely to be mandated in the future.
Some of the benefits of an accessible website are the ability to expand your audience and increase your search engine optimization (SEO). For most companies, a larger audience and a better ranking on Google are great ways to increase revenue.
At EffectiveUI, we build world-class brand experiences that go beyond visual design. We are continuing to grow our ability to make our clients’ websites and web-based apps easily readable for those with disabilities and those who rely on assistive technologies.
Here are our top tips for making your site accessible.
1. Understand your document outline
The document outline is the content structure of a site; generated by the document’s headings, form titles, table titles and any other appropriate landmarks. These are employed to help a user understand the context of what they are reading. Think of your Web application like a book. Most books have a table of contents that breaks down the title of the book, each chapter’s title and sub-content within each chapter. This is very similar to how a website should work. Each page has its own title with headings to declare the meaning of each block of content. H1 through H6 should declare the hierarchy of the content, with H1 being the page heading or section heading with incrementing heading levels for subsets of content. These headings should always go in consecutive order. Navigating a page using headers is one of the primary methods used by those who leverage screen readers.
Below is an example of a document outline taken from Wikipedia’s Web accessibility page.
2. Think of accessibility like SEO
The beautiful thing about making the Web accessible is that it can go hand-in-hand with SEO. When Google routinely crawls your site, their bots scrape your content looking for hierarchy, context, relationships and meaning. Screen readers are doing the same thing. When you accurately define what your content is, everybody wins. Your site becomes easier to navigate for people with disabilities and your ranking increases within Google search results.
3. Update your tooling
Tooling is everything on the Web. The rise of new software and hardware was all made possible from preceding tooling. There are many tools available, but I have found that nothing beats the WAVE Toolbar. The WAVE Toolbar shows you the document outline, color contrast issues and a whole range of other items. It even shows you which WCAG guideline a reported error fails. Other good ones are Cynthia Says and Tenon, which can be leveraged as an automated build tool during the development process.
4. Learn how to use a screen reader
Sometimes the best solution is to just dive in and experience your content the way a screen reader interprets it. If you are using a Mac, all you have to do is enable VoiceOver by going to Preferences>Accessiblity>VoiceOver or Command + F5. From there you use tab or the arrows to navigate a site. There is also a VO key (Option + Control for Mac users) that when paired with a modifier can be used to navigate through a site.
5. Watch your colors
While much of the work making an application or website accessible is technical, there remain several design related enhancements. The primary things to keep in mind are:
- Don’t only use color to convey information.
- Provide visual focus along with the hover state.
- Provide labels, even if those labels have to be visually hidden with code.
- Try not to hide important information behind hover states for devices/users that don’t use a mouse.
- Make sure there is sufficient color contrast between text and its background.
Above is an image of two login forms for comparison. The form on the right is in grayscale to simulate color blindness. To a user that is colorblind, the red error state around the password field means nothing without text next to it. Also, the form on the left does not have any labels. Labels help describe the meaning of the associated input field and are more valuable than using only placeholder text. The errors on the right are more descriptive and lets a person using a screen reader know exactly which input they need to fix.
6. Give your images meaning
If you can’t highlight the text on a website, the screen reader can’t understand it. While alt tags work as descriptions of an image, they shouldn’t be used as replacements for text on top of the image. Adding live text can make it hard to comp match, which is why visually hiding text can be an acceptable method.
Below is an image taken from the Applebee’s website. It is an image of text instead of using text placed in the code and then styled to meet the design. Screen readers and Google’s crawlers are unable to recognize any content on this image.
7. Increase your HTML vocabulary with ARIA tags
HTML5 has given us a lot of new features including a way to add missing HTML semantics needed by assistive technologies such as screen readers. Accessible rich Internet applications (ARIA) allow developers to add details and attributes to HTML elements so they may better define relationships and content descriptions within HTML.
Below is an example of a tab widget taken from MDN. You can see that an ordered list contains three tabs that will hide and show content referenced in the ch1Panel element ID. Each tab item uses the role attribute to create a relationship with the content’s area-labeled by attribute. This way screen readers can understand that one action relates to a chunk of content being displayed.
Making your site accessible or just increasing your site’s accessibility benefits your efforts substantially by increasing your user base and traffic. Keep in mind that making your site accessible is a lot easier if proper consideration is given before you begin building. Simple things like including text with the images and following the document outline can have a huge benefit. While the Web continues to mature, it is important to create an equal opportunity Internet that everyone can access. Further, it is likely we will continue to see an increased expectation and eventually mandatory levels of accessibility standards.
