---
title: "Web Accessibility"
author: "Sarah Olson"
description: "Explaining web accessibility, it's importance, and how to implement it"
published: "2026-2-26"
---

<br>
Web accessibility is when a website implements a feature that makes it easier for people with disabilities to use their website. These features provide a way for people who wouldn't be able to access the website without outside assistance (ie, those who can't see, or can't move a mouse) to be able to use those websites on their own.
<br>
<br>

# Ways to Make a Webpage Accessible
<br>

- Using the proper HTML elements, so that the assistive tools can understand the page's structure (ie, nav for navgation, button for buttons)
- Properly using the alt attribute in img elements so that the tools can read what the image is supposed to be
- Making sure that all the interactive parts of the page can be accessed by the keyboard alone
- Including ARIA attributes when necessary
<br>
<br>

# ARIA Attributes
<br>

ARIA attributes are HTML attributes that enhance web accessibility for assistive technologies by defining roles, states, and properties.
<br>
<br>

# Types of ARIA Attributes
<br>

1. aria-label: this provides a specific name when there is no visible text label
```html
<button aria-label="toggle dark mode">
  ◐
</button>
```
<br>

2. aria-required: this indicates if form field is required
```html
<label>Email:</label>
<input type="text" name="email" aria-required="true">
```
<br>

3. aria-hidden: this hides content from assistive technologies
```html
<li><a href="/">
    <span aria-hidden="true">🏠︎</span>
    Home
</a></li>
```
<br>

4. aria-expanded: this indicates whether collapsible content is expanded or collapsed
```html
<button class="menu-toggle" id="menu-toggle" aria-expanded="false">
    ☰
</button>
```
<br>

5. aria-labelledby: identifies the element(s) that labels the element it is applied to
```html
<span id="productName">Laptop</span>
<span id="productPrice">$1000</span>

<button aria-labelledby="productName productPrice">
  Buy Now
</button>
```
<br>
<br>

## Sources
<br>

- [Web Accessibility Initiative - Introduction to Web Accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/)
- [MDN - ARIA States and Properties](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes)
- [WebAIM - Into to Web Accessibility](https://webaim.org/intro/)

<br>