The Importance of Accessibility

Accessibility in React Explored

My Background

I graduated from the Full Stack Web Development program at Lambda School in May 2020. Before I decided to become a web developer I worked in special education, and behavioral therapy working with children with special needs for almost 4 years. It was working with these amazing children and the various technologies they needed that made the importance of accessibility in technology clear to me.

Why should the web be accessible?

The internet is for everyone.

From a company's viewpoint, wouldn’t you want as many people as possible to be able to use your site and access everything you are trying to share online? The world is made up of potential customers, these potential customers are all different people with different levels of abilities. Being accessible will provide you the capability to reach more potential customers throughout the world. Why not do everything you can to make it easier for people to view your website or app?

What is web accessibility?

Web accessibility is sometimes referred to as A11Y, this is the abbreviated version of the word ‘accessibility’: "a" followed by 11 letters, ending with "y".

According to the React documentation, “web accessibility is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.”

Areas to Consider for A11Y

No site can ever be 100% accessible but you can do your best to make it as accessible as possible. Any website or app can be improved through accessibility, there are multiple small things you can implement and changes that can be made to improve the accessibility of a website. The following is a list of the areas to consider for A11Y when you are building a new site or app:

View List

- Animation - Appearance - Audio - Color - Content - Controls - Forms - Global Code - Headings - Images - Keyboard Events - Lists - Media - Mobile - Tables - Video

The A11Y Project also has a useful checklist to help you improve the accessibility in any app you are building: A11Y Project Checklist

Common Challenges with A11Y in React

• Infinite wrapper div tags
• Lack of focus management when navigating between routes
• Understanding what accessibility means within a project

Ways to Overcome Common A11Y Challenges in React

• Sometimes you can use React Fragments to group together multiple elements instead of using infinite wrapper div tags.
• To manage the issue of a lack of focus management when navigating between routes try using a router that has accessibility built in, like Reach Router.
• Take advantage of dev tools or browser extensions to scan the DOM for an acceptable outline for your JSX, and help with understanding how to structure your project to make it accessible for everyone.
• In general, reading React’s accessibility documentation will get you started on the right path towards A11Y!

Ways to Update a Current Website for A11Y

It can be overwhelming to add A11Y to a project already up and running. Try starting small and on low priority items in a project.

• A good place to start is with images. By adding alt text to the img tag using the alt attribute can quickly and effectively make images more A11Y to screen readers, for example:
  <img src="yarn.png" alt="Ball of hot pink yarn.">

• Another way to make an existing site more user friendly and A11Y is to update any lists in the website. Creating lists by using list elements, <ul>, <ol>, and <li>, instead of special characters, lists will be much easier for screen readers to navigate and screen readers will be able to explicitly define the relationship these elements have.
• A third area to update in a current website for A11Y is forms. A11Y Style Guide has a good general guide to follow for making forms A11Y. WCAG recommends using <fieldset> for grouping and <legend> to describe the grouping, using this in forms makes the forms more accessible for screen readers and other assistive technology.
• From here, you can build up and go through the list of the areas to consider for A11Y. I suggest focusing on one area of A11Y before moving on to the next area.