We use cookies to enhance your experience on the site

What Is Web Accessibility (a11y)?

Imagine you are building a temple in Ancient Egypt. Would you want only a select group of people to visit it, or rather everyone - from the pharaoh to an ordinary fisherman? Web accessibility (accessibility, abbreviated as a11y) is the idea that every user - regardless of their abilities - should have equal access to content on the internet.

Why Is Accessibility Important?

Approximately 15% of the world's population lives with some form of disability. That is over a billion people! These can include:

Blind or visually impaired - they use screen readers
Deaf or hard of hearing - they need captions for multimedia
With limited motor skills - they navigate with keyboard, not mouse
With cognitive difficulties - they need simple, readable design
With temporary limitations - a broken arm, bright sunlight on the screen

Accessibility is not just an ethical obligation - it is also a legal requirement in many countries (e.g., the European Accessibility Act in the EU).

WCAG 2.1 - Accessibility Standards

WCAG (Web Content Accessibility Guidelines) is an international standard created by W3C. It is based on four pillars that can be remembered by the acronym POUR:

1. Perceivable

Content must be presented in a way that is accessible to the user's senses.

1<!-- BAD - no alt text -->
2<img src="pyramid.jpg">
3
4<!-- GOOD - description for screen readers -->
5<img src="pyramid.jpg" alt="The Great Pyramid of Giza at sunset">

2. Operable

The interface must be operable through various navigation methods.

1<!-- Button accessible via keyboard -->
2<button onclick="openMenu()">Open menu</button>
3
4<!-- Link with visible focus -->
5<a href="/contact" class="nav-link">Contact</a>

3. Understandable

Content and interface must be understandable for users.

1<!-- Specifying page language -->
2<html lang="en">
3
4<!-- Readable form labels -->
5<label for="email">Email address:</label>
6<input type="email" id="email" name="email">

4. Robust

Content must be compatible with various assistive technologies.

1<!-- Correct HTML structure -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <title>Egyptian Museum</title>
7</head>
8<body>
9    <header>
10        <nav>...</nav>
11    </header>
12    <main>...</main>
13    <footer>...</footer>
14</body>
15</html>

WCAG Conformance Levels

WCAG defines three conformance levels:

Level A - Minimum requirements (e.g., alt text for images)
Level AA - Recommended standard (e.g., color contrast 4.5:1)
Level AAA - Highest standard (e.g., contrast 7:1)

Most legal regulations require AA level.

First Steps in Accessibility

The most important rules to start with:

Use semantic HTML -
```
<nav>
```
,
```
<main>
```
,
```
<article>
```
instead of just
```
<div>
```
Add alt text - the
```
alt
```
attribute for images
Ensure color contrast - text must be readable
Ensure keyboard navigation - everything must be accessible from the keyboard
Use form labels -
```
<label>
```
associated with
```
<input>
```

Just as the ancient Egyptians designed temples accessible to all pilgrims, so should we create pages accessible to all internet users.

Go to CodeWorlds→