Page 2 of 6
Structure and Semantics
| Topic | Technique | WCAG AA Requirement | |
|---|---|---|---|
| Markup | Correct markup: The page <title> MUST be present and MUST contain text. |
Required | WCAG 2.4.2 |
| Meaningful Text | Accurate and informative: The page <title> MUST be accurate and informative. |
Required | WCAG 2.4.2 |
Dynamic pages: The page <title> of dynamic pages (e.g. in single page apps) MUST be updated when the purpose of the page changes. |
Required | WCAG 2.4.2 | |
User Actions: If a page is the result of a user action or scripted change of context, the text of the <title> SHOULD describe the result or change of context to the user. |
Best Practice | ||
Concise: The <title> SHOULD be concise. |
Best Practice | ||
Unique: The page <title> SHOULD be unique, if possible. |
Best Practice | ||
Unique info first: Unique information SHOULD come first in the <title>. |
Best Practice | ||
Match heading: The page <title> SHOULD match (or be very similar to) the top heading (ideally marked as <h1>) in the main content. |
Best Practice | ||
| Topic | Technique | WCAG AA Requirement | |
|---|---|---|---|
| Page Language | Page Language: The primary language of the page MUST be identified accurately, using a standard language code, on the <html> element (e.g. <html lang="en"> or <html lang="fr">). |
Required | WCAG 3.1.1 |
| Language of Parts | Language of Parts: Inline language changes MUST be identified with a valid lang attribute. |
Required | WCAG 3.1.2 |
| Language Code | Two-character language code: The language code SHOULD be designated with a standard two-character ISO 639-1 code (e.g. lang="en") to achieve maximum support across screen readers and browsers, though other codes (e.g. lang="en-us") are technically allowable. |
Best Practice | |
| Topic | Technique | WCAG AA Requirement | |
|---|---|---|---|
| Headings to Bypass Blocks of Content | Bypass blocks: Screen readers allow users to navigate by headings, so headings are an effective way to bypass blocks of content, as required by WCAG 2.4.1. Note: Headings are not absolutely required by WCAG to pass 2.4.1, but are highly recommended, along with landmarks and skip links. | Required | WCAG 2.4.1 |
| Meaningful Text | Accurate, informative section labels: Headings MUST be accurate and informative, as labels for the sections of text they describe. | Required | WCAG 1.3.1 WCAG 2.4.6 |
| Brevity: Heading text SHOULD be concise and relatively brief. | Best Practice | ||
| Heading Markup | Use real headings: Text that acts as a heading visually or structurally SHOULD be designated as a true heading (<h1>, <h2>, etc.) in the markup. |
Best Practice | |
| Heading Markup for Headings Only: Text that does not act as a heading visually or structurally SHOULD NOT be marked as a heading. |
Best Practice | ||
| Outline/Hierarchy of Content |
Content outline: Headings SHOULD convey a clear and accurate structural outline of the sections of content of a web page. |
Best Practice | |
| Consecutive levels: Headings SHOULD NOT skip hierarchical levels. | Best Practice | ||
First heading in the main content: The beginning of the main content SHOULD start with <h1>. |
Best Practice | ||
One <h1>: Most web pages SHOULD have only one <h1>. |
Best Practice | ||
| Topic | Technique | WCAG AA Requirement | |
|---|---|---|---|
| Landmarks to Bypass Blocks of Content | Bypass blocks: Screen readers allow users to navigate by landmarks, so landmarks are an effective way to bypass blocks of content, as required by WCAG 2.4.1. Other methods may be used as well as — or instead of — landmarks, such as skip links, headings, expand/collapse regions, etc. | Required | WCAG 2.4.1 |
| Landmark Structural Organization | Page layout groupings: Landmarks SHOULD be used to accurately designate pre-defined parts of the layout (e.g. the header, navigation, main content, and footer). | Best Practice | |
| Content within landmarks: All text SHOULD be contained within a landmark region. | Best Practice | ||
Landmark names: Multiple instances of the same type of landmark SHOULD be distinguishable by different discernible names (using aria-label or aria-labelledby). |
Best Practice | ||
| Only one instance of some landmarks: A page SHOULD NOT contain more than one instance of each of the following landmarks: header/banner, main, and footer/contentinfo. | Best Practice | ||
| Limit the number of landmarks: The total number of landmarks SHOULD be minimized to the extent appropriate for the content. Note: Having a large number of landmarks defeats the main purpose of landmarks, which is to make it easy to navigate quickly to sections of the layout. | Best Practice | ||
| Markup | Markup: Landmarks MAY be designated with either HTML tags or their equivalent ARIA roles (e.g. <header> or role="banner", <nav> or role="navigation", <main> or role="main", <footer> or role="contentinfo", etc.). |
Best Practice | |
| Topic | Technique | WCAG AA Requirement | |
|---|---|---|---|
| Markup | List markup: Lists MUST be constructed using the appropriate semantic markup (i.e. <ul> or <ol> with <li> child elements, or <dl> with <dt> and <dd> child elements). |
Required | WCAG 1.3.1 |
| Topic | Technique | WCAG AA Requirement | |
|---|---|---|---|
| Table Headers | Header tag: Table headers MUST be designated with <th>. |
Required | WCAG 1.3.1 |
| Meaningful header: Data table header text MUST accurately describe the category of the corresponding data cells. | Required | WCAG 1.3.1 | |
| Header and data cell associations: Table data cells MUST be associated with their corresponding header cells. Note: Use of scope ( <th scope="col"> and <th scope="row">) is highly recommended, though not always necessary (i.e. if all cells in the first row are marked as <th> without scope, most modern screen readers will infer that the scope is the column below each header cell). |
Required | WCAG 1.3.1 | |
Group header associations: Table data group headers (if any) MUST be associated with their corresponding data cell groups (e.g. via scope="rowgroup" or scope="colgroup"). |
Required | WCAG 1.3.1 | |
Complex header associations: Header/data associations that cannot be designated with <th> and scope MUST be designated with the headers and id attributes. |
Required | WCAG 1.3.1 | |
| Nested or split tables: Data table headers and data associations MUST NOT be referenced across nested, merged, or separate tables. | Required | WCAG 1.3.1 | |
| Tabular Data | Tables: Tabular data SHOULD be represented in a <table>.Note: Even if the data are not represented in a table, WCAG 1.3.1 requires the data to be associated with their labels. |
Best Practice | |
| Caption | Caption: Data tables SHOULD have a programmatically-associated <caption> or name (e.g. via aria-label or aria-labelledby).Note: In most circumstances, <caption> is preferred, because it is the native method of giving a name to a table, and the <caption> is visible and available to all users by default. |
Best Practice | |
Meaningful caption: The name or <caption> of a data table SHOULD describe the identity or purpose of the table accurately, meaningfully, and succinctly. |
Best Practice | ||
Unique caption: The name or <caption> of each data table SHOULD be unique within the context of other tables on the same page. |
Best Practice | ||
| Layout Tables | Avoid layout tables: Tables SHOULD NOT be used for the purpose of purely visual (non-data) layout. | Best Practice | |
| Avoid headers in layout tables: Layout tables MUST NOT contain headers. | Best Practice | ||
| Topic | Technique | WCAG AA Requirement | |
|---|---|---|---|
| iframe title attribute | Meaningful iframe title attribute: The iframe title attribute (on the parent page) MUST be accurate and descriptive. | Required | WCAG 2.4.1 |
| Unique title attributes: Every iframe SHOULD have a unique title (in the context of the page). | Best Practice | ||
Hidden or empty iframes: Hidden frames or frames that do not convey content to users SHOULD be hidden from assistive technologies using aria-hidden="true". |
Best Practice | ||
Page <title> of Embedded Page |
Page title of embedded page: The source page of an iframe (the page embedded in the iframe) MUST have a valid, meaningful <title>. |
Required | WCAG 2.4.2 |
| Topic | Technique | WCAG AA Requirement | |
|---|---|---|---|
| Unique Identifiers | Unique IDs: IDs MUST be unique within a web page. | Required | WCAG 4.1.1 |
|
Unique Names: The "accessible names" of elements, when provided, of block level elements (e.g. landmarks, tables, iframes, etc.) SHOULD be unique within a web page.
Note: The accessible name is determined by attributes or elements such as
aria-label, aria-labelledby, alt, <caption>, etc. Refer to the Accessible Name and Description Computation for details. |
Best Practice | ||
| One Attribute Instance: Elements MUST NOT contain more than one instance of the same attribute. | Required | WCAG 4.1.1 | |
| Well Formed | Closing Tags: Elements must not be missing closing tags. DIV or P element must not be nested within a LABEL element. Element must not contain duplicate attributes. |
Required | WCAG 4.1.1 |
| Nesting and Relationships | Parent-Child Relationships: Markup MUST adhere to required parent-child relationships of elements and attributes. | Required | WCAG 4.1.1 |
| ARIA relationships: ARIA relationships (e.g. parent-child, aria-owns, etc.) SHOULD adhere to WAI-ARIA Authoring Practices | Required | WCAG 4.1.1 | |
| Deprecated Markup | Deprecated Markup should not be used. | Best Practice | |
| Topic | Technique | WCAG AA Requirement | |
|---|---|---|---|
| Headings | See the requirements for headings. | Required | Multiple |
| Landmarks | See the requirements for landmarks. | Required | Multiple |
| Lists | See the requirements for lists. | Required | Multiple |
| Tables | See the requirements for tables. | Required | Multiple |
| Links | See the requirements for links. | Required | Multiple |
| Emphasis and Highlighting | Emphasis: Critical emphasis in the text SHOULD be conveyed in a text-based format, not visual styling alone. | Best Practice | |
| Highlighting markup: Highlighted text SHOULD be marked with the <mark> element. | Best Practice | ||
| Text-based highlighting: Critical highlighted text SHOULD be supplemented with a text-based method to convey the meaning of the highlighting. | Best Practice | ||
| Quotations | Blockquote: The <blockquote> element SHOULD be used to designate long (block level) quotations. | Best Practice | |
| Indentation: The <blockquote> element SHOULD NOT be used for visual styling (indentation) alone. | Best Practice | ||
| Inline quotations: The <q> element (for inline quotations) SHOULD NOT be used as the only way to designate quotations, due to poor support in screen readers and some browsers. | Best Practice | ||
| Strikethrough/Delete and Insert | Strikethrough markup: Strikethrough text SHOULD be marked with the <del> element. | Best Practice | |
| Strikethrough supplemental text: Critical strikethrough text MUST be supplemented with a text-based method to convey the meaning of the strikethrough. | Best Practice | ||
| Insert markup: Text designated for insertion SHOULD be marked with the <ins> element. | Best Practice | ||
| Insert supplemental text: Critical text designated for insertion MUST be supplemented with a text-based method to convey the meaning of the insertion. | Best Practice | ||