Bacancy Bacancy
  • Customers

      Fortune 500 Clients

      Verizon
      Verizon
      Franklin Templeton
      Franklin Templeton
      The Container Store
      The Container Store
      KPMG
      KPMG
      Academy Sports & Outdoors
      Academy Sports & Outdoors
      Shell
      Shell
      Bangkok Bank Ltd
      Bangkok Bank Ltd
      The Children's Place
      The Children's Place
      Edward Jones
      Edward Jones
      United Parcel Service
      United Parcel Service
      AdviceWorks
      AdviceWorks
      NatWest Markets
      NatWest Markets
      Bridgestone
      Bridgestone

      Technologies

      React JS VueJS Angular JS React Native Flutter Full Stack
      Ruby on Rails Node JS Golang AI & ML Data Science Java
      Python Salesforce DevOps Block Chain Mobile App Embedded & Hardware
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • what we do

      Experience

      Digital Workplace Services Product Enhancement

      Insights

      AI & Automation Data Analytics

      Innovate

      Blockchain Software Engineering Services Internet of Things (IoT) Data Science Artificial Intelligence Machine Learning

      Accelerate

      Cloud - Bacancy Combalt Digital Process Automation Open Source Microsoft Dynamics Salesforce

      Assure

      Quality Assurance IT Staff Augmentation

      Embedded & Hardware

      Product Engineering Analog Design Services FPGA Engineering Service Wireless Design Embedded Software Design

      not list

      Hardware Engineering Power Engineering IoT Hardware
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • who we work with

      Industries

      Banking Financial services & Insurance Startups Oil & Gas

      not list

      Healthcare Life Science Real Estate & Construction Logistics
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • about us

      Culture

      Agile Mindset Bacancy Values Bacancy Culture

      About Company

      About Us Leadership Team Awards & Recognition Infrastructure

      not list

      Customer Reviews Our Locations Partnership Media Coverage

      WE ARE

      GREAT PLACE TO WORK - CERTIFIEDTM

      Building and sustaining High-Trust, High-Performance CultureTM

      Bacancy Great Place to Work
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • technology

      Front End

      Angular Reactjs Vue.js UI/UX

      Platforms

      MS Dynamics Salesforce

      Back End

      Ruby on Rails Node.js Golang Laravel .NET Java Python

      Mobile

      React Native Flutter Android iOS

      Cloud

      AWS DevOps

      QA

      Automation Testing Software Testing

      Embedded & Hardware

      Embedded
      bacancy

      World-class expertise,Delivered

      get quote
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • PRODUCTS

      EV Products

      Battery Management System Motor Controller AC Charger Explore All

      not list

      CCS2 Controller DC Fast Charger AC Charge Controller
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
hire developers

Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

06

World wide offices

10+

Years of Experience

05

Agile Coaches

14

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

  • Customers
      Technologies
      • React JS
      • Angular JS
      • Vue JS
      • Node JS
      • AI & ML
      • Explore All
      Fortune 500 Clients
      • Verizon
      • The Container Store
      • KPMG
      • Academy Sports & Outdoors
      • Bangkok Bank Ltd
      • The Children's Place
      • Edward Jones
      • Franklin Templeton
      • AdviceWorks
      • NatWest Markets
      • Bridgestone
      • United Parcel Service
  • What we do
      Experience
      • Digital Workplace Services
      • Product Enhancement
      Insights
      • AI & Automation
      • Data Analytics
      Innovate
      • Blockchain
      • Software Engineering Services
      • Internet of Things (IoT)
      Accelerate
      • Cloud - Bacancy Combalt
      • Digital Process Automation
      • Open Source
      • Microsoft Dynamics
      • Salesforce
      • Service Experience Transformation
      Assure
      • Testing
      • Resource Augmentation
      Embedded & Hardware
      • Product Engineering
      • Analog Design Services
      • FPGA Engineering Service
      • Wireless Design
      • Embedded Software Design
      • Hardware Engineering
      • Power Engineering
      • IoT Hardware
      • AL/ML
  • who we work with
      Industries
      • Banking Financial services & Insurance
      • Startups
      • Oil & Gas
      • Healthcare Life Science
      • Real Estate & Construction
      • Logistics
  • About Us
      About Company
      • About Us
      • Leadership Team
      • Awards & Recognition
      • Infrastructure
      • Our Locations
      • Partnership
      Culture
      • Agile Mindset
      • Bacancy Values
      • Bacancy Culture
  • Technology
      Front End
      • Angular
      • Reactjs
      • Vue.js
      • UI/UX
      Platforms
      • MS Dynamics
      • Salesforce
      Back End
      • Ruby on Rails
      • Node.js
      • Golang
      • Laravel
      • .NET
      • Java
      • Python
      Mobile
      • React Native
      • Flutter
      • Android
      • iOS
      Cloud
      • AWS
      • DevOps
      QA
      • Automation Testing
      • Software Testing
      Embedded & Hardware
      • Embedded
      Explore All
  • Products
    • Battery Management System
    • Motor Controller
    • CCS2 Controller
    • AC Charger
    • DC Fast Charger
    • AC Charge Controller
    • Explore All
  • Careers
  • Work @ Bacancy
  • Blogs
  • Resources
  • Customer Reviews
  • Contact
  • Get Quote
insights on accessibility

How to Build an Accessible App With React (Why is It More Important Than Ever?)

Paridhi Wadhwani
Paridhi Wadhwani Lead Content Writer
Last Updated on October 11, 2021
February 24, 2020 8 min read

“Accessibility allows us to tap into everyone’s potential.”
– Debra Ruh

Debra Ruh is a Digital Accessibility Technologist, the founder of TecAccess and Ruh Global. These American companies build solutions for people with disabilities, like designing websites and online learning tools. I look-up to women like Debra, who passionately try to bring an impartial stage for everyone, and even I want to make websites that are accessible by all.

This blog is a tutorial for building an accessible website using React Js. I am going to share my knowledge that I have throughly learned. This way, more and more software developers will get to know about accessibility and how to make react-apps more accessible. So let me start with the nitty-gritty.

What is Web Accessibility?

Accessibility refers to enabling ease of computer usage for people with disability or impairment by using specialized hardware or software. It uses features like text-to-speech, closed-captioning, and keyboard-shortcuts.

The term a11y is a generic term for accessibility, which is a numeronym where 11 is the number of characters omitted between the first and last characters. Web development keeping in mind accessibility ensures the inclusion of the total population using the web.

Web Accessibility begins by inclusive design that considers every web user is equal. Say, for instance, someone who is visibly impaired and cannot use the mouse pointer or trackpad, should also have equal rights and access to your website. Hence, developers should see a11y as a mandate and not just a feature. It not only benefits people with disabilities but also for those who:

  • Use smartwatches, smart TVs, mobile phones, etc. with small display screens and different input modes
  • Have changing abilities with aging
  • Have temporary disabilities like a broken arm or lost glasses
  • Have situational limitations like bright sunlight or are in an environment where they cannot listen to audio
  • Have no internet connection or costly bandwidth usage.

Overall, accessible apps improve the website’s user experience UX by more intuitive interactions, high color-contrast, etc.

Standards and Guidelines for Web Accessibility

Here are a few guidelines developed by the W3C that govern how developers can achieve accessibility in building websites. These standards ensure that websites support screen readers, keyboard usability, and captions for images.

WCAG

The World Wide Web Consortium (W3C), in alliance with people and organizations around the globe, developed the Web Content Accessibility Guidelines, as a set of recommendations for making web content accessible for people with disabilities and all other user agents.

WAI-ARIA

W3C presented the Web Accessibility Initiative- Accessible Rich Internet Applications, which is a technical document that specifies how to improve the accessibility of webpages using Ajax, HTML, Javascript, and other related technologies like React.

Being a React enthusiast, I get annoyed when people raise myths like:

  • Is React Accessible?
  • How does the React handle the Accessibility Initiative?
  • React doesn’t support Accessibility
  • Developers should use accessible HTML instead of React
  • React makes the website inaccessible

So, I decided to write a react a11y tutorial to make your lives easier. Accessible React components, react ARIA live, react-router accessibility, and more are used to build Accessible react applications. But in this post, I am going to show you how you can make any react application accessible simply by using some standard HTML techniques.

How to improve Web Accessibility using ReactJS

Below are depicted 08 HTML practices that help in building accessible React applications:

#1 Casing and Reserved Words

Following semantic HTML is ideal for React web applications, and HTML obeys proper casing of characters. Developers should follow camel-casing for writing HTML attributes. For example,

tabindex needs to become tabIndex
maxlength turns to maxLength 

Nonetheless, all the data-* and aria-* attributes should be hyphen cased (kebab-cased) in plain HTML such as,

aria-label={labelText}
aria-required=”true”

For some reserved words like ‘for’ and ‘class’ we change them like this,

for (a reserved work in Javascript) must be written as: htmlFor
Class (another reserved word of Javascript) becomes className

#2 Set page titles

The first thing the screen readers announce is the page title, and hence setting the title of your page is an essential step of making your application accessible. Now, as all React apps are SPAs (single page apps), the title element will display the same content throughout the browser session, which is not fair.

To overcome this issue, developers can dynamically change the global document. title property every time the page loads by implementing react’s lifecycle method- componentDidMount(). Screen readers can update the contents on the user’s browser tab and announce precisely where the user is on your application. Implementing this step also benefits your website because it is excellent for Search Engine Optimization.

You can set the page title of your website like this:

componentDidMount() {

 document.title = “Updated page title is this”;

}

Alternatively, there is a plugin react-helmet that developers can use that primarily handles head tags per page or component.

#3 Use Semantic HTML

To ensure each of your HTML block code is accessible by screen readers, you must write clear and understandable code. We generally make mistakes with buttons. Instead of creating tags, we create

tags, which is not ideally correct. Though it may bring the same outputs, screen readers will not identify the later one as a button.

#4 Mandate alt text and labels

As per the WCAG 2.0 all the non-text content presented to the user has a text alternative that serves a similar purpose.

Text is the most optimal content form, so make sure that you add alt text for all the image tags and for user interfaces, you can use the labels to describe the tags and their purpose.

< img src=”cat.png” alt=”An image of a big white cat.” / >
< div role="navigation" aria-label="First list" >
 < ul >
   < li >List of states< /li >
 < /ul >
< /div >
< div role="navigation" aria-label="Second list" >
 < ul >
  < li >List of cities< /li >
 < /ul >
< /div >

#5 Use headers correctly

You should program Assistive technology used in screen readers in an orderly fashion. Hence, even we should use HTML tags like headers h1-h5 appropriately. We cannot use randomly any header tag just because its font size matches our content need. It has to obey the hierarchy.

< h1 > Main Header < /h1 >
< h2 > Main Sub Header < /h2 >
< h3 > Sub Sub Header < /h3 >

#6 Handle live announcements

How does a visually challenged user get to know when you update some data on your webpage? For example, your webpage fetches some external data from an API, how does the screen reader get to know about it?

Live announcements handle this. Let us go through an example to understand it better,

import React from "react";
class Announcements extends React.Component {
 render () {
   return (
       < div aria-live="polite" aria-atomic="true"
         className="visuallyhidden" >
         {this.props.message}
       < /div >
   );
 }
};
export default Announcements;

We have created a live announcement here. Now, the screen readers will read the text out loud for your users depending on the choice accessibility attributes aria-live and aria-atomic. Then, we need to create a state property in the parent component.

this.state({
 message: null;
});

Next, you set the message for the users.

this.setState({
 message: “New Message for you!”
});

Finally, we have to include the announcement in the parent component like this,

< Announcements message={this.state.message} / > 

#7 Use Fragments

Fragments in React, allow grouping child elements together without creating additional DOM nodes. We all know that programmers should wrap every react element within an HTML element for its correct rendering. And most developers, including me, encase all elements within div tags. Such excessive and unthought use of div tags turns out to be non-semantic HTML. Reminding once again- Semantic HTML is a must for accessibility.

Here, fragments make screen readers’ work easy. For example, this structure turns out to be non-semantic HTML,

< ul >
< div >
   < li >1. Item One < /li >
   < li >2. Item Two < /li >
 < /div >
< /ul >

Instead, you should write fragments like this:

< React.Fragment >
   < li >1. Item One < /li >
   < li >2. Item Two < /li >
< /React.Fragment >

Or else, merely writing the fragment wrapped in empty angular brackets also makes semantic HTML output for screen readers.

< >
   < li >1. Item One < /li >
   < li >2. Item Two < /li >
< / >

#8 Keyboard focus

The keyboard focus is of prime importance when implying accessibility. Also, it is of crucial precision and hence judiciously-used. When users are not able to use the standard input mechanisms, they find it challenging to get through your website. It is thus, essential to handle the most crucial input-keyboard focus.

React introduced a ref function for keyboard focus handling. It can be used as shown in the below example:

< div ref={(contentHolder) => { this.contentHolder = contentHolder; }} tabIndex="-1" aria-labelledby="pageHeading" >

Create a ref function called contentHolder on the outermost parent div. The tabIndex=-1 will allow non-focusable div to receive keyboard focus via ref

Now that we have created the ref, let’s use it along with the lifecycle method to shift the keyboard focus on page load:

componentDidMount() {
    this.contentHolder.focus();
}

This way you may handle keyboard focus.

Apart from these HTML techniques, you can also use the vast React community support and make your apps available for everyone.

Accessibility Testing and Development Tools

The React ecosystem is vast and constantly expanding. It avails many ready tools for developers. Some of the useful tools for attaining accessibility in your web app are:

  • eslint-plugin-jsx-a11y
  • This library is a linter plugin to check your code for accessibility since you start developing your website. It includes 33 testable rules that help you attain accessibility covering alt-text, and label-has-for.

  • react-a11y
  • This one is analogous to the above plugin (eslint), but it is for run-time analysis. Developers can require this module in the main application, and it will throw warnings in the console on application-rendering.

  • react-aria-modal
  • The React team recommends this modal library, which complies with the web accessibility standards. It checks if your website is accessible to screen readers and also handles keyboard focus, key mapping, and ARIA roles to ensure the same.

  • Web AIM Colour Contrast Checker
  • This tool analyzes the two colors you choose for your website and gives you a contrast ratio to meet the accessibility guidelines.

  • WAVE Browser Extensions
  • The WebAIM developed the WAVE (browser extension for firefox and chrome) in the form of community service. By using this extension, your data does not reach the server, and you can locally check any web-page for accessibility.

  • Lighthouse
  • Google came with Lighthouse, which is an automated tool for improving the quality of web-pages by auditing their performance, accessibility, SEO, progressive web apps (PWA). You can use it with Chrome Dev Tools, command line, or as a Node module.

    Upshot

    I hope this post has opened up insights on accessibility and how to attain it with React. If you have other ways to achieve accessibility, do share your suggestions in the comments section below.

    If you are looking for assistance to implement Web and Mobile Accessibility Solution for ADA, WCAG 2.1 & Section 508 Compliance, then Hire ReactJS Developer from us to create more accessible, interactive and discriminating web solution. We have certified Web Accessibility Specialist who can help you build a phenomenal website in accordance to meet your compliance goal.


Expand Your Digital Horizons With Us.

Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.


Or
E-mail us : [email protected]

Your Success Is Guaranteed !

Related Articles

react state management
Paridhi Wadhwani

February 17, 2023

React JS

Everything About React State Management

By : Paridhi Wadhwani

Highlights 🟠 React State Management enables entrepreneurs to build an enterprise app that is scalable, maintainable, and performant. 🟠 There are different ways to effectively...

12 Minute Read
Read More
React Storefront
Paridhi Wadhwani

January 6, 2023

React JS

Leverage React Storefront to Empower your Ailing eCommerce Business

By : Paridhi Wadhwani

Quick Summary: Although digital businesses exist earlier, the pandemic forced maximum mortar-and-brick businesses to go digital and adopt advanced eCommerce platforms and backend systems, thereby...

12 Minute Read
Read More
React Performance
Paridhi Wadhwani

December 7, 2022

React JS

Top 11 React Performance Optimization Techniques in 2023

By : Paridhi Wadhwani

Quick Summary: Developers and product owners are often scared of the performance issues when dealing with a React Js application. This unpopular belief has kept...

10 Minute Read
Read More
india India (HQ)

Corporate House
15-16, Times Corporate Park, Thaltej, Ahmedabad, Gujarat 380059

USA USA

601 Brickell Key Drive, Suite 700, Miami, Florida, 33131, USA

canada Canada

71 Dawes Road, Brampton, On L6X 5N9, Toronto

australia-flag Australia

351A Hampstead Rd, Northfield SA 5085

UAE UAE

1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

sweden Sweden

Junkergatan 4, 126 53 Hagersten


Great Place to Work
Get in Touch
call-yellow-icon

Contact Number

+1 347 441 4161

gmail-icon

Email Us

[email protected]


  • Bacancy Behance
  • Bacancy Uplabs
  • Bacancy Pinterest
  • Brochure
  • Quality Assurance
  • Resources
  • Tutorials
  • Customer Reviews
  • Privacy Policy
  • FAQs
  • Contact Us
  • Sitemap
  • Employee
bacancy google review 4.6
bacancy google review
bacancy glassdoor review 4.5
bacancy glassdoor review
bacancy clutch review 4.8
bacancy clutch review
bacancy goodfirms review 4.5
bacancy goodfirms review
X

Get Our Newsletter

Be The First To Get The Latest Updates And Tutorials.

Request A Free Consultation

Before You Go...

Try our free consultation to visualize the best outcome of your business ideas.

INSTANT 30 MIN FREE CONSULTATION CALL