Be an a11y Structure

This documentation provides an interactive list of the WCAG guidelines, with categories, filters and complementary resources. It is designed to make the guidelines easier to browse and understand. It is not a replacement for the official documentation, but a nice companion.

How I present the guidelines

The list of guidelines will follow the Principle > Guideline > Criterion structure of the WCAG, and each criterion will display color-coded tags for the team involved, the difficulty to implement and the level of conformance. You will be able to filter the list with a searchbar and these tags. You can expand each criterion to access a detailed description, examples, and methods to implement it.

Teams

• Design

  The criterion affects how the page or its element look and behave

• Content

  The criterion affects text or media content

• Code

  The criterion affects how to code the page or its elements

Difficulty

• Easy

  Implementation does not require technical skills and should not take long

• Normal

  Implementation requires some technical skills or some extra time

• Hard

  Implementation requires advanced technical skills or a lot of extra time

Level

• A

  Base level - Must be implemented

• AA

  Target level - Must be implemented

• AAA

  Extra level - You should try to bag them, but it is not required

Example

1. X - Principle

   1. X.Y - Guideline

      Guideline description

      1. X.Y.Z - Criterion

         Team

         Difficulty

         Level

         Goal

         Description

         Description

         Examples

         • Example

         How to implement

         • Method

         Resources

         • Resource Link