The WCAG Explained

Simplified and actionable explanations of every WCAG 2.2 criteria

Adaptable

Summary:
WCAG 1.3, titled "Adaptable," is all about creating content that can be presented in different ways without losing meaning. It's not just about how things look, but how they're structured and organized. This criterion is crucial for users who need to consume content in non-standard formats, like large print, braille, or screen readers.

What:
This criterion mandates that information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. In simpler terms, it means that the content should be understandable and navigable, regardless of how it's presented. This includes proper labeling of form elements, using headings correctly, and ensuring that tables are read correctly by screen readers.

  1. 1.3.1 Info and Relationships: Ensure that information, structure, and relationships conveyed through presentation are programmatically determinable, so they can be properly rendered by assistive technologies.
  2. 1.3.2 Meaningful Sequence: Present content in a meaningful order so that it maintains its context and meaning when linearized, crucial for assistive technology users.
  3. 1.3.3 Sensory Characteristics: Instructions for understanding and operating content should not rely solely on sensory characteristics like shape, size, or visual location, but also be available in text.
  4. 1.3.4 Orientation: The content should not restrict its view and operation to a single display orientation, like landscape or portrait, unless a specific orientation is essential.
  5. 1.3.5 Identify Input Purpose: The purpose of each input field collecting information about the user should be identifiable, enabling assistive technologies to adapt the user interface.
  6. 1.3.6 Identify Purpose: Content and interface components should be programmatically determinable, allowing for customization and better accessibility for users with disabilities.

Why:
Imagine you're using a screen reader and the page is a jumble of out-of-context phrases, or you're relying on a keyboard and can't navigate through a form correctly. WCAG 1.3 addresses these issues by ensuring content is structured logically and can adapt to different presentation formats without losing its meaning or function.

Examples and Scenarios:

  1. Structured Forms: Labels and instructions in forms should be programmatically connected to their fields, so screen readers can accurately describe each field.
  2. Headings and Labels: Use headings correctly to structure content. A screen reader can then convey the structure and help users navigate more easily.
  3. Data Tables: Tables should have proper headers and descriptions so that someone using a screen reader can understand the data as it's intended.

How to Comply:

  • Websites: Use semantic HTML, like <h1> to <h6> for headings, <label> for form labels, and appropriate ARIA roles.
  • Mobile Apps: Ensure that elements are correctly labeled and that the screen reader can accurately describe and interact with content.
  • Documents: In Word documents or PDFs, use built-in styles for headings and lists, and ensure tables are created with column and row headers.

Exceptions:

  • CAPTCHAs: Again, these are exempt for their intended purpose.
  • Decorative Elements: If an element is purely decorative and conveys no information or structure, it doesn't need to be programmatically determinable.
  • Complex Visual Content: When content is so complex that it can't be made accessible through these means, providing an accessible alternative version is acceptable.