Guideline 1.3 - Adaptable
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.
role attribute to identify sections of the page. Some screen readers and
plugins allow keyboard users to skip to certain landmarks. 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
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.
table captions to identify the content of a table.
Don't use CSS
:after to add any important information to the page.
Only use those selectors to add decorative elements.