nahuel.luca()

Learning about Accessibility

What will we talk about?

We will discuss the meaning of Accessibility when creating applications, why it is so important and how to make our websites more accessible. In this case we will focus on web development using React and the React Aria library.

The importance of accessibility

On the W3C website I read something that I find very interesting called The Power of the Web.

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.

The power of the web, this is a great concept, internet democratized access to opportunities and access to knowledge. So many people that before could not access a book or any other type of material to learn can now do it with less than 10 clicks, THIS IS AMAZING!

As software developers, we need to create more accessible interfaces for everyone, regardless of hardware, software, language, location or ability. That is our challenge

What is Accessibility?

Accessibility when developing our applications is the practice to create useful applications for everyone regardless of the circumstances in which the user finds himself, bad internet connection, visual impairment, etc.

📌 Accessibility (often abbreviated to A11y — as in, "a", then 11 characters, and then "y") in web development means enabling as many people as possible to use websites, even when those people's abilities are limited in some way.

Also accessibility have benefits for everyone, for example if improves accessibility, also improves SEO, making your site more findable or get more users because or application is accessible for anyone.

Cases we can consider

Exist different cases to abording when we create our applications these are some of them:

  • People with visual impairments: People with visual impairments include people with blindness, low-level vision, and color blindness.
  • People with hearing impairments: people have various levels of hearing loss ranging from mild to profound.
  • People with mobility impairments: These people have disabilities concerning movement, which might involve purely physical issues (such as loss of limb or paralysis), or neurological/genetic disorders that lead to weakness or loss of control in limbs.
  • People with cognitive impairments: Cognitive impairment refers to a broad range of disabilities, from people with intellectual disabilities who have the most-limited capabilities, to all of us as we age and have difficulty thinking and remembering.

How to improve the accessibility of our websites?

We can use different practices or techniques to improve the Accessibility, in this blog we will discuss some of them

HTML and Accessibility

Using semantic HTML and the right tags is a total improvement for our website, but why? Semantic HTML is sometimes lighter than non-semantic HTML, and semantic HTML improves the SEO of our website. But it also gives the user the possibility to use only the keyboard, which can help, for example, users with mobility impairments. See the following example:

With a little CSS and JS you can turn the div tag into something like a button but you loss the complete behave of button tag.

<div>Play video</div>

Using de correct tag button the users can navigate between buttons using the Tab key and activate their selection using Space, Return or Enter.

<button>Play video</button>

CS and JS for accessibility

As we said above with CSS and JS you change tags to do something that maybe that tag should not do, so it is very important to use the right tags for the right job without modifying their behavior with CSS or JS. Also with CSS yo can control the text size for make more accessible or control de focus of element.

WAI-ARIA

Over time websites have become more complex and dynamic making UI controls have non- semantic HTML and with dynamic javascript it is difficult to address the problem, WAI-ARIA is a technology that can help with these problems by adding additional semantics that browsers and assistive technologies can recognize and use to let users know what is going on.

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a technical specification developed by the World Wide Web Consortium (W3C) that defines how to make web content and web applications more accessible to people with disabilities. Here is a more detailed description of WAI-ARIA:

Key components:

  • Roles: define the function of a user interface element (e.g., button, navigation bar, etc.). Examples of roles include button, alert, checkbox, etc.
  • Properties: Provide additional information about elements, such as whether they are disabled or selected. Examples include aria-disabled, aria-checked, aria-expanded, etc.
  • States: Indicate the dynamic state of an element. For example, aria-hidden can be used to hide elements from assistive technologies.

Accessibility on mobile devices

To make a website accessible and usable on mobile, you just need to follow general good web design and accessibility best practices.

There are some exceptions that need special consideration for mobile; the main ones are:

  • Control mechanisms — Make sure interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/keyboard).
  • User input — Make user input requirements as painless as possible on mobile (e.g., in forms, keep typing to a minimum).
  • Responsive design — Make sure layouts work on mobile, conserve image download sizes, and think about the provision of images for high-resolution screens.

React ARIA

What is React Aria's role in this post? Well as a frontend developer I use one of the most popular libraries for creating user interfaces which is React, so we will see how React Aria can help us to create more accessible websites.

✏️ Unfortunately, many companies and teams don't have the resources or time to prioritize features like accessibility, internationalization, full keyboard navigation, touch interactions, and more. This leads to many web apps having sub-par accessibility and interactions, and contributes to the perception of the web as an inferior app platform compared to native apps.

React Aria provides Components and Hooks for the creation of our user interface, giving us the possibility to style these components without losing behavior, accessibility and internationalization.

React Aria makes it easy for us to address aspects of visual and motor disabilities through the screen reader and keyboard navigation support. This will allow us to have more accessible websites and also allow users to be more productive.

How use React Aria?

It simple, in your React project with tailwindCSS install React Aria and tailwindcss-react-aria-components plugin

bun i react-aria-components tailwindcss-react-aria-components

After that you are ready to start creating your accessible components. You can see examples on the React Aria examples page.

The End

In this super summarized post I try to explain a little bit what accessibility is and show a tool that can help us. I hope it has been helpful.

Resources