Course Outline (Part 7)

Welcome to Part 7 of the HTML5 & Semantic Web Development Course. In this part, we will cover one of the most important aspects of modern web design: Web Accessibility (A11y).

Web accessibility means building websites that everyone can use, including individuals with visual, auditory, motor, or cognitive impairments. As web developers, it is our legal and ethical responsibility to ensure our pages are accessible. We will cover accessibility foundations, keyboard focus, ARIA landmarks, roles, and attributes.

Chapter 35: What is Web Accessibility?

Web accessibility (abbreviated as A11y, where “11” represents the eleven letters between “a” and “y”) ensures that web tools and sites are usable by everyone.

35.1 The Web Content Accessibility Guidelines (WCAG)

WCAG is the global standard for web accessibility, built on four core principles, known by the acronym POUR:

  1. Perceivable: Users must be able to perceive the information. (e.g., providing alt text for images so blind users can “hear” the photo).
  2. Operable: Users must be able to operate the interface. (e.g., the website must be navigable using only a keyboard, for users who cannot use a mouse).
  3. Understandable: The content and operations must be easy to comprehend. (e.g., clear language, intuitive layouts).
  4. Robust: Content must remain compatible across various browsers and assistive tools (like screen readers).

35.2 The Semantic Foundation

The easiest and most effective way to build accessible sites is to write Semantic HTML.

  • Screen readers rely on elements like <nav>, <main>, <button>, and <h1> to build a mental map of your page layout. If you build a button using a generic <div onclick="...">, screen readers will ignore it, making the button completely unusable to blind visitors.

Chapter 36: Keyboard Navigation

Many users navigation the web using only a keyboard (or dynamic switch devices) due to motor impairments.

36.1 Tab Index & Focus Order

  • Pressing the Tab key on a webpage moves focus sequentially through all interactive elements (links, buttons, form fields).
  • Focus Ring: Browsers apply a default focus style (usually a blue outline) around the currently selected element. Never disable this outline in your CSS without replacing it with a custom, high-contrast focus style!

36.2 Controlling Focus with tabindex

You can modify an element’s focus behavior using the tabindex attribute:

  • tabindex="0": Adds an element that is not normally focusable (like a <div>) to the natural tab order.
  • tabindex="-1": Removes an element from keyboard focus, but allows focus to be set programmatically via JavaScript.
  • Avoid positive numbers (like tabindex="1"), as this breaks the natural tab order and makes keyboard navigation confusing.

Chapter 37: ARIA Landmarks and Roles

ARIA stands for Accessible Rich Internet Applications. It is a set of attributes that you can add to HTML elements to provide extra meaning to assistive technologies when standard semantic HTML tags fall short.

37.1 ARIA Roles

A role defines the type of element. For example, if you build a custom toggle switch, you can assign it role="switch".

  • Standard HTML elements have implicit roles (e.g., <nav> has the implicit role of navigation). Only write explicit ARIA roles when you are building custom elements or modifying default behaviors.
<!-- Explicit role representing an alert box -->
<div role="alert" class="warning-box">
    Your session is about to expire!
</div>

Chapter 38: ARIA Attributes for Screen Readers

ARIA attributes provide state information and label details to screen readers.

38.1 Providing Descriptive Labels

  • aria-label: Provides a descriptive label for elements that do not contain visible text. 
    <!-- A button with only an icon needs a text label for screen readers -->
<button aria-label="Close Modal">
    <svg>...</svg>
</button>
  • aria-labelledby: Links an element to another text tag that acts as its description: 
    <h3 id="modal-heading">Registration Form</h3>
<div role="dialog" aria-labelledby="modal-heading">
    <!-- Dialog content -->
</div>

38.2 Dynamic States

  • aria-expanded: Tells screen readers whether a dropdown or accordion is open (true) or closed (false).
  • aria-hidden="true": Hides decorative elements (like icons or background illustrations) from screen readers entirely, keeping the voice output clean.

Chapter 39: Best Practices for Accessibility

Here are 5 quick guidelines to follow when building webpages:

  1. Always use alt tags on images: If an image is purely decorative, use an empty alt attribute (alt="") so screen readers skip it.
  2. Associate Labels with Inputs: Never leave an input without a matching label.
  3. Ensure High Color Contrast: Text must stand out clearly from the background (a contrast ratio of at least 4.5:1 for body text).
  4. Do not rely solely on color to convey information: For example, do not show input validation errors using only a red border; add descriptive error text as well.
  5. Use correct element tags: Use <button> for actions, and <a> for navigation. Do not mix their purposes.

Discussion

Loading comments...