Accessibility

Our design system should follow WCAG 2.1 guidelines (as of May 2023). In using React user interface designs, we are adhering to high accessibility standards from a design perspective. It is important that accessibility use cases are outlined to developers at various stages of development to ensure programming for accessible design is consistent. 

 

Best Practices

There are two methods to employ accessible design elements:

• WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with HTML, JavaScript, and related technologies.

• Semantic HTML is the foundation of accessibility in a web application. Using the various HTML elements to reinforce the meaning of information in our websites will often give us accessibility for free.

 

Both methods should use appropriate labels and error messaging (see WCAG section below). React elements should have labels already associated with them, but alternative text should be used for better accessibility. 

 

Choose accessible names with care. If there are two things on a page that do exactly the same thing, give them the same accessible name. For example, two links that point to the same destination should have the same accessible name. Conversely, if there are six buttons on a page that all do different things, each one should have an accessible name that is unique and distinct from the rest.

 

Understanding different types of disabilities

Web accessibility encompasses all disabilities that affect access to the Web, including:

• Auditory - this involves hearing and usability

• Cognitive - this involves information load and usability

• Neurological - this involves patterns and usability

• Physical - this involves the physical body and usability

• Speech - this involves speaking and usability

• Visual - this involves seeing (including vision-based language) and usability

 

Web accessibility also benefits people without disabilities, for example:

• people using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc.

• older people with changing abilities due to aging

• people with “temporary disabilities” such as a broken arm or lost glasses

• people with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio

• people using a slow Internet connection, or who have limited or expensive bandwidth

Web experiences should utilize labels and error messaging when developing designs. 

• Labels help define elements for users with screen readers. Element IDs and Alternative Text (alt) are two types of labels defining or describing web content. Both contextualize user experiences through vocal cues. Landmark elements and roles, such as <main> and <aside>, should be used to demarcate page regions as assistive technology allows the user to quickly navigate to these sections.

• Error messages alert the user to flow issues or design bugs. If either client-side or server-side validation detects errors in the form, then there is a 3-step process to ensure usable and accessible error recovery:

1. Alert the user to the presence of the error in an apparent and accessible manner.

2. Allow the user to easily access the form controls that need to be modified.

3. Allow resubmission and revalidation of the form.

 

Color and contrast

Minimum color contrast should be adhered to. For reference, designs should achieve a color ratio of 4:5:1 within the context of the web experience. Additionally, color should not be used for indication and we should consider colors that allow for consistent contrast for users with forms of color blindness. From a design perspective, colors should be used to add gradual contrast to elements to convey hue and depth. Therefore users can perceive differences in tone regardless of color types. Colors should add character without impacting functionality.

 

Images

Images should be clearly distinguished from the background within a minimum level of contrast. Alternative text should briefly describe what the picture is conveying:

Syntax:<img alt="text">

1. The use of alternative text is a principle of accessibility. Alternative text is read by screen readers to provide a description of the image to its user.

2. If an image fails to load, alternative text is shown to give the user information about the image.

 

When images are used for decoration and serve no other purpose than aesthetics, they require an empty alt attribute or null alt text (alt = “”). The reason why an empty alt attribute would be used instead of not having an alt text is because the empty alt text allows screen readers to skip over the image.  

 

If the image is a decorative image (background image), it does not need alternative text. All decorative images should have the “null” attribute.

Syntax:<img alt=""> 

 

The best method to provide alternative description to users is by using figure captions. Images can have figure captions associated with them that will not only be read by a screen reader but can provide additional information to sighted users. At times, an alternative text might provide more information to assistive technology users giving a disadvantage to sighted users. Moreover, alternative text can be an inconvenience to assistive technology users when it becomes too long. Figure captions are located either below or above the image to associate the description and image.

Syntax: <figure> <figcaption> text </figcaption> </figure>

 

Motion

Videos or elements with motion should avoid flashing. A page cannot contain content that flashes more than 3 times per second unless that flashing content is sufficiently small, the flashes are of low contrast, and do not violate general flash thresholds.

For elements that have dynamic structures and multiple points of interaction, the user should be able to control the play and replay of motion.

 

UI

Shapes and sizes can be used to differentiate content and elements. For example, shapes are often used to convey buttons in a web page or form. However, since assistive technologies cannot emphasize elements based on their color and shape, users who rely on these technologies will be unable to understand information conveyed by shapes and sizes. Therefore, providing an additional method to supplement shape and size indicators will allow all users to understand the information. 

Visual location, orientation, and sound is often used to guide a user to specific areas in a webpage or provide additional information. Using these sensory methods can be a problem for users who are blind or low vision, have cognitive disabilities or are deaf or hard of hearing and are unable to perceive information using these methods.