HTML Accessibility

Web accessibility ensures that websites can be used by everyone, including people with disabilities.

Basic Accessibility Elements

Alt on Images

<img src="logo.png" alt="Logo Technology University">
<img src="decorative.png" alt="">

Label on Forms

<label for="name">Name:</label>
<input type="text" id="name" name="name">

Heading Hierarchy

<h1>Main Title</h1>
<h2>Chapter 1</h2>
<h3>Subchapter 1.1</h3>

ARIA Attributes

role

<div role="navigation">
    <ul>
        <li><a href="home.html">Home</a></li>
    </ul>
</div>

aria-label

<button aria-label="Close menu">&times;</button>
<nav aria-label="Main Menu">...</nav>

aria-live

<div aria-live="polite" id="status">Loading data...</div>

Case Study: Accessible Campus Website

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Campus System - Accessible</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', sans-serif; line-height: 1.6; color: #333; }
        .skip-link { position: absolute; top: -40px; left: 0; background: #1e3a5f; color: white; padding: 8px; z-index: 100; }
        .skip-link:focus { top: 0; }
        a:focus, button:focus, input:focus { outline: 3px solid #d4af37; outline-offset: 2px; }
        header { background: #1e3a5f; color: white; padding: 1rem 2rem; }
        nav ul { list-style: none; display: flex; gap: 1rem; }
        nav a { color: white; text-decoration: none; padding: 0.5rem; }
        nav a:hover, nav a:focus { text-decoration: underline; }
        .container { max-width: 1000px; margin: 2rem auto; padding: 0 2rem; }
        h1 { margin-bottom: 1rem; }
        h2 { margin: 1.5rem 0 0.5rem; color: #1e3a5f; }
        .form-group { margin-bottom: 1.5rem; }
        label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
        input, select, textarea { width: 100%; padding: 0.8rem; border: 2px solid #ddd; border-radius: 4px; font-size: 1rem; }
        input:focus, select:focus { border-color: #3498db; }
        .required { color: #e74c3c; }
        .hint { font-size: 0.85rem; color: #666; margin-top: 0.3rem; }
        .btn { padding: 0.8rem 1.5rem; background: #3498db; color: white; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; }
        .btn:hover { background: #2980b9; }
        footer { background: #1e3a5f; color: white; padding: 1rem 2rem; text-align: center; margin-top: 2rem; }
    </style>
</head>
<body>
    <a href="#main" class="skip-link">Skip to main content</a>

    <header>
        <nav aria-label="Main Menu">
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="academic.html">Academic</a></li>
                <li><a href="kontak.html">Kontak</a></li>
            </ul>
        </nav>
    </header>

    <div class="container">
        <main id="main">
            <h1>Student Registration Form</h1>

            <form aria-labelledby="formTitle">
                <div class="form-group">
                    <label for="name">Full name <span class="required">*</span></label>
                    <input type="text" id="name" name="name" required aria-required="true"
                           placeholder="Enter your full name">
                    <div class="hint" id="nameHint">At least 3 characters</div>
                </div>

                <div class="form-group">
                    <label for="email">Email <span class="required">*</span></label>
                    <input type="email" id="email" name="email" required aria-required="true"
                           placeholder="[email protected]" aria-describedby="emailHint">
                    <div class="hint" id="emailHint">Use an active email</div>
                </div>

                <div class="form-group">
                    <label for="major">Major <span class="required">*</span></label>
                    <select id="major" name="major" required aria-required="true">
                        <option value="">Select Major</option>
                        <option value="cs">Computer Science</option>
                        <option value="si">Information Systems</option>
                        <option value="management">Management/option>
                    </select>
                </div>

                <button type="submit" class="btn">Register/button>
            </form>

            <div aria-live="polite" id="formStatus" role="status"></div>
        </main>
    </div>

    <footer>
        <p>&copy; 2024 Technology University</p>
    </footer>

    <script>
        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();
            document.getElementById('formStatus').textContent = 'Form submitted successfully!';
        });
    </script>
</body>
</html>

Accessibility Checklist

Skip links: Quick navigation to the main content
Alt text: Descriptions for all images
Form labels: Every input has a label
Heading hierarchy: h1 -> h2 -> h3 in order
Color contrast: Minimum contrast ratio of 4.5:1
Keyboard navigation: All elements are accessible by keyboard
Focus visible: A clear focus indicator
ARIA: Use it when semantic HTML is not enough

Best Practices

Use semantic HTML: header, nav, main, article, footer
Label all inputs: Use the label tag with for
Descriptive alt text: Explain the image content
Structured headings: Don't skip levels
Test with the keyboard: Don't rely on the mouse alone
Screen reader test: Use NVDA or VoiceOver

Summary

Web accessibility is a requirement, not an option. Use semantic HTML and ARIA to build inclusive websites.