Skip to content

Accessibility Style Guide & Design Guidelines

Rev

Sep 25, 2020

Accessibility Style Guide Design Guidelines

RevBlogAccessibilityAccessibility Style Guide & Design Guidelines

According to the Center for Disease Control, one in four American adults live with a disability. Every condition does not affect how people experience the internet. Many disabilities can make navigation, shopping, research, and general use difficult.

Recent research shows people with the impairments and diagnoses listed below need uniform accessibility measures to enhance their success in using the internet.

Impairments

  • Visually Impaired or Blind
  • Fine Motor Coordination
  • Hearing
  • Speech
  • Cognition
  • Ability to Focus or Concentrate
  • Memory
  • Writing
  • Reading
  • Low Self-Esteem
  • Social Fear
  • Learning
  • Sensitivities to Impressions
  • Transitions or Start/Stop Activities

Diagnoses

  • Anxiety/Depression/Bipolar
  • Dyscalculia
  • Intellectual disability
  • Dyslexia
  • ADD/ADHD
  • Stroke
  • Language Disorder
  • Epilepsy
  • Aphasia
  • Autism

Combining this data tells the story that a large percent of the population has difficulty using the internet independently. Many disabled users require software to assist their use. Making your website digitally accessible using Web Content Accessibility Guidelines (WCAG) will enable your web content to reach more users.

WCAG are accessibility standards that developers can use to make the internet more accessible to people with disabilities that inhibit their use. Initially, guidelines had been created for physical disabilities; as years progressed, other inhibitory factors became recognized and addressed.

Actionable guidelines are split into five groups perceivable, operable, understandable, robust, and conformance. This manual covers all five groups from WCAG version 2.1, followed by a discussion about style and design pointers, and a checklist at the end where developers can assess their level of compliance with WCAG 2.1.

WCAG 2.1 Guideline Review

Each guideline was created to help people who have a tough time using the internet to have a better experience. There is a broad spectrum of disabilities that can deter people from using the internet. Efforts made to accommodate those that have trouble may not alleviate issues 100% of the time. In these cases, your response to user issues will be the deciding factor on your site’s accessibility.

Download a Free WCAG Guideline Checklist

WCAG 2.1 Guidelines

1. Perceivable

Non-Textual Content

You should integrate alt text or a text alternative that can be used by assistive technology into non-textual content. Visual media needs to be accompanied by descriptors, captions, and linked to scripts or transcripts.

Here is an example of alt text HTML you would use for an image:

<img src=”New_Wheels”.jpg” alt=” Porsche 918 Spyder Concept Car Red” width=”400” height=”300”>

A screen reader will read out the alt portion of this HTML code to the vision-impaired user.

Input areas or other controls need to have a text descriptor attached. All CAPTCHAs require a text alternative. Formatting and decorations do not need a text alternative.

Developers commonly struggle with non-textual content when creating forms containing input fields. When assigning labels and input fields, you want to ensure that each label is associated with the correct form field. Doing so will enable assistive technology to correctly label each field for a disabled user, making it possible for them to fill out the form without mistakes.

This can be done by associating <label> and <input> elements, there are many ways to do this, here is one example:

<label> Remember Details
<input>type="checkbox" name="rememberdetails">
</label>

If you choose to go beyond the basic guidelines, you can add things like audio descriptions, sign language interpretations, and alternative presentations to be sure that you reach everyone in the audience.

2. Adaptable

Adaptable content is just that; it is adaptable to screen size or other manipulations. The most common example of this is the difference between a site’s presentation on a computer and a mobile device. Developers often simplify the phone presentation to make it easier to understand and navigate on a smaller screen.

When making your content more adaptable, you will want to think about three things:

3. Distinguishable

Guidelines related to distinction revolve around color, sound, contrast, sizing, and formatting to convey additional information.

Color

Color differentiation can be extremely handy and pleasing to the eye when used to define attributes that are off, required fields for submission, on or off toggle buttons, groups of information, and more. These types of differentiation can be problematic for the blind, hard of seeing, and colorblind.

The easiest way for your site to be WCAG compliant is to attach alternative text to label fields that use color to convey information or elicit a response.

Audio

Webpages that contain automatic audio features can be troublesome for those working to understand content using a page reader or other types of accessibility software. Automatic audio features that last more than three seconds need to have user interface controls to comply with this guideline.

Contrast

A contrast ratio of 4.5 for text to 1 for images of text is the general rule of thumb developers are required to use. When pages present large text, the ratio becomes 3:1. Incidental text and logos do not have a contrast requirement.

Sizing

Most browsers allow for magnification of pages up to 200%; when designing your site, ensure that text resizing does not cause significant information loss. When working with text images, it is a good idea to allow for customizable scalability to enable users to view these attributes as they please.

Formatting

To make pages easier for everyone to use, limit the page’s width to cut down on the need for two-dimensional scrolling when browsers or other software are zoomed-in. Pay attention to how the spacing between lines and borders are defined.

For example, resizing justified text inside of a boarder can render the text unreadable, depending on how the justification is defined. Setting spacing definitions relative to the text, such as white lines defined as 1.5 times the text’s size, will aid in readability.

Another way to make formatting easier for users to get around is to make it customizable. Allowing users to pick background and foreground colors or line spacing will enable them to customize the presentation so that it is digestible. The image below provides the exact guidelines suggested by the World Wide Web Consortium (W3C) in version 2.1 of the WCAG.

4. Operable

Keyboard Accessibility

Disabilities that affect internet use can heavily weigh on a person’s ability to operate a mouse. It is up to the web designer to create keyboard friendly navigation throughout the site. The two main questions you should be asking here are:

Time

Time-limited content should have the option to be overridden, paused, or extended (with a warning) except when the ability to do so would nullify the content or the amount of time given is over 20 hours.

Seizures

The general rule to avoid triggering a seizure is to limit flashing content to three flashes per second. Allowing users to disable automatic animations before they run is another way to prevent this situation from happening.

Navigation

Navigation can be tricky for users employing assistive software, magnification, keyboard-only input, or have cognitive disabilities. Here are some suggestions on how to make the overall experience more enjoyable for these people.

Non-Keyboard Inputs

If your content uses a swiping feature or requires users to execute movements on the screen with a mouse or finger, integrate an option where a keyboard can be used instead.

5. Understandable

Readability

When creating content, use words that the average person will understand. When using technical jargon or abbreviations, define them, or offer links for people to find additional information. Tailor your content to your audience.

Predictability

Be consistent in the way that information can be navigated and give warning before changes in context occur. An example of poor predictability can happen when a user tabs through a page to see what is there and is unexpectedly brought to a new page (change of context) without warning.

For example, a user is reading a ten best contained on multiple pages. Using the tab key, they scan the first page to understand what is there before reading or hearing the content and end up on the next page without warning. This can happen when a change in keyboard focus results in a change of context. To avoid this from happening, add a click or spacebar input to move on to the next page.

Input Fields

To further prevent errors in submission beyond associating labels with input fields, developers can add error attributes to the fields to ensure they are correct. Here is a snippet of HTML used to identify email addresses that are not formatted correctly from WCAG 2.1:

<div class="control"> <p><label for="email">Email address: [*]</label> <input type="text" name="email" id="email" class="error" aria-invalid="true" aria-describedBy="err_1" /></p> <span class="errtext" id="err_1">Error: Incorrect data</span></div>

This HTML will tell the screen reader to alert the user that the email they typed is not correctly formatted.

6. Robust

If your content is robust by WCAG standards, it is compatible with assisted-use software and can be navigated without a mouse.

7. Conformance

To be compliant with WCAG 2.1 full web pages, an entire process or the whole site must follow one conformance level. You can also offer an alternative accessible version that complies to be in confirmation. Please see the WACG 2.1 section on conformance for more information.

Those are the basic guidelines in a rather large nutshell. You can find additional suggestions on the WCAG 2.1 website. Now that the nuts and bolts are out of the way, the next section will cover some ideas on how to get creative and elevate the user experience for people with disabilities.

Style and Design Pointers

Colors

If you have been around a while, you will have noticed that the use of black only backgrounds has become less popular. A black background significantly reduces the readability of text on the page. Other color combinations you don’t often see are red and green and yellow and blue. It is best to avoid combinations because they clash, but people with color blindness cannot differentiate them.

In Japan, a research group concerned with getting research across to colorblind people ascertained that contrasting colors used together work best. They also suggested that varying hues to relay information is ineffective. You cannot rely on color alone to communicate. The effective way to get information across is to label the data or section that is colored, as suggested above.

The group also developed a color pallet that you can use to convey information by way of color for color blindness or other visual impairments, not including blindness, shown below.

Other Accessibility Recommendations

Rev.com offers a variety of services that can be utilized to improve web content accessibility. Among them are transcripts, closed captions, and subtitles.

Transcripts

Audio transcription and video transcription services are great options for improving the accessibility of your web content. Whether you create videos, podcasts, audio books, or interviews, transcripts create a readable asset to help several individuals with disabilities.

Closed Captions

Did you know that almost 85% of Facebook videos are watched without sound? This gives you an idea how important closed captions are for your online videos. Most people benefit from closed captions, especially people who are deaf and hard of hearing. Closed captioning services caption your videos at an affordable price so you don’t have to!

Foreign Language Subtitles

Foreign subtitles are similar to captions, but are translated into foreign languages. This improves accessibility for anyone watching your web videos who speaks different languages. Reach a global audience with foreign language subtitles.

Download a Free Accessibility Style & Design Checklist