Tutorial 2.3.2

Accessibility & Responsive Design

Chapter 6 · UI/UX
~2.5 hours Intermediate WCAG · ARIA · Media Queries · Mobile‑First

Overview

An inclusive web is accessible to everyone, regardless of ability or device. This tutorial covers the two pillars of modern frontend inclusivity: Accessibility (a11y) and Responsive Design. You will learn the WCAG standards, semantic HTML and ARIA, keyboard navigation, responsive breakpoints, mobile‑first design, and testing techniques.

Why this matters: Over 1 billion people globally have a disability. Accessible design is not just ethical—it also improves SEO, usability for all, and can be a legal requirement. Responsive design ensures your product works on any screen size.

1. Why Accessibility?

  • Inclusion: Everyone, regardless of ability, should be able to use the web.
  • Legal & Compliance: Many countries have laws mandating accessibility (e.g., ADA, Section 508, EAA).
  • Better UX for all: Accessible design often improves usability for everyone (e.g., captions help in noisy environments).
  • SEO benefits: Semantic HTML and proper structure help search engines understand your content.
  • Future‑proofing: Accessible code is often cleaner and more maintainable.
Remember: Accessibility is not a feature; it is a fundamental requirement of good design.

2. WCAG Standards (Web Content Accessibility Guidelines)

WCAG is the international standard for web accessibility. It is organised around four principles (POUR):

  • Perceivable: Users must be able to perceive the information (e.g., text alternatives for images, captions for videos).
  • Operable: Users must be able to operate the interface (e.g., keyboard navigation, enough time to read).
  • Understandable: Users must be able to understand the information and interface (e.g., clear labels, consistent navigation).
  • Robust: Content must be robust enough to work with different assistive technologies (e.g., valid HTML, ARIA).

WCAG has three levels of conformance: A (minimum), AA (mid‑range), AAA (highest). Most organisations target WCAG 2.1 AA.

// Example: Perceivable – providing alt text for images <img src="dog.jpg" alt="A golden retriever playing in the park" />

3. Semantic HTML & ARIA

Semantic HTML uses elements that convey meaning about the content structure (e.g., <header>, <nav>, <main>, <article>, <footer>). This helps screen readers and other assistive technologies understand the page.

ARIA (Accessible Rich Internet Applications)

ARIA is a set of attributes that define ways to make web content more accessible when semantic HTML is not enough (e.g., complex widgets, custom controls).

  • role: Defines the type of element (e.g., role="button", role="navigation").
  • aria-label: Provides a text label for an element.
  • aria-describedby: Points to an element that describes the current element.
  • aria-hidden: Hides an element from assistive technologies.
// Semantic HTML + ARIA example <nav role="navigation" aria-label="Main navigation"> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> </ul> </nav>
Rule of thumb: Use semantic HTML first. Only use ARIA when semantic HTML is not sufficient.

4. Keyboard Navigation & Focus Management

Many users rely on a keyboard rather than a mouse. Ensuring all functionality is available via keyboard is a critical requirement.

  • Tab order: The order in which elements receive focus should be logical and follow the visual layout.
  • Focus indicators: Always provide a visible focus indicator (e.g., outline: 2px solid blue).
  • Skip links: Provide a "Skip to main content" link at the top of the page.
  • Keyboard traps: Ensure users cannot get stuck in a modal or widget without being able to exit.
// Skip link example <a href="#main-content" class="skip-link">Skip to main content</a> <main id="main-content">...</main>

5. Responsive Design

Responsive design ensures that your website adapts to different screen sizes and devices. The core tool is CSS Media Queries.

Common breakpoints

  • Mobile: up to 480px
  • Tablet: 481px – 768px
  • Desktop: 769px – 1024px
  • Wide: 1025px and above
/* Mobile‑first CSS */ .container { display: flex; flex-direction: column; } /* Tablet */ @media (min-width: 481px) { .container { flex-direction: row; flex-wrap: wrap; } } /* Desktop */ @media (min-width: 769px) { .container { flex-wrap: nowrap; } }

Fluid layouts

Use relative units (rem, em, %, vw, vh) instead of fixed pixels. This allows the layout to scale naturally.

6. Mobile‑First & Testing

Mobile‑First Design

Design and develop for the smallest screen first, then enhance for larger screens. This approach:

  • Forces you to prioritise content and features.
  • Often results in cleaner, faster‑loading code.
  • Aligns with the growing mobile‑first usage.

Testing tools

  • Browser developer tools: Device emulation in Chrome/Edge/Firefox.
  • Real devices: Physical phones and tablets.
  • Responsive design testing tools: BrowserStack, LambdaTest.
  • Accessibility checkers: Lighthouse, WAVE, axe DevTools, NVDA, VoiceOver.
Pro tip: Use the prefers-reduced-motion media query to respect user preferences for animations.

Quiz

Question 1

What does the 'P' in the WCAG POUR principles stand for?

  • Progressive
  • Perceivable
  • Performant
  • Portable
Show answer
B. Perceivable.

Question 2

Which HTML element is used to define the main navigation on a page?

  • <nav>
  • <div id="nav">
  • <navigation>
  • <menu>
Show answer
A. <nav>. It provides semantic meaning for assistive technologies.

Question 3

What is the mobile‑first approach in responsive design?

  • Designing only for mobile devices
  • Designing for desktop first and then scaling down
  • Designing for mobile first and progressively enhancing for larger screens
  • Using only mobile‑specific frameworks
Show answer
C. Designing for mobile first and progressively enhancing for larger screens.

Exercises

Exercise 1

Rewrite the following non‑semantic code using semantic HTML elements: <div class="header">...</div> <div class="main">...</div> <div class="footer">...</div>

Sample answer
<header>...</header>
<main>...</main>
<footer>...</footer>

Exercise 2

Write a media query that changes a flex container from column to row when the viewport is wider than 600px.

Sample answer
.container { display: flex; flex-direction: column; }
@media (min-width: 600px) {
  .container { flex-direction: row; }
}

Homework

Homework 1

Create a simple responsive card component that displays an image, a title, and a description. It should stack vertically on mobile and display as a horizontal row on desktop. Also, make the card keyboard‑accessible (add proper tab index and focus styles).

Sample answer (HTML + CSS outline)

HTML:

<div class="card" tabindex="0" role="article">
  <img src="..." alt="..." class="card-image" />
  <div class="card-content">
    <h2>Title</h2>
    <p>Description...</p>
  </div>
</div>

CSS:

.card { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border: 1px solid #ccc; border-radius: 8px; }
.card:focus { outline: 3px solid #4f46e5; }
@media (min-width: 768px) {
  .card { flex-direction: row; align-items: center; }
  .card-image { max-width: 200px; }
}

Mini‑Project

Accessible Landing Page

Design and code a responsive, accessible landing page for a fictional product. Include:

  • Semantic HTML5 structure (header, nav, main, footer).
  • A skip‑to‑content link.
  • Proper ARIA labels on interactive elements.
  • Responsive design with at least two breakpoints (mobile/tablet/desktop).
  • Good colour contrast (check with a tool).
  • Keyboard‑friendly navigation.
Sample architecture

Structure:

  • Header: Logo + navigation (with ARIA label).
  • Hero section: H1, subtitle, CTA button (focusable).
  • Features: 3‑column grid (stacks on mobile).
  • Footer: Links to About, Privacy, Contact.

Accessibility features:

  • Alt text on all images.
  • ARIA labels on nav and buttons (if needed).
  • Focus indicators on all interactive elements.
  • Skip link at the top of the page.
  • Colour contrast ratio of at least 4.5:1 for text.

Tutorial Summary

You explored the essential principles of inclusive design: accessibility (WCAG, semantic HTML, ARIA, keyboard navigation) and responsive design (media queries, mobile‑first, fluid layouts). You learned that accessibility and responsiveness are not optional add‑ons but core requirements for modern web development.

Key takeaway: Build with inclusivity in mind from the start. Use semantic HTML as your foundation, test with real devices and assistive technologies, and always design for the smallest screen first.