---
title: Web Accessibility
author: Jaydon Butzman
description: Web accessibility, ARIA attributes, and practices for making websites more friendly for people with disabilities.
published: 2025-02-09
---

# Web Accessibility

## 1. What is Web Accessibility and Why is it Important?
To break it down, web accessibility is focusing on making websites more user friendly for people with disabilities, such as hearing, visual and speech difficulties. Making sure your website is web accessible, ensures that everyone can understand and navigate it regardless of their disability. Making a website web accessible does not only help people with disabilities, it also helps people as we get older, or other that may have a temporary disability.
## 2. How to Make Web Pages Accessible
- **Use Semantic HTML**: Using proper HTML elements when creating a website, and using them for their intended purpose. For example, not using a button for a paragraph element, or vice versa.
- **Provide Text Alternatives**: Using labels for elements, the "alt" attribute for images, and also closed captioning for videos.
- **Ensure Keyboard Accessibility**: Ensuring that all things interactive are avalible on the keyboard.
- **Create Consistent Navigation**: Using consistant navigation throughout the website and on all of its pages.
- **Use ARIA Attributes**: Using ARIA attributes will also improve accessibility.

## 3. ARIA Attributes
ARIA (Accessible Rich Internet Applications) is a set of attributes that allow us to make web content more accessible for people with disabilities. They can be used to add additional information about HTML elements.

## 4. Resources for Further Reading
1. [ARIA Label | Aditus](https://www.aditus.io/aria/aria-label/)
2. [Fact Sheet: New Rule on the Accessibility of Web Content and Mobile Apps | ADA.gov](https://www.ada.gov/resources/2024-03-08-web-rule/)
3. [Introduction to Web Accessibility | Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/fundamentals/accessibility-intro/)
4. [ARIA - Accessibility | MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
5. [Accessibility Labels - W3Schools](https://www.w3schools.com/accessibility/accessibility_labels.php)



### Code Samples Demonstrating ARIA Attributes

Here are five examples of ARIA attributes with explanations:

```html
<!-- Example 1: Button with Tooltip -->
<button aria-label="Save" aria-describedby="tooltip-save">💾</button>
<div id="tooltip-save" role="tooltip">Save your changes</div>
<!-- The aria-label provides a a visual for the save botton -->

<!-- Example 2: Tabs -->
<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel1" id="tab1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel2" id="tab2">Tab 2</button>
</div>
<div role="tabpanel" id="panel1" aria-labelledby="tab1">Tab 1</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>Tab 2</div>
<!-- The aria-selected and aria-controls attributes manage the tab and links to their pages. -->

<!-- Example 3: Toggle Button -->
<button id="toggle-btn" aria-pressed="false" onclick="toggleButton()">Toggle</button>
<script>
  function toggleButton() {
    const btn = document.getElementById('toggle-btn');
    const isPressed = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', !isPressed);
  }
</script>
<!-- The aria-pressed attribute tells us if the button is pressed or not. -->

<!-- Example 4: Form with Required Fields -->
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" aria-required="true" aria-describedby="email-help">
  <span id="email-help">* Required field</span>
  <button type="submit">Submit</button>
</form>
<!-- The aria-required attribute indicates that the email field is required. -->

<!-- Example 5: Navigation Landmark -->
<nav role="navigation" aria-label="Main Navigation">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
<!-- The role="navigation" and aria-label attributes help visitors understand what is going on. -->