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:

1. Use semantic HTML - <nav>, <main>, <article> instead of just <div>
2. Add alt text - the alt attribute for images
3. Ensure color contrast - text must be readable
4. Ensure keyboard navigation - everything must be accessible from the keyboard
5. 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.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Introduction to accessibility</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>What is accessibility (a11y)?</h1>
11
12    <section>
13        <h2>Example 1: An image WITHOUT alternative text</h2>
14        <img src="https://placehold.co/300x200/d4af37/1a1a2e?text=Pyramid" >
15        <p class="bad">No alt attribute - the screen reader does not know what is in the image!</p>
16    </section>
17
18    <section>
19        <h2>Example 2: An image WITH alternative text</h2>
20        <img src="https://placehold.co/300x200/d4af37/1a1a2e?text=Pyramid"
21             alt="The Great Pyramid of Giza against the setting sun">
22        <p class="good">The alt attribute describes the content of the image</p>
23    </section>
24
25    <section>
26        <h2>Example 3: Accessible vs inaccessible form</h2>
27
28        <div class="comparison">
29            <div>
30                <h3 class="bad">Inaccessible</h3>
31                <input type="text" placeholder="Enter name">
32            </div>
33            <div>
34                <h3 class="good">Accessible</h3>
35                <label for="name">Name:</label>
36                <input type="text" id="name" name="name">
37            </div>
38        </div>
39    </section>
40
41    <section>
42        <h2>Example 4: Semantic HTML</h2>
43        <header>
44            <nav aria-label="Sample navigation">
45                <ul>
46                    <li><a href="#section1">Section 1</a></li>
47                    <li><a href="#section2">Section 2</a></li>
48                </ul>
49            </nav>
50        </header>
51        <main>
52            <p>Semantic tags help screen readers.</p>
53        </main>
54    </section>
55</body>
56</html>