What is web accessibility?

Go to HTML5

⏳ 8 min

The great forgotten within software development.

First of all, what exactly is this web accessibility thing? Basically, it consists of ensuring that your site and its tools are easy to use for everyone, including people with disabilities. This involves bringing together programming, design, and technology to create a Barrier-free Internet, where everyone can understand, learn, navigate, and fully interact with the web.

Get comfortable, because we’re going to take a look at how we can achieve this.

Basic Principles of Accessibility

Web accessibility is based on four key principles:

  1. Perception: Ensure that everyone can see and hear the content.
  2. Operation: The site should be easy to operate, whether using a mouse, keyboard, or any other device.
  3. Understanding: Information should be easy to comprehend.
  4. Robustness: Content should be robust and work well on different devices and browsers.

Semantic Tagging in HTML

Have you heard of semantic tags in HTML?

In my opinion, I believe this is the simplest part, yet often overlooked. Many times, we find web pages filled with "divs" instead of making use of semantic tags. These tags serve to tell the browser what type of content is in each section of your page. For example:

Using these tags makes your site easier to understand for both users and search engines (SEO).

Using HTML Attributes to Improve Accessibility

Now let’s talk about some HTML attributes that can make your site much more accessible. These attributes are like little helpers that enhance the experience for everyone, especially for people with disabilities. Let’s look at some of the most important ones and how you can use them.

Alt Attribute in Images

Including the alt attribute in images is truly important, I would say essential, as it provides alternative text for images, which is crucial for people using screen readers or when the image cannot be loaded.

Let’s see an example:

<img src="shoe-photo-x.jpg" alt="a discounted shoe model X" />

Imagining an e-commerce where you see an image of brand X sneakers with a 10% discount. When you click on the image, it takes you directly to the product so you can buy it instantly. Now, if we add the alt tag to that image, any user, including those with disabilities, will be able to access the product using the same shortcut. Not including this tag would be like “closing the door” to those users, which would be unfair discrimination and also a missed opportunity to have a potential customer.

Aria-label Attribute

The aria-label attribute is used to provide descriptive text to elements that lack visible content. For example, if you have an icon without descriptive text, you can use the aria-label attribute to provide a meaningful description of the icon’s function. This allows users who rely on screen readers or other assistive technologies to understand the function of the element.

Let’s see a practical example of using the aria-label attribute:

<button aria-label="Close window">
  <img src="close-icon.png" alt="Close" />
</button>

In this case, the close window button is composed of an icon, but for users relying on screen readers, an additional label is provided using aria-label to inform them that the button closes a window.

Aria-labelledby Attribute

Unlike the aria-label attribute, which directly provides a description to the element, this attribute points to other elements on the page that contain the necessary information.

It is mostly used in buttons, links, inputs, and other interactive elements that need a clear description for users of assistive technologies.

What better than an example to see it clearly:

<label id="username-label">Username:</label>
<input type="text" id="username" aria-labelledby="username-label" />

The aria-labelledby attribute associates the input field with the corresponding label, providing additional context to screen reader users. In this case, when the screen reader encounters the input, it will read “Username” due to the relationship between the aria-labelledby attribute and the id attribute.

Aria-describedby Attribute

Its function is similar to that of the aria-labelledby attribute, but in this case, aria-describedby is used to provide an “additional description” that is not considered crucial for understanding the purpose of the element.

Practical example…

<input type="text" id="email" aria-describedby="email-help" />
<span id="email-help">Enter your email address. We won't share your email with anyone.</span>

The aria-describedby attribute indicates that the additional description of the input is found in the span element with the value email-help in the id attribute.

Role Attribute

It defines a specific role for an element, helping screen readers understand its purpose. This is very useful because it tells screen readers and other technologies how to treat and present those elements so that users can better understand them.

There are plenty of different roles you can assign, and each has its own specific purpose. For example, some of the most common roles include button for buttons, link for links, navigation for navigation bars, and dialog for modal dialogs.

For example, we have a “div” tag that by itself wouldn’t provide any information, and within it, there are some navigation elements included…

<div role="navigation">...</div>

By adding the role=navigation attribute, we would be indicating to the screen reader that this “div” tag contains navigation elements.

Tabindex Attribute

Imagine you’re on a web page with lots of elements like buttons, links, and input fields. Typically, when you navigate through the page using the Tab key on your keyboard, you move from one element to another in the order they appear in the HTML code. But sometimes, you want to change that order and tell the browser to focus on a specific element first, like a “Login” button.

This is where the tabindex comes into play. This attribute allows you to specify the order in which elements are focused when navigating with the Tab key. You can assign numerical values to the tabindex, and elements with a lower value will be focused first followed by elements with higher values.

<button tabindex="2">Button A</button>
<button tabindex="1">Button B</button>

In this case, when navigating with the Tab key, the first button to be focused will be “Button B” since its tabindex attribute value is lower than that of the first button “Button A”.

Aria-hidden Attribute

Basically indicates whether an element is relevant to screen readers or not. You can apply it to elements that are visually useful but don’t contribute anything to the experience for someone using assistive technology, such as a screen reader.

<div aria-hidden="true">This content is hidden from screen readers.</div>

In this example, the “div” and all its content will be hidden from screen readers.

Aria-live Attribute

aria-live is an attribute you can add to an element in your HTML to tell screen readers to pay attention to changes happening in that element.

This attribute can take several values, depending on the importance of the changes being made:

  1. off: Basically tells the screen reader to ignore any changes in this element. It’s like saying “Nothing important is happening here”.
<button onclick="updateContent()">Update Content</button>
<div id="message-off" aria-live="off"></div>
  1. polite: You use this when you want changes to be announced, but not urgently. The screen reader will wait for an appropriate moment (like a natural pause in its flow) to announce the change. It’s like saying “When you have a moment, there’s something new”.
<button onclick="updateContent()">Add to Cart</button>
<div id="message-polite" aria-live="polite"></div>
  1. assertive: This is for changes that need to be announced immediately, interrupting whatever the screen reader is saying. It’s like saying “Listen up, everyone, this is important and you need to know it right now!“.
<button onclick="updateContent()">Show Error</button>
<div id="message-assertive" aria-live="assertive"></div>

Combining Attributes for Enhanced Accessibility

Now, let’s talk about how we can combine some of these attributes to make our website even more accessible. Imagine you’re building a dialog for your site and you want it to be accessible to everyone.

Let’s go with the example:

We want to develop a dialog for users to enter their email address, and obviously, we want to ensure that everyone, including visually impaired people using screen readers, can use this dialog smoothly.

<div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-description">
  <h1 id="dialog-title">Subscribe to Our Newsletter!</h1>
  <p id="dialog-description">
    Enter your email address to receive the latest news and updates.
  </p>
  <form>
    <label for="email">Email:</label>
    <input type="email" id="email" aria-describedby="email-error" required />
    <span id="email-error" aria-live="assertive" style="color: red;"
      >Please enter a valid email address.</span
    >
    <button type="submit">Subscribe</button>
  </form>
  <button aria-label="Close dialog">X</button>
</div>

As we can see, in this example we have used several of the attributes mentioned above to improve accessibility…

🙌 If you’ve made it this far… I hope this article has been helpful in understanding web accessibility, to truly appreciate its importance and the significant impact of providing accessible websites for everyone.

Happy coding 💻

👈 Go back