While our society and our capabilities to do things are increasing, we cannot overlook people’s needs to achieve the things we can easily accomplish. As humans, we all deserve to live equally, and I mean this in every possible way. We have begun redesigning everything, from public transportation and sidewalks to books and gaming consoles. As developers, it’s our role to redesign software for everyone.

According to the World Health Organization (WHO), over 1 billion people worldwide live with some form of disability, emphasizing the global importance of web accessibility. Many countries, including the United States, with the Americans with Disabilities Act (ADA), have legal requirements for web accessibility. Non-compliance can lead to lawsuits and fines, highlighting the critical need for accessible web design.

Web development has always been a fast-paced area. New libraries and frameworks are released nearly every day. We, as developers, try to catch up with this fast-paced train and learn as many technologies as possible. However, sometimes we can miss some basic but important things while chasing the latest remarkable technologies.

Today, I will share the experiences I gained while implementing accessibility for the PrimeReact libraries’ components.

What is Web Accessibility, Actually?

Web accessibility ensures that people who use the internet can do so easily. When thinking about accessibility and disabled people, we often tend to focus on blind or deaf individuals. This includes individuals with cognitive or physical disabilities or limitations. However, it’s essential to consider every person who suffers from any disorder, disease, or disability when designing websites and software.

“Accessible design is good design — it benefits people who don’t have disabilities as well as people who do. Accessibility is all about removing barriers and providing the benefits of technology for everyone.”
— Steve Ballmer

The Guidelines for Web Accessibility

We have the Web Content Accessibility Guidelines (WCAG) crafted by experts to ensure that the web is more accessible for everyone to use.

The guideline states that web content should be perceivable, operable, understandable, robust, and compliant. This includes selecting text alternatives, enabling keyboard accessibility, ensuring content clarity and language comprehension, guaranteeing compatibility across different devices, and facilitating usability with screen readers.

Achieving Accessible Websites

There are some key aspects I encountered while working on accessibility. I’ll share a few details about these accessibility enhancements.

You can also explore accessibility guidelines and tutorials for the elements you create on W3.org.

Alternative Text for Images

First and foremost, providing descriptive texts about the content or purpose to screen readers is the easiest thing we can do.

<img src="sakura.png" alt="Chinese temple in the middle of a pond surrounded by sakura trees" />

Semantic HTML

Semantic HTML plays a critical role in ensuring your website is accessible to screen readers. We commonly fall back on using the <div> element for all purposes, but that approach is incorrect. Accessibility guidelines advocate for the utilization of Semantic HTML elements. For instance, we should use the <nav> element when creating a navigation bar. Similarly, when sharing our journey on a blog page, we should use <h1> for headings and <p> for paragraphs.

<nav>
  <ul>
    <li><a href="…">Home</a></li>
    <li><a href="…">Shop</a></li>
    <li><a href="…">Space Bears</a></li>
  </ul>
</nav>

Keyboard Navigation

Keyboard navigation is one of the essentials of accessibility. It enables not only individuals with various disabilities but also those who prefer using keyboards exclusively to navigate through your website and accomplish their tasks.

Specify the tab order of interactive elements using the tabindex attribute. This ensures that keyboard users can navigate through elements in a logical order.

<label>First in tab order:<input type="text" /></label>

<div tabindex="0">Tabbable due to tabindex.</div>

Forms

When designing forms, it’s essential to utilize semantic HTML elements as much as possible. In addition to technical aspects, users generally prefer simple and concise forms. Only request information that is necessary to complete the transaction or process.

<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">

Focus Visible

This feature helps anyone who relies on the keyboard to operate the page by allowing them to visually determine the component on which keyboard operations will interact at any point in time.

a:focus, button:focus, input:focus {
    outline: 2px solid #06b6d4;
}

Bypass Blocks

This feature enables users to skip repetitive navigation menus and go directly to the main content, thereby improving their navigation experience. It’s common for web pages and applications to include content that may be duplicated on other pages or screens.

<a href="#main" class="invisible-skip-link">Skip to Content</a>

ARIA

Accessible Rich Internet Applications (ARIA) and roles play crucial roles in ensuring that web content is understandable for all users, including those with disabilities. ARIA provides a set of attributes that developers can use to enhance the accessibility of dynamic content and interactive elements. These attributes help screen readers understand the purpose and behavior of the component.

Roles define the function of elements within a web page, such as buttons, links, menus, and landmarks like headers and navigation sections.

We should prefer using the correct semantic HTML element over using ARIA if such an element exists. For instance, native elements have built-in keyboard accessibility, roles, and states.

First rule of ARIA: If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state, or property to make it accessible, then do so.

<!-- Custom Progressbar With ARIA -->
<div
  id="percent-loaded"
  role="progressbar"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100">
</div>

<!-- Native Progressbar -->

<progress id="percent-loaded" value="75" max="100">75 %</progress>

Colors

Colorblind individuals have difficulty differentiating certain colors, which can make it hard for them to understand content and designs. To help them, we should also use icons, patterns, or words to make things clear. Additionally, ensuring that the colors are very different from each other can help colorblind people read the content better.