Mary Knize

WCAG Guideline 1.3 - Adaptable

3 min read

Web Accessibility

Content has to be able to be presented in different ways without losing meaning.

1.3.1 - Info and Relationships

The meanings behind visual information like headers, bold text, input groups, etc. need to be relayed to all users.

Aria landmarks

Use the role attribute to identify sections of the page. Some screen readers and plugins allow keyboard users to skip to certain landmarks.

Headings should be indicated with native HTML markup if possible, if not, use role="heading" and aria-level with levels 1-6 to mimic header tags.

Appropriately mark up lists and definition lists so screen readers can skip between lists and list items.

Use table captions to identify the content of a table.

Don't use CSS :before and :after to add any important information to the page. Only use those selectors to add decorative elements.


These are my notes taken as I'm studying the WCAG 2.1 specification. As I've been trying to read and understand the specification, I've been led down links upon links as I've tried to understand the reasoning behind and implementation of various WCAG 2.1 requirements.

I am not an expert. I am the furthest thing from an expert in accessibility, but I wanted to share my notes as I work through the documentation.

I hope to condense all this information into something useful for myself, and to hopefully make it accessible and usable to others. These notes are no substitute for the actual, changing WCAG specification, and may become out of date at some point.

Canonical URL