---
title: Web Accessibility
author: Patrick Dwyer
description: This article covers the importance of web accessibility and provides practical guidelines for improving the user experience.
published: 2025-2-12
---

# Web Accessibility

Web accessibility is the practice of making websites usable for people with disabilities; including visual, auditory, motor, and cognitive. By following best practices, we can ensure that websites and web applications are accessible to a broader audience.

## Key Principles of Web Accessibility

- **Perceivable**: Information must be presented in ways that is comprehensible to a user. ie, providing text alternatives for images.

- **Operable**: Interface elements must be operable by all users, such as using a keyboard or other assistive devices.

- **Understandable**: Content and user interface must be understandable. For example, providing clear instructions and error messages.

- **Robust**: Content must be robust enough to work across various devices, including assistive technologies.

### Adding Alternative Text to Images

The`alt` attribute is used for screen readers so they can describe the image to users who are blind.

```html
<img src="logo.png" alt="Company logo, showing a modern design with blue and white colors">
```

### Accessible Forms with ARIA Labels

`aria-lableledby` can be used to associate a form field with its label allowing a user to navigate the form without needing to see it.

```html
<form>
  <div class="mb-3">
    <label for="firstName" id="firstName-label">First Name:</label>
    <input type="text" id="firstName" name="firstName" aria-labelledby="firstName-label" placeholder="Enter your first name" required>
  </div>
  
  <div class="mb-3">
    <label for="email" id="email-label">Email:</label>
    <input type="email" id="email" name="email" aria-labelledby="email-label" placeholder="Enter your email" required>
  </div>
  
  <button type="submit">Submit</button>
</form>
```

### Skip link for main content

Adding a `skip to main content` link helps users avoid lengthy descriptions of linkes on a websites navbar

```html
<a href="#main-content" class="skip-link">Skip to main content</a>

<header>
  <!-- Navbar stuff can be skiped -->
</header>

<main id="main-content">
  <!-- Goes right to main content without the screen reader going through every link -->
</main>

```

### Defined structure

Using `header`, `main`, `section`, and `footer` tags can allow a user to easily navigate between different sections using these landmarks.

```html
<header>
  <h1>Welcome</h1>
  <nav>
  </nav>
</header>

<main>
  <section>
    <h2>An important title</h2>
  </section>
</main>

<footer>
  <p>&copy; 2025 Patrick Dwyer</p>
</footer>

```

### Form Validation

`aria-live` can be used to tell screen readers to announce errors as soon as they happen so the user know there is a form validation issue as it happens.

```html
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <span id="emailError" role="alert" aria-live="assertive" class="error-message"></span>
  
  <button type="submit">Submit</button>
</form>

```

### Accessiblity with aria label

`aria-label` is used for descritions of things like buttons and describes what action it performs.

```html
<button aria-label="Close" role="button">X</button>

<nav role="navigation">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

```

### Video subtitles and descriptions

`aria-describedby` gives a description of a video while the `<track>` elements provide the subtitles.

```html
<video controls aria-describedby="video-description">
  <source src="video.mp4" type="video/mp4">
  <p id="video-description">This is a sample video with accessible captions.</p>
</video>

<!-- Add closed captioning (CC) or subtitles -->
<track src="video-subtitles-en.vtt" kind="subtitles" srclang="en" label="English">

```

## Conclusion

Ensuring web accessibility is a needed step in making websites useable for everyone. Following simple guidelines like providing alternative text, creating accessible forms, and leveraging ARIA roles, can improve the experience for the end user. Be sure to test your website for accessibility, using tools like screen readers or accessibility checkers, to ensure you're meeting the needs of all users.

### Sources

[WCAG Guides](https://www.levelaccess.com/guides/?_gl=1*1e0mu6m*_up*MQ..*_gs*MQ..&gclid=EAIaIQobChMItY36-bHNiwMVP0n_AR3s8ilFEAAYASAAEgK62PD_BwE)

[WCAG Laws and Standards](https://www.levelaccess.com/compliance-overview/?_gl=1*1e0mu6m*_up*MQ..*_gs*MQ..&gclid=EAIaIQobChMItY36-bHNiwMVP0n_AR3s8ilFEAAYASAAEgK62PD_BwE)

## Tools

Here are a few tools to get started

## Screen Reader

JAWS (Job Access With Speech)
JAWS is one of the most popular screen readers for Windows, providing a speech output for blind and visually impaired users. It’s a comprehensive tool that supports web browsing, document reading, and more.

[Website:](https://www.freedomscientific.com/Products/Blindness/JAWS)

## Accessibility Checker

WAVE (Web Accessibility Evaluation Tool)
WAVE is a powerful web accessibility evaluation tool that helps users identify accessibility issues on web pages. It offers both an online tool and a browser extension to check for common accessibility errors.

[Website:](https://wave.webaim.org/)