Styling and Accessibility

Web Accessibility

Learning Objectives

  • You understand what web accessibility is and why it matters for all users.
  • You know the four WCAG principles (Perceivable, Operable, Understandable, Robust).
  • You can use semantic HTML elements to create accessible document structures.
  • You know how to implement proper color contrast and alternative text for images, and you can create accessible forms and links.

Web accessibility refers to the practice of designing and developing websites and applications so that people with disabilities can perceive, understand, navigate, and interact with them effectively.

Consider someone with visual impairment using a screen reader to navigate a website by listening to the content. Or someone with a broken arm who temporarily cannot use a mouse and relies on keyboard navigation. Perhaps a user struggling to read low-contrast text on their phone in bright sunlight, or an older adult who benefits from larger, clearer text. All of these users benefit from accessible design.

Accessibility is about creating robust, flexible interfaces that work well in diverse situations.

Legal Requirements and Compliance

Legal requirements make accessibility mandatory for many organizations. The European Accessibility Act (EAA), which came into effect in June 2025, requires a wide range of digital services to be accessible to people with disabilities. This includes websites and mobile applications for e-commerce, online banking, e-books, streaming platforms, and transport booking services.

The EAA applies to businesses operating within the EU regardless of size (though microenterprises may have some exemptions), as well as businesses outside the EU that provide covered services to EU consumers. Organizations that fail to comply may face fines, legal action, reputational damage, and loss of market access. Similar laws exist in other regions, including the Americans with Disabilities Act (ADA) in the United States.


Loading Exercise...

WCAG and Accessibility Principles

The Web Content Accessibility Guidelines (WCAG) provide a comprehensive framework for web accessibility. WCAG is organized around four core principles, remembered by the acronym POUR: Perceivable, Operable, Understandable, and Robust.

Perceivable means information and user interface components must be presentable to users in ways they can perceive. Users must be able to perceive the content — it can’t be invisible to all of their senses. Operable means user interface components and navigation must be operable by all users, including those who cannot use a mouse. Understandable requires that information and the operation of the user interface must be clear to users. Finally, Robust means content must work reliably across a wide variety of user agents, including assistive technologies.

WCAG defines three conformance levels: A (minimum), AA (mid-range), and AAA (highest). Most organizations target Level AA as it provides a good balance between accessibility and implementation effort. Legal requirements like the EU Accessibility Act typically reference WCAG Level AA as the standard to meet.

Loading Exercise...

Semantic HTML as Foundation

The foundation of web accessibility is semantic HTML — using HTML elements according to their intended purpose. When you use semantic elements, you provide meaning and structure that assistive technologies can understand and communicate to users.

Every page should have exactly one h1 element that describes the main content. Subheadings should follow a logical hierarchy where an h2 follows an h1, and an h3 follows an h2. Skipping heading levels creates confusion for screen reader users who navigate by jumping between headings.

<h1>Introduction to Web Development</h1>
<p>Web development encompasses many technologies...</p>

<h2>Frontend Development</h2>
<p>Frontend development focuses on what users see...</p>

<h3>HTML</h3>
<p>HTML provides the structure...</p>

<h3>CSS</h3>
<p>CSS handles the presentation...</p>

Elements that define regions of a page such as <header> for introductory content, <nav> for navigation menus, <main> for primary content, <footer> for footer content, and <aside> for tangentially related content help screen reader users understand the overall layout and jump to different sections quickly.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Accessible Page Structure</title>
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Article Title</h2>
      <p>Article content...</p>
    </article>
  </main>

  <footer>
    <p>© 2025 My Website</p>
  </footer>
</body>
</html>

Similarly, using <button> for clickable buttons and <a> for links ensures that these elements are recognized correctly by assistive technologies.

Loading Exercise...

Color, Contrast, and Text

Users with visual impairments, color blindness, or those viewing content in challenging conditions need sufficient contrast and clear text.

WCAG defines minimum contrast ratios between text and background colors: 4.5:1 for normal text (less than 18pt or 14pt bold) and 3:1 for large text (18pt and larger, or 14pt bold and larger). You can check color contrast using browser developer tools, which will show whether your contrast meets WCAG requirements.

Color should not be the only way to convey information. Users who are colorblind or using monochrome displays need alternative ways to understand meaning. When showing error states, success states, or other status information, combine color with icons, text, or other visual indicators.

Text should be readable and resizable. Use relative units like rem or em rather than fixed pixel sizes, maintain reasonable line lengths (45-75 characters is optimal), provide adequate line spacing (at least 1.5 times the font size), and choose legible fonts for body text.

Loading Exercise...

Three web page elements require special attention for accessibility: images, links, and forms.

Images and alternative text

Every image must have an alt attribute that provides a text alternative. Screen readers announce this text to users who cannot see the image. For informative images that convey information or meaning, the alt text should describe the essential information:

<img src="chart.png" alt="Bar chart showing 45% increase in sales from 2024 to 2025" />

For decorative images that are purely visual and don’t convey information, use an empty alt attribute:

<img src="decorative-border.png" alt="" />

The empty alt="" tells screen readers to skip the image entirely. Omitting the alt attribute causes screen readers to announce the filename, which is confusing. For functional images like buttons or links, the alt text should describe the action rather than the image itself.

Loading Exercise...

Descriptive link text

Links should make sense out of context. Screen reader users often navigate by links alone, hearing a list of all links on the page. Generic text like “click here” or “read more” doesn’t provide enough information about where the link leads.

<!-- Poor: vague link text -->
<p>To learn about accessibility, <a href="/accessibility">click here</a>.</p>

<!-- Good: descriptive link text -->
<p>Learn more about <a href="/accessibility">web accessibility guidelines</a>.</p>

Accessible forms

Accessible forms use labels associated with form inputs. The simplest way to create this association is to wrap the input inside a <label> element, like we have already done:

<label>
  <span>Name</span>
  <input type="text" name="name" />
</label>

<label>
  <span>Email (required)</span>
  <input type="email" name="email" required aria-required="true" />
</label>

When the input is wrapped inside the label, the browser automatically creates the association. This makes the label clickable — clicking the label text focuses the input, which improves usability for everyone. Screen readers also announce the label text when the input receives focus.

Alternatively, you can create explicit associations using the for and id attributes when the label and input need to be in different parts of the DOM for layout purposes:

<label for="username">Username</label>
<input type="text" id="username" name="username" />

Group related inputs using <fieldset> and <legend> to help users understand that inputs are related:

<fieldset>
  <legend>Shipping Address</legend>

  <label>
    <span>Street</span>
    <input type="text" name="street" />
  </label>

  <label>
    <span>City</span>
    <input type="text" name="city" />
  </label>
</fieldset>
Loading Exercise...

Summary

In summary:

  • Web accessibility focuses on making websites usable by everyone, including people with disabilities.
  • WCAG (Web Content Accessibility Guidelines) defines accessibility standards based on four principles: Perceivable, Operable, Understandable, and Robust (POUR). Most applications target WCAG Level AA conformance.
  • Semantic HTML is the foundation of accessibility. Using proper elements like <button>, <a>, <header>, and <main> provides structure and meaning that assistive technologies understand.
  • Headings create a logical document outline. Every page should have one h1, and headings should follow a logical hierarchy without skipping levels.
  • Color contrast must meet minimum ratios (4.5:1 for normal text, 3:1 for large text), and information should never be conveyed by color alone.
  • All images need alt attributes — descriptive text for informative images, empty alt="" for decorative images. Links should have descriptive text that makes sense out of context.
  • Form inputs must have associated labels, typically by wrapping the input inside the <label> element. Required fields should be marked both visually and programmatically.
← Theming and Design Consistency
Keyboard Navigation, Dynamic Content, and ARIA →