Several weeks ago, we explored the evolution of the American with Disabilities Act (ADA) and the application of this law to internet properties. While formal guidelines have yet to be issued by the Department of Justice (DOJ), the Web Content Accessibility Guidelines (WCAG) 2.0 have emerged as the standard for developing accessible web properties and should be referenced in the design and development process.
There are four main principles in the WCAG 2.0 that provide a foundation for website accessibility: perceivable, operable, understandable and robust.
In this series, we’ll take a deep dive into each principle and share important considerations in creating an accessible website. First up: perceivable.
*It’s important to note that when we discuss those with auditory or visual disabilities throughout this series, we are not only speaking of those with the most commonly known disabilities, such as deafness and blindness. Other auditory and visual disabilities include colorblindness, and partial hearing and vision loss. Other factors that may impact one’s ability to access content on your website may include reading disabilities, a language barrier, a slow internet connection and limited access to small screens on handheld devices.
The list below is not intended to be an all-inclusive guide for website developers. Instead, it simply explores how some common website elements can be modified for greater accessibility.
Principle 1: Perceivable
According to the WCAG 2.0, under this principle, “information and user interface components must be presentable to users in ways they can perceive.” In other words, the content on your website must be presented in a way that visitors can easily consume and interact with the information. The content on your website must be available in multiple forms with distinguishable page elements for visual and hearing impairments. Below are the guidelines that website developers and designers must keep in mind in order to create an accessible website.
Guideline 1.1: Text Alternatives
Under this guideline, you should “provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.”
Non-text content refers to images, emoticons, graphs, artwork, buttons and forms. For those that are unable to view non-text content on a page, you must develop alternative ways to make this content accessible.
- Images should include alt descriptions and captions which clearly describe the content and context of the image on the page. This is necessary for those who rely on a screen reader to playback the description of the non-text visual. Alt descriptions are also helpful for those with a slow internet connection or who use a text-based browser because the text alternatives will load instead of the image.
- Form fields should be clearly labeled and form titles should describe the purpose of a visitor entering his or her contact information. Required fields should not only be highlighted in a color, but should also be labeled with a text alternative that says, “Required.”
- Graphs and tables should include an additional way of understanding the information shown in the visual, such as with a supplemental text table or a paragraph summary of the important data points shown in the visual.
- Alternate directions should be given to help visitors navigate through a webpage when arrows or other visual indicators are present.
Guideline 1.2: Time-Based Media
Under this guideline, you should “provide alternatives for time-based media.” Time-based media refers to audio or visuals that are prerecorded or live.
- Captions should be added on all visual and audio videos to include dialogue or prominent noises, such as laughing or crying.
- Transcripts should be added to audio and video elements for website visitors to read and understand the material at their own pace.
Guideline 1.3: Adaptable
Under this guideline, you should “create content that can be presented in different ways (for example simpler layout) without losing information or structure.”
If a page on a website is altered, the structure of the content should not change (i.e. the reading sequence will remain the same). Individuals have the ability to change the appearance of the computer screen to better fit their needs, such as zooming in on the page. You must ask yourself: when all of the styling is gone on the page, is the content still clear in structure?
- Multiple columns on a page should be displayed and read in the proper sequence, from top to bottom and then to the top of the next column.
- Content should be clear when seen on small screens, such as a mobile device.
Guideline 1.4: Distinguishable
Under this guideline, you should “make it easier for users to see and hear content including separating foreground from background.”
There must be a clear distinction between the foreground and background content on the page.
- Background and text colors should pass the contrast ratio.
- Colors should not be the only way to distinguish sections of information. Those with color blindness may be unable to indicate the difference between sections.
- Users should be able to control the volume of a video or perform actions, such as start, pause and stop. An option should exist to turn off the background music for individuals who are easily distracted by background noise or who rely on screen readers, which may hinder access.
You can check your website’s accessibility here. Next up, we’ll dive deeper into Principle 2: Operable.