Other Semantic Elements
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 |
General Notes About Semantic Markup:
If the technology used provides semantic structure to convey the relationships between information:
- Use semantic markup to mark emphasized or special text.
- Use text to convey information that is conveyed by variations of presentation of text.
- Separate information and structure from presentation. Do not use style to convey structure.
- Semantic markup when color cues are used
- Real HTML list elements -
ol
,ul
anddl
for lists (ordiv role='list'
androle='listitem'
). - Real HTML heading elements
h1
–h6
to identify headings. Headings must be informative and clearly describe the topic that follows it. (Text size is irrelevant for headings — size and style can be implemented via CSS). - Functions of the Document Object Model to add content to a page.