Best practice

Landmarks

  • Identify landmarks on the page:
    • Use equivalent HTML5 sectioning elements (preferred)
    • Use ARIA landmark role attributes if HTML5 sectioning elements cannot be used.
  • Ensure all content on the page is contained within a landmark region
  • Ensure only one instance of:
    • role="banner" or <header> (when <header> is a child of <body>). A <header> is not considered a banner when it is the child of <article>, <aside>, <main>, <nav> or <section>.
    • <footer>
    • <main>
  • Ensure <header> (when the banner), <footer>, <main> are direct children of <body>
  • Limit the use of <nav> to primary and secondary navigations
    • Use the aria-label attribute to differentiate multiple (different) <nav> items.
    • Use the aria-labelledby attribute to label a <nav> region that begins with a heading element
    • Provide short and descriptive labels
  • The landmark role is declared by a screen reader along with the name, if any. Do not use the landmark role (e.g., “navigation”) as part of the name; for instance, the label is “Site” not “Site Navigation” for a navigation landmark.
  • Use role="search" rather than role="form" when the form is used for search functionality.

Headings

  • Provide headings for each page
  • Use heading elements <h1> - <h6> for all headings
  • Don’t use heading elements for text that is not a heading. Instead, use CSS to change font size or styles
  • Ensure headings are concise and meaningful (they describe the topic or purpose)
  • Ensure headings follow a hierarchical sequence without skipping any levels
  • Provide one <h1> heading that describes the page content

Content structure

  • Ensure an <article> element is used in a web page for self-contained composition
  • For thematic grouping of content, ensure the <section> element is used.
  • Use the paragraph (<p>) element for paragraphs.
  • Use quotes:
    • For longer and more complex quotes, use the <blockquote> element.
    • For shorted quotes, that are usually embedded in another sentence, use the inline quote <q> element.
  • To indicate that content has strong importance or urgency, use the <strong> element.
  • For words that have a stressed emphasis compared to surrounding text, use the <em> element.
  • Expand abbreviations on first use on the page, with the abbreviation accompanying the expansion, one or the other in brackets
  • Ensure each web page defines its topic or purpose in a descriptive title, set in a <title> element in the HTML <head> element. Optionally, identify the larger collection of Web pages after the page description.
  • When phrasing instructions on where to find or how to use content, avoid descriptions that rely exclusively on being able to see or hear. Be sure to include a text label in the instruction and at the item of interest.

Language

  • Add a lang attribute to the <html> element to set the default language for the entire page.
    • For English: <html lang="en">
    • For French: <html lang="fr">
    • For other languages, choose the appropriate language code from ISO-639. Use the shortest available language code.
  • You may add a region subtag if you need to say that this is the language as spoken somewhere in a particular; e.g., lang="fr-CA" indicates French as spoken in Canada.
  • Insert a lang attribute anywhere the default language changes to a different language.
  • XHTML should use both the lang attribute and the xml:lang attribute.

Lists

  • HTML provides three list structures, each with specific semantics:
    • Use unordered lists (<ul>) when the order of the items is irrelevant. Each list item (<li>) in an unordered list is marked with a bullet.
    • Use ordered lists (<ol>) for sequential information. Each list item (<li>) is numbered by the browser.
    • Use description lists (<dl>) to group related terms (<dt>) and their descriptions (<dd>).

iFrames

  • If the iframe consists of decorative images or JavaScript, hide it from screen readers by setting the aria-hidden="true" attribute on the <iframe> element.
  • If the <iframe> contains content intended for the user:
    • Give the <iframe> element a descriptive title attribute value.
    • Ensure the <iframe> title attribute value is unique across iframes on the page.

Parsing and validity

  • Elements have complete start and end tags.
  • Elements are nested according to their specifications.
  • Elements do not contain duplicate attributes.
  • Any IDs are unique.
Back to top