Codecademy Logo

Digital Accessibility and Compliance

Related learning

  • Course

    Learn Digital Accessibility

    Learn web accessibility with this online course covering WCAG 2.2, testing tools, and design best practices to create inclusive digital experiences.
    • With Certificate
    • Intermediate.
      3 hours
  • Career path

    UX Designer

    UX Designers create intuitive, accessible, and engaging digital experiences. This career path teaches you how to research users, prototype in Figma, and more.
    • Includes 9 Courses
    • With Certificate
    • Beginner Friendly.
      10 hours

Accessibility Standards

International accessibility standards, including Section 508 (United States), the European Accessibility Act (EU), and the Accessibility for Ontarians with Disabilities Act (Canada), use WCAG as their technical foundation while adding region-specific requirements.

WCAG Core Principles

WCAG 2.2 groups accessibility requirements into four principles:

  • Perceivable: for information presentation
  • Operable: covering navigation and interaction
  • Understandable: focusing on clarity
  • Robust: ensuring compatibility with assistive technologies and different devices

WCAG Conformance Levels

The Web Content Accessibility Guidelines (WCAG) define three conformance levels: A (minimum), AA (standard), and AAA (enhanced).

These levels guide web developers in achieving various degrees of accessibility compliance.

Semantic HTML

Semantic HTML elements, such as <header>, <nav>, and <main>, provide structure and meaning to content. This enhances accessibility by helping assistive technologies interpret sections for easier navigation.

<header>
  <nav>Navigation links</nav>
</header>
<main>
  <article>
    <section>Article Content</section>
  </article>
</main>
<footer>Footer information</footer>

Heading Hierarchy

Headings (H1-H6) establish a logical structure for content, aiding screen readers in navigation. Start with H1 for main titles, and organize content hierarchically without skipping levels.

<h1>Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

Alt Text Usage

Alternative text describes the content and function of images:

  • Decorative images use empty alt attributes.
  • Informative images describe their content.
  • Functional images detail actions or destinations.
<!-- Informative image - describes the content -->
<img src="chart.png" alt="Bar chart showing 60% increase in mobile users from 2023 to 2024">


<!-- Decorative image - empty alt attribute -->
<img src="decorative-border.png" alt="">


<!-- Functional image - Logo that's also a link - identifies the destination -->
<a href="/">
  <img src="logo.jpg" alt="Company Name home">
</a>

ARIA Attributes

ARIA attributes improve HTML accessibility by defining roles, states, and properties for elements, enhancing the user experience for those relying on assistive technologies.

In the example code, the aria-label in the <nav> element provides a descriptive name to distinguish it from other navigation landmarks on the page (like footer navigation or breadcrumbs), which is especially helpful for screen reader users navigating by landmarks. 

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Section 508 Explained

Section 508 of the Rehabilitation Act requires U.S. federal agencies and contractors to make electronic and information technology accessible, referencing WCAG 2.0 Level AA as the technical benchmark.

Accessibility Guidelines & Legislation

Accessibility guidelines like WCAG provide technical standards for implementation, while accessibility legislation like Section 508 creates legal mandates requiring compliance with those standards.

Learn more on Codecademy

  • Course

    Learn Digital Accessibility

    Learn web accessibility with this online course covering WCAG 2.2, testing tools, and design best practices to create inclusive digital experiences.
    • With Certificate
    • Intermediate.
      3 hours
  • Career path

    UX Designer

    UX Designers create intuitive, accessible, and engaging digital experiences. This career path teaches you how to research users, prototype in Figma, and more.
    • Includes 9 Courses
    • With Certificate
    • Beginner Friendly.
      10 hours
Previous
Next