Dark mode

WCAG Guideline 1.3 - Adaptable

Jun 13th, 2021

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.

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

Landmark Roles

Banner - logo, search, header items.
- Only one banner landmark per page.
- Must be a top-level landmark.
- Use header element or role="banner"
Complementary - complements main content but can be separated from it.
- Use aside element or role="complementary".
Contentinfo - common info at the bottom of each page, aka "footer".
- Only one contentinfo landmark per page.
- Must be a top-level landmark.
- Use footer element or role="contentinfo".
Form - identifies a collection of form items.
- Use the search landmark instead when it's a search form.
- Use form element with accessible name (aria-labelledby, aria-label, or title) or role="form".
Main - primary content of the page.
- Only one main landmark per page.
- Top-level landmark.
- Use main element or role="main".
Navigation - groups of links that are used for navigation.
- Multiple navigation landmarks should have unique labels. Identical nav landmarks should use the same label.
- Use nav element or role="navigation".
Region - a generic section of the page to be navigated to.
- Must have a label.
- Use section element or role="region".
Search - a group of form elements that perform a search.
- Use role="search". There are no HTML elements that define a search region.

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.

Disclaimer:

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.

Mary Knize

Canonical URL