MENU

Accessibility

Web accessibility (also referred to as a11y) is the design and creation of websites that can be used by everyone (such as a vision-impaired person). To build accessible websites, you should make sure your web application can be fully operated with the keyboard only without a mouse or a pointer. Additionally, prepare a screen reader for your website.

The following Web Content Accessibility Guidelines (WCAG) checklists provide an overview:

WCAG checklist from Wuhcag

https://www.wuhcag.com/wcag-checklist/

WCAG checklist from WebAIM https://webaim.org/standards/wcag/checklist

Checklist from The A11Y Project

https://www.a11yproject.com/checklist/

W3C Web Accessibility Tutorials

https://www.w3.org/WAI/tutorials/

Here are some points to consider:

Form control elements such as <input> and <textarea> should be labeled with descriptive <label htmlFor=...>...</label>

Errors on forms should be exposed to screen readers.

There should be mechanisms to skip to desired content and focus on (7.1) specific elements with an outline using the keyboard only.

All functionality exposed through a mouse or pointer event should also be accessible using the keyboard alone. In addition to the 'click' event, you may also need to use the 'onBlur' and 'onFocus' events.

The language of the page texts should be set explicitly for screen readers.

The document <title> should describe the page content.

All readable text on your website should have sufficient color contrast to remain maximally readable by users with low vision.

The use of landmark elements such as <main> and <aside> allows quick navigation to these sections.

The Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA, https://www.w3.org/WAI/standards-guidelines/aria/) document contains techniques for building fully accessible JavaScript widgets. All hyphen-cased aria-* HTML attributes are fully supported in JSX:

<input
  type="text"
           aria-label={labelText}
           aria-required="true"
           onChange={onchangeHandler}
           value={inputValue}
           name="name"/>

<input
  type="text"
           aria-label={labelText}
           aria-required="true"
           onChange={onchangeHandler}
           value={inputValue}
           name="name"/>

To avoid breaking HTML semantics when adding <div>, use <React.Fragment> or <> to contain a list of elements instead.