Enhancing Accessibility 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. React accessibility shares the same principles as web accessibility, but its implementation has some unique considerations.

● What makes a web application accessible.

● How and why to use semantic HTML.

● How to use media queries in React components.

Did you know that about 15% of people worldwide have a disability? This includes:

● 6-10% of people over 15 who have trouble seeing or hearing

● Over 20% of people over 65 who have trouble seeing or hearing

● 8% of people over 65 who struggle to use a computer mouse

Making websites accessible is not only the right thing to do, but it’s also becoming a legal requirement. Many countries, including the US, Canada, and the EU, already require public sector websites to meet accessibility standards. Soon, private sector websites will also be required to follow these standards.

The techniques you’ll use in daily life for making web applications accessible are just good practices, and they make your application better and easier to use for all users, not just those with disabilities.

● Use valid HTML.

● Make sure all images have alt attributes.

● Add alternative content for all audio and video content.

● Form elements should be properly labeled.

● The application should be usable by people with color blindness

JSX supports all the ARIA attributes. Unlike most other attributes that you write in JSX, ARIA attrib- utes with multiple words, such as aria-label, are written the same as in HTML, using a hyphen between words rather than camelCase.

For example, the following JSX code tells a screen reader that an input is required and specifies the control’s label:

<input

 type=”text” aria-label={labelText} aria-required=”true” onChange={onchangeHandler} value={inputValue} name=”name”

/>

Semantic HTML refers to using HTML elements that indicate the purpose, or role, of an element in the document. For example, a page’s navigation should be written using the nav element, and the address element should be used to mark up contact information.

When you use semantic HTML elements, the ARIA role of the element is implied, meaning there’s no need to explicitly define the ARIA role attribute. Writing semantic and valid HTML is the most important thing you can do to make a page or application usable by assistive technologies.

Because each React component must return a single element, there’s a tendency when writing React to wrap the return value of a component in an unnecessary div element, such as in the component

function ListItem({ item }) {

        return (

         <div>

            <dt>{item.term}</dt>

            <dd>{item.description}</dd>

</div> );

}

These unnecessary elements can confuse screen readers, especially when they’re used inside lists. For example, the component below makes use of the List Item component to generate a definition list.

function Glossary(props) {

        return (

         <dl>

            {props.items.map(item => (

             <ListItem item={item} key={item.id} />

            ))}

</dl> );

}

The given HTML code puts <div> elements around each term and its description. This is not the right way to create a definition list in HTML. Instead, we should use <dl>, <dt>, and <dd> elements to make a proper definition list. This makes the content more accessible and easier to read.

The solution to this problem is to use React.Fragment (or its shorthand element) to group elements in cases where there shouldn’t be a resulting HTML element from the necessary JSX grouping.

function ListItem({ item }) {

        return (

         <>

            <dt>{item.term}</dt>

            <dd>{item.description}</dd>

</> );

}

Form inputs need to have labels that are readable by screen readers and that are specifically associated with the inputs. It’s not enough, for example, to have a label that visually appears above or next to an input, like this:

<form>

 first name: <input type=”text” />

</form>

To make a form accessible for users with disabilities, it’s important to include labels for each input field. You can do this using the label element or the aria-label attribute. The label element works the same way in JSX as it does in HTML, except that the for attribute should be written as htmlFor in JSX. These labels help users with disabilities understand what each input field is for.

The value of htmlFor should be the value of the id attribute in the associated form control.Below shows an accessible form written in JSX.

<form onSubmit={handleSubmit}>

       <label htmlFor=”firstName”>First Name</label>

       <input id=”firstName” type=”text” />

      <label htmlFor=”lastName”>Last Name</label>

       <input id=”lastName” type=”text” />

      <label htmlfor=”emailAddress”>Email Address</label>

       <input id=”emailAddress” type=”email” />

      <button type=”submit”>Submit</button>

     </form>

An accessible form clearly identifies each input field using the label element or the aria-label attribute. The label element in JSX works like the HTML label element, but the for attribute is written as htmlFor. This helps users who use screen readers or other assistive technology understand what each input field is for.

Skip Links

Users who navigate using the keyboard or voice commands typically must move from one interactive element on the page to the next using the Tab key. For applications with a large number of navigation elements at the top of the page, this can mean that the user must tab through each element to get to the main body of the page. To help keyboard or screen reader users to navigate to the part of the page they want to use, you can implement a “Skip Navigation” link.

import React from ‘react’;

     import SkipNav from ‘react-skip-nav’;

     import “react-skip-nav/lib/style.css”;

     const MyComponent = (props) => {

        return (

<> <SkipNav

              id=’main-content

             text=’skip to main content’

             targetDomId=’main-content’

          />

           <Header/>

            <div id=”main-content”>

             <MainContent />

            </div>

</> )

     }

      export default MyComponent;

When the browser’s focus is taken away from the normal flow of a page and then returned to it (such as what happens when a modal dialog is opened and closed), even users with a mouse must manually return the focus to the form field or interactive element they were using prior to the opening of the modal dialog. Without proper focus management, users of keyboard navigation or screen readers must start again at the top of the page and move through each element until they get to the spot where they were when focus moved to the model.

     import ReactDOM from ‘react-dom’;

      import {useState,useRef,useEffect} from ‘react’;

      import ‘./styles.css’;

     function Modal(props){

       return (

        <>

        {props.isOpen &&

        ReactDOM.createPortal((

          <div className=”modalOverlay”>

            <div className=”modalContainer”>

              <div className=”modalContent”>

               {props.children}

              </div>

          </div>

          </div>)

       ,document.getElementById(‘modal’))}

        </>

        )}

 function App() {

        const PasswordRef = useRef()

const[isModalOpen,setModalOpen] = useState(false);

 const toggleModal = () => {

          setModalOpen(()=>!isModalOpen);

}

       useEffect(() => {

          !isModalOpen && PasswordRef.current.focus()

}, [isModalOpen]);

return ( <>

         <div style={{padding:”60px”}}>

            <label>Choose a Password:<input ref={PasswordRef} /></label>

            <button onClick={toggleModal}>?</button>

<Modal title=”Password Requirements” isOpen={isModalOpen}>

 <p>Your password must contain at least 8 characters, an uppercase letter,the name of your pet, your birthday, your child’s birthday, the word “password” and several sequential numbers.</p>

             <button onClick={toggleModal}>close modal</button>

            </Modal>

</div>

</> );

     }

      export default App;

For more information & classes Call: 2048553004
Registration Link: Click Here!

Author: Rithik Singh

Software Development Trainer

IT Education Centre Placement & Training Institute

© Copyright 2024 | IT Education Centre.