Chapter 12 | Inclusive Web Design

Accessibility & ARIA Basics

Accessibility means making websites usable for everyone, including people using screen readers, keyboard navigation or assistive technologies. This chapter builds responsible web design habits.

Start Learning Try Accessible Form

Alt Text

Gives meaningful image descriptions for screen readers.

Labels

Connect form fields with clear field names.

Keyboard Access

Allows users to navigate without a mouse.

ARIA

Adds extra information when native HTML is not enough.

Learning Objectives

After This Chapter, You Will Understand

This chapter teaches the first steps toward inclusive and user-friendly webpage development.

Accessibility

Understand why websites should work for all users.

Alt Text

Write useful image descriptions for screen readers.

Forms

Create form fields with proper labels and instructions.

ARIA

Understand basic ARIA roles and aria-label usage.

Meaning

What is Web Accessibility?

Accessibility means creating websites that can be used by people with different abilities and devices.

1 Simple Meaning

A website should be usable by people who cannot see clearly, cannot use a mouse, use screen readers, use keyboard navigation, or have slower internet or older devices.

Definition: Web accessibility is the practice of designing and coding websites so that everyone can access and use them comfortably.

2 Why It Matters

Improves usability for all users
Helps screen reader users understand content
Makes forms easier to fill
Supports keyboard-only navigation
Creates more professional and responsible websites

Professional Tip: Accessibility is not an extra feature. It is a quality habit in modern web design.

Accessible HTML

Basic Accessible HTML Habits

Good accessibility starts with clean and meaningful HTML.

Practice	Why It Helps	Example
Use proper headings	Creates a clear content structure	Use h1, h2, h3 in order
Use semantic tags	Helps assistive tools understand page areas	header, nav, main, footer
Write alt text	Explains images to screen reader users	<img alt="Student using laptop">
Use descriptive links	Explains where a link will take the user	View Course Details
Use labels in forms	Makes fields clear and clickable	<label for="email">Email</label>
Keep enough contrast	Makes text easier to read	Dark text on light background

3 Good Alt Text

# Good alt text
<img src="student.jpg" alt="Student practicing HTML on laptop">

Good alt text describes the meaning of the image, not just the file name.

4 Poor Alt Text

# Poor alt text
<img src="student.jpg" alt="image">

Words like image, photo or pic do not explain what the image shows.

Accessible Forms

Labels and Helpful Instructions

Forms should be easy to understand, fill and submit.

5 Label Connection

The for attribute in label should match the id attribute of the input field. This makes the form field easier to use and understand.

<label for="email">Email Address</label>
<input type="email" id="email" name="email">

6 Helpful Message

Use clear instructions for fields like password, mobile number or file upload.

<label for="mobile">Mobile Number</label>
<input type="tel" id="mobile" aria-describedby="mobileHelp">
<small id="mobileHelp">Enter 10 digit mobile number.</small>

Practice Task: Create a form with name, email and mobile fields. Add labels and helpful instructions for each field.

Keyboard Navigation

Make Pages Keyboard Friendly

Many users navigate websites using Tab, Enter, Space and arrow keys.

Keyboard Focus Demo

View Course

Use the Tab key on your keyboard to move focus between these elements.

7 Focus Visibility

Keyboard users need to see which link, button or input is currently active. Never remove focus outline without giving a better visible focus style.

Avoid: outline:none; without providing another visible focus style.

Good: Add a clear focus border, shadow or outline so users can track navigation.

ARIA Basics

What is ARIA?

ARIA gives extra information to assistive technologies when normal HTML is not enough.

aria-label

Gives an accessible name when visible text is missing or not enough.

aria-describedby

Connects an input field with a helpful instruction or explanation.

<input aria-describedby="help">
<small id="help">Enter valid email.</small>

role

Defines the purpose of an element when native semantic HTML is not enough.

<div role="alert">Form submitted.</div>

Golden Rule: Use normal semantic HTML first. Use ARIA only when HTML alone cannot communicate the meaning clearly.

Try It Yourself

Create an Accessible Contact Form

Edit the code and click Run Code to see the output.

HTML Code Edit and run

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accessible Contact Form</title>
    <style>
        body{
            font-family:Arial;
            background:#f5f9ff;
            padding:20px;
            color:#13233f;
        }
        main{
            max-width:600px;
            background:white;
            padding:24px;
            border-radius:16px;
            box-shadow:0 8px 20px rgba(0,0,0,.08);
        }
        label{
            display:block;
            font-weight:bold;
            margin-top:14px;
        }
        input, textarea{
            width:100%;
            padding:11px;
            margin-top:6px;
            border:1px solid #bbb;
            border-radius:10px;
        }
        input:focus, textarea:focus, button:focus{
            outline:4px solid rgba(13,110,253,.25);
            outline-offset:3px;
        }
        small{
            display:block;
            color:#5d6b82;
            margin-top:4px;
        }
        button{
            margin-top:16px;
            background:#06285f;
            color:white;
            border:none;
            padding:12px 18px;
            border-radius:25px;
            font-weight:bold;
            cursor:pointer;
        }
    </style>
</head>
<body>

<main>
        <h1>Contact Us</h1>
        <p>Please fill this form. All fields are required.</p>

<label for="email">Email Address</label>
            <input 
                type="email" 
                id="email" 
                name="email" 
                aria-describedby="emailHelp"
                required>
            <small id="emailHelp">Example: student@example.com</small>

<label for="message">Message</label>
            <textarea 
                id="message" 
                name="message" 
                rows="5" 
                aria-describedby="messageHelp"
                required>

Write your enquiry in 2 to 3 lines.

Protected Learning Content

Accessibility & ARIA Basics

Alt Text

Labels

Keyboard Access

ARIA

After This Chapter, You Will Understand

Accessibility

Alt Text

Forms

ARIA

What is Web Accessibility?

1 Simple Meaning

2 Why It Matters

Basic Accessible HTML Habits

3 Good Alt Text

4 Poor Alt Text

Labels and Helpful Instructions

5 Label Connection

6 Helpful Message

Make Pages Keyboard Friendly

Keyboard Focus Demo

7 Focus Visibility

What is ARIA?

aria-label

aria-describedby

role

Create an Accessible Contact Form

Mistakes Students Should Avoid

Wrong Habits

Correct Habits

Test Your Understanding

1. Accessibility means:

2. Which attribute describes an image?

3. Which tag gives a name to a form field?

4. Which attribute can give an accessible name to an icon-only button?

5. What should be used first before ARIA?

Remember These Points

Accessibility

Alt Text

Labels

Keyboard Focus

ARIA

Semantic First