Rule n° 235 - Elements that are visually displayed as lists are tagged in an appropriate way in the source code.

For a content producer, adding dashes, "*" or bullets in the form of images is very tempting. Yes, but the magic of HTML elements and the skill of browsers already allow you to make your own lists.

#Accessibility #Development #Editorial #Structure and code
Previous Next

Goal

  • Enable browsers and technical aids to identify lists and then reproduce them accurately, in order to facilitate their understanding by users.
  • Improve the semantics of page content and its reusability.
  • Improve the accessibility of content for people with disabilities.

Solution technique

Either use the appropriate HTML elements:

  • ul, li for unordered listings;
  • ol, lifor ordered listings;
  • dl, dt, dd for listings of definitions or descriptions.

Or use the ARIA attributes to give the semantics of an unordered or ordered listing with more generically tagged content:

  • give the listing container a role="list" attribute;
  • give each element of the list a role="listitem" attribute;
  • (there is no equivalent to definition listings via an ARIA role).

Find out more:

Moyen de contrôle

For each page containing a listing:

  • Check the source code of content presented in listing form (characterised by the presence of line breaks and list markers such as bullets or numbers) using a code inspector.
  • Check whether the source code of these visible listings includes the HTML elements corresponding to the type of listing in question: ul, li for an unordered listing (bulleted listing), ol, li for an ordered listing (numbered listing) and dl, dt, dd for a listing of definitions or, failing that, the ARIA roles list and listitem.