Beginning ReactJS Foundations Building User Interfaces with ReactJS

19Accessibility in React

Accessibility (also known as a11y, because all those letters between the a and the y are too hard to type) means that websites and web applications are designed and built in such a way so that people with disabilities can use them. The qualities that make a user interface built with React accessible are no different from those that make any web user interface accessible, but the way in which accessibility is implemented differs in some instances.

In this chapter, you'll learn:

• What makes a web application accessible.
• Special considerations for making single page applications accessible.
• What ARIA is.
• How and why to use semantic HTML.
• The importance of proper labeling of form elements.
• How to use media queries in React components.

WHY IS ACCESSIBILITY IMPORTANT?

According to the World Health Organization, about 15 percent of the global population has some form of disability. Accessibility studies have found that between 6 and 10 percent of people over 15 years old have a sight or hearing impairment. For people over 65, that number is over 20 percent. Eight percent of people over 65 have difficulty grasping objects—including a computer mouse.

With the average age increasing worldwide, the number of people who require some sort of alternative device or assistive technology to use the web is in the tens of millions, even by conservative estimates.

Implementing web accessibility is not just the right thing to do or good for business, it's increasingly ...