Other Semantic Elements

Accessibility Techniques for Semantics
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
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.
Convey relationships between information by correctly using web page structure, by using:
  • Semantic markup when color cues are used
  • Real HTML list elements - ol, ul and dl for lists (or div role='list' and role='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.