section element role semantics

Definition section element must only have role semantics of alert, alertdialog, application, contentinfo, dialog, document, log, main, marquee, presentation, region, search or status.
Purpose
  • The section element has role restrictions as part of its definition in the W3C HTML5 Specification.
  • The section element can be used to for identifying many types of of sections and sub sections within a web page and a limited number of widget roles, review the techniques for the possible uses of the section element with ARIA role semantics.
  • The section element should not be used when there is a more semantically meaningful elements available (e.g. main, header, footer,..)
  • The default (e.g. no role attribute) is role="region", if the section element has an accessible name it will be considered a landmark in the document.
Required No for HTML4 Legacy Techniques ruleset mapping
WCAG 2.0 Success Criteria

1.3.1 Info and Relationships (Level A, Primary Success Criterion)

Rule Category Styling/Content
Scope Element
Target Resources section element
  • section
Techniques
  • If the content of the section element is used as a sub-section of another landmark use role="region" with an accessible name to identify the sub-section.
  • If the content of the section element is used to provide a time sensitive text message to the user that is very important for the user to know use the live region role="alert" on the section element.
  • If the content of the section element is used to create a error dialog box with a message that is very important for the user to know use the role="alertdialog" on the section element.
  • If the content of the section element is primarily form controls and/or widgets use role="application" on the section element.
  • If the content of the section element is used as the container for footer information that is repeated on most pages of the website use role="contentinfo" on the section element.
  • If the content of the section element is used to create a non-error message related dialog box use the role="dialog" on the section element.
  • If the content of the section element is primarily composed of non interactive text and images and the section element is embedded inside an container element with role="application"" use the role="document" attribute on the section element.
  • If the content of the section element is used as the container a list of messages use role="log" on the section element.
  • If the content of the section element is used as the container for the main content of the page use role="main" on the section element.
  • If the content of the section element is used as for periodically changing text on the page that is considered more informational (e.g. news tag line) use role="marquee" on the section element.
  • If the content of the section element is NOT being used as the container for a region landmark use role="presentation" on the section element to remove it from landmark navigation.
  • If the content of the section element is used as the container for sub section within a landmark use role="region" on the section element.
  • If the content of the section element is used as the container for a search the website form use role="search" on the section element.
  • If the content of the section element is used as the container for a status message that will be automatically be updated on some pending transaction use role="status" on the section element.
  • If the content of the section element does not meet any of the other techniques do not use the role attribute.
Informational Links