Recently, the entire Lyquix team attended accessibility training sessions, where we learned about the obstacles that website and app users with disabilities and impairments face when trying to navigate and interact with with web properties. This blog post will present the challenges faced by those who have a disability or impairment, discuss how they can be addressed through design and development best practices, and provide you with some web accessibility resources so that you can ensure that your content can be accessed  and consumed by all.

And before you dismiss this article, thinking that this is not applicable to your website, consider the following: It's the law! The Americans with Disabilities Act (ADA) requires any business with 15 or more employees to ensure their public places and accommodations do not discriminate on the basis of disability. In a landmark lawsuit against Target it was established that websites are considered public places and accommodations. And ultimately, even if it wasn't the law, any improvements in accessibility benefits absolutely all your users, making your website easier and more pleasant to use.

The Challenge

It is estimated that one-in-five Americans (20 percent of the population) have some kind of disability.  There are four major categories of disabilities:

• Visual: Visual impairments including blindness, various common types of low vision and poor eyesight, various types of color blindness

• Cognitive/Intellectual: Developmental disabilities, learning disabilities, and cognitive disabilities of various origins, affecting memory, attention, developmental "maturity," problem-solving and logic skills

• Hearing: Deafness or hearing impairments, including individuals who are hard of hearing;

• Motor/Mobility: Difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control, etc., due to conditions such as Parkinson's Disease, muscular dystrophy, cerebral palsy, stroke

Designing and developing websites and apps that can be used by individuals with disabilities requires careful planning and implementation.  Here are some design and development considerations for making your site and app accessible to individuals in each of the four major disability categories:

Visual Disability Considerations

Blindness, Low-Vision, and Color Blindness each offer unique accessibility challenges.  We will discuss each separately in this section.

Blindness

Those suffering from blindness cannot see any of the content that appears on a screen and rely on screen readers to read the page content from top to bottom, one line at a time.  Using the "Tab" key on keyboard allows the blind user to navigate from header to header and link to link.  

While screen readers are quite advanced, there are some limitations:

• Screen reader cannot describe images

• Screen readers cannot survey an entire page; they work though the page's content in a linear progression

To aid those using screen readers, it is imperative that you use semantic HTML, provide text descriptions for all non-text elements, and implement descriptive links (do not use "click here").

Low Vision

If a user's vision cannot be fully corrected using glasses, he/she is considered to have low vision.  Individuals with low vision cannot see the content on the screen clearly, and use screen magnifiers to view the text and graphics.  Low vision individuals also have a difficult time with sites and apps that have low contrast.

To help people with low-vision consume web and app content, it is important to consider the following:

• Make sure the content resolves correctly if magnified

• Try to limit the use of text in graphics

• To the extent possible, try to maximize the amount of contrast on the screen

Color Blindness

There are many types of color blindness.  The most common is red-green deficiency.  Individuals with the red-green deficiency have trouble differentiating reds from greens.  

To accommodate those with color blindness, you do not need to only use black and white images.  Instead, simply make sure that colors are not your only method of conveying important information.

Cognitive/Intellectual Disability Considerations

Designing and developing accessible and functional websites and apps for individuals with cognitive disabilities presents some unique challenges.  Individuals with cognitive/intellectual disabilities have a hard time processing language and numbers, interpreting auditory inputs, and understanding spatial orientation.  

To address these issues, consider implementing the following strategies:

1. Keep menus short and easy to understand

2. Use plain language in short, concise sentences

3. Streamline the page design

4. Remove any time limitations on forms

5. Provide users with an easy to understand sitemap

Hearing Disability Considerations

Most web and app designers and developers overlook individuals with auditory disabilities because the web is considered a visual medium.  Most of the attention is given to those who cannot see and those with limited motor skills, as uses need to view a screen, click a mouse or screen, scroll with a mouse or finger, and type on the keyword to interact with a website or app..  However, information on a website or app can be presented in multiple formats: text, graphic, audio, and/or video.  Increasingly, brands are using audio and video content.  

There is a simple, straightforward way to make sure that all of your content is accessible to individuals with hearing disabilities: provide captions and transcripts for audio and video content.

Motor Disability Considerations

Motor disabilities can result from a spinal cord injury, the loss of or damage to a limb, or the onset of disease or congenital conditions.  Because users with motor disabilities may not be able to control the mouse or keyboard, it is essentials to ensure that all functions are available through the keyboard and/or an assistive device.

Most assistive technologies for individuals with motor disabilities either work through the keyword or emulate the keyboard functionality.  Designers and developers must focus on making all the content accessible through the keyboard, with the simple and straightforward navigation and page functions.

Design and Development Best Practices

As you can see, the accessibility training was well worth our time.  We learned that there are straightforward, common sense design and development practices that should be implemented on every project to benefit all users:

Use Semantic HTML

Use semantic HTML, instead of presentation tags. Semantic HTML (for example <h1> - <h6>, <p>, <ul>, <form>, <table>, <img>, etc.) clearly defines an element's meaning to the browser and the developer.

HTML5 introduced several new semantic elements representing sections or components of a web app or document: <section>, <nav>, <article>, <aside>, <hgroup>, <header>, and <footer>, along with new rules for using the old <h1>-<h6> and <address> elements. None of the new HTML5 elements actually "do" anything by themselves, but they provide developers a straightforward way to define the various parts of a document, and open the door for user agents and assistive technologies that use this information to provide individuals with disabilities the ability to navigate and consume the content of a website or app.

Follow the Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines 2.0 direct designers and developers to focus on principles rather than techniques, which are more flexible and encourage firms to place people at the center of the process.

That said, all website should follow the four principles (POUR Principles) of accessibility:

• Perceivable

  • Organize the navigation and content in a logical and intuitive manner

  • Provide text alternative for non-text elements (alt text for images, captions for videos)

  • Assign descriptive values to buttons and text labels to form inputs

  • Use descriptive link text

• Operable

  • Make all functionality available from the keyboard

  • Provide users the ability to navigate and find information easily

  • Remove any time limits

  • Do not design content in a way that is known to cause seizures

• Understandable

  • Make content readable and understandable

  • Make web pages appear and operate in predictable ways

  • Help users avoid and correct mistakes

• Robust

  • Ensure that content can be reliably accessed by a wide variety of user agents, including assistive technologies by using proper HTML, CSS, and Javascript structure.

If your site is not fully accessible to individuals with disabilities, you may be ignoring and alienating five, ten, or twenty percent of your audience.    Imagine the potential opportunity if you focused on making your site and content accessible for all.

Web Accessibility Resources

Web Accessibility Standards

• Version 1.0: https://www.w3.org/TR/WCAG10/

• Version 2.0: https://www.w3.org/TR/WCAG20/

Web Accessibility in Mind (WEBAIM): http://webaim.org/