How to Design for Web Accessibility

Web Content Accessibility Guidelines (WCAG) are the international standard needed to make website content more accessible to those individuals with any number of disabilities. These requirements are what is known as “success criteria”. Here, you will find some of the most basic actions that will help you get started to make your user interface and design absolutely accessible to those individuals with disabilities. These tips are what would be considered good practice to get you on track to meet the WCAG guidelines.

Foreground and Background Contrast

One of the most basic guidelines is that there has to be a sufficient contrast between the foreground text and the background colors. This would include text that is on buttons, gradients, images, and any other elements. It does not apply for logos or text that just happens to be in a photograph. There is a requirement for the luminance contrast ratio, or just contrast ratio for short.

Some people are not able to read text on websites if there is not enough contrast between the background and the text, like light gray text on a white background. For those that are not able to see low contrast text, high contrast is required. This would include those who have visual impairments or those who are older and have lost contrast sensitivity. For other people, bright colors with a high luminance cannot be read. This might be the case for some people with reading disabilities like dyslexia.

Web browsers should have the capability to have the user change the color of the background and text, and web pages should work to be compliant with the contrast ratio of 4.5:1 for all normal sized text. This can be checked three ways: with a table with contrast ration, using an eyedropper to select the colors, or by turning off the color. Using a table with contrast ration is the most comprehensive while selecting the colors with an eyedropper is the most accurate.

Color Only Should Not Convey Information

Color is quite useful when trying to convey information, but it should not be the only way that the information is conveyed. There should be another way to identify this information that the color is trying to convey so that color perception is not the only thing being relied on. As an example, you can use an asterisk as well as color to indicate which fields are required to fill out, and use labels to separate certain areas on graphs.

Examples of this would be “errors shown in red” “required fields are in blue”. If the user can't differentiate the color, they will not know which part is required, or experiencing an error. When you comply with these requirements, you are ensuring that users with partial sight or color blindness are able to fully experience the website and can distinguish all information in the needed areas.

Easily Identifiable Interactive Elements

There should be distinct styles used for elements that are interactive (links, buttons, etc) that makes them easy to identify by the user. As an example, you can have the appearance of links change with keyboard focus, touch-screen activation, or a mouse hover. These interactive elements should be consistent throughout the website.

The importance of this is so that anyone that relies on the keyboard to operate the page can visually determine the component that the keyboard operation will interact with at any point in time. Additionally, those with short term memory limitations, executive process limitation, and attention limitations will benefit this because they are able to discover where the focus on the page is located.

Navigation Options

You should make sure that the navigation on all pages of a single website are named, styled, and positioned consistently. There should be more than one method to navigate the website, like a sitemap or site search. Users should be able to know where they are within the website through the use of orientation cues like clear headings or breadcrumbs.

To have compliant navigational structure, there will be a control that is consistently located, the navigational menu will expand, a skip navigation link will be present, and a skip to navigation link will be present. The presence of options like this on a consistent basis ensure that the user will know where they are located on any given page.

Ensuring these repeated components help users to be comfortable that they will be able to guess where they will find things on each page. More specifically, it helps users with cognitive limitation, individuals with low vision, individuals with intellectual disabilities, and those users who are blind.

Form Elements and Clearly Associated Labels

There should be descriptive labels adjacent to any field or form element that needs to be filled out. In left to right languages, labels will be located on the left of the field or above it, while radio buttons or checkboxes are on the right. There should not be an excess of space between labels and fields.

The intent of this specification is to have webmasters put their instructions or labels where users would input data. They may also choose to specify the data formats for things like a date or time. While adhering to this, the page should not be cluttered with added information, but it needs to deliver important instructions and cues that are beneficial to users with disabilities. There should be enough information provided so that the user can accomplish their task with no unnecessary navigation or confusion. Label elements connected with input elements are what will be spoken by screen readers when that field is in focus.

Feedback Should be Easily Identified

Interactions that need feedback should have that feedback easily identifiable. This would include things like alerts if something goes wrong, notification of changes on the page, and confirming submission. Form instructions should be identified easily while feedback that needs action from the user should be prominently displayed.

This specification ensures that users are aware of any feedback, including errors that have occurred so that they can determine what went wrong. This could be an unsuccessful form submission, indicating errors in fields, and more. Individuals who are utilizing a screen reader will not know there was an error until they encounter one of the identifiable indicators. The user should be aware of any input errors that they are responsible for, and more specifically, this could be information that is required of them by the website, or could be data provided by the user but it falls outside of the allowed values or outside of the required format for the data.

Heading and Spaces Should Group Related Content

Strategically placed white space and proximity will make the relationships between content more visibly apparent. You should be styling headings to get rid of clutter, group content, and make it easier for the reader to understand quickly.

The purpose of this is to aid users in understanding which information is contained in the webpage and how that data is organized. When headings are made to be clear and descriptive, individuals can easily find the information that they are looking for, and then can understand the relationships between parts of the content more easily.

This is beneficial for those who have disabilities that are plagued with slow reading limited short term memory. For those individuals, having section titles will make it possible for them to predict what each section will contain. In speaking to this, the descriptions should be accurately descriptive and precise without going overboard. Section headings should be unique, and each section should be started with unique information.

Each Viewport Should Have a Different Design

Examples of viewports are mobile phones, or browser windows. Now think about how information is presented through each of these different viewports. You can change the position and presentation of elements like the navigation and header in order to make the best use of the space that is available. While doing this, you should be making sure that the size of the text and its width are set for maximum readability and legibility.

Small screen size is common on most mobile devices now, and magnification of them are used by those who have low vision. Some of the best ways to make the best of small screens are: minimizing the amount of information that is put on each page compared to the desktop version, providing a reasonable size for the content, adapting link text length to viewport width, and positioning form fields below their labels. When there is a dedicated mobile version of a website, content is tailored for ease of use. There may be less content modules, less images, and more focus on the most important content.

Alternatives to Images and Media

There should be a place in the design of the website to provide alternatives for media like images. This could be something like transcripts of audio, text in addition to icons and buttons, audio description of videos, and descriptions/captions of tables or graphs. You should be working with content authors and developers to produce alternatives to non-text content.

The purpose of this portion of accessibility is to ensure that information conveyed by non-text content is accessible through a text alternative. This is one of the primary ways that information is accessible because it is possible to render them through any sensory modality that will match the needs of the user, like tactile, auditory, or visual. When text alternatives are provided, the information can then be rendered in many different ways. For example, someone that has visual difficulties can have the text alternative read out loud with synthesized speech. Also, someone with hearing difficulties can have the text alternative displayed so that they can read it.

Controls for Automatically Starting Content

You should provide visible controls that allow each user to stop things like auto-playing sounds or animations, sliding images, and videos.

This is a problem for many people, and those who make use of screen reading software might find it difficult to acknowledge the speech output if there is audio from the website playing at the same time. This is then made worse when the speech output from the screen reader is controlled on the same volume that the sound for the site is. Because of this, it is extremely important for the user to be able to turn off any background sounds—either at a low volume or totally off. This could also include audio that begins playing upon opening a page but a successful compliant page would have a “silent” option on the page. Another successful option would be to have sound that stops within 3 seconds of opening.

Though this is not required to be in compliance, you should think about providing a site-wide option to turn off all audio, as well as providing a control near the top of the page that will turn off all sounds automatically. The most common failures of this are when a site has a sound that plays for longer than 3 seconds with no way to turn it off, and no way to stop or mute a piece of multimedia with sound. Those who use screen reading technologies should be reasonably expect that they will be able to use any website on the internet.

CAPTCHA Controversy

Believe it or not, there is a controversy surrounding the use of CAPTCHA. It is said that they intrinsically push the edges of a human's ability in order to defeat an automated process. All types of CAPTCHA have the potential to be unsolvable by individuals with certain disabilities. CAPTCHAs are widely used and there has been a structured requirement for their use. Those who are working to improve the use of CAPTCHA recommend that there are more than just two modalities of CAPTCHAs, not require CAPTCHAs for users that are authorized, and users should be able to access a human customer service representative when CAPTCHA has to be bypassed. Even when websites meet the minimum requirements, they might still not be able to access all of the content.