no-redundant-landmark-role.md

no-redundant-landmark-role

✅ The extends: 'recommended' property in a configuration file enables this rule.

🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

If a landmark element is used, any role provided will either be redundant or incorrect. This rule adds support for landmark elements, to ensure that no role attribute is placed on any of the landmark elements, with the following exceptions:

• a nav element with the navigation role to make the structure of the page more accessible to user agentss
• a form element with the search role to identify the form's search functionality

Examples

This rule forbids the following:

<header role="banner"></header>

<main role="main"></main>

<aside role="complementary"></aside>

<footer role="contentinfo"></footer>

<form role="form"></form>

This rule allows the following:

<form role="search"></form>

<nav role="navigation"></nav>

Configuration

• boolean -- if true, default configuration is applied

• object -- containing the following property:

  • boolean -- checkAllHTMLElements -- if true, the rule checks for redundancy between any semantic HTML element with a default/implicit ARIA role and the role provided (default: false) (TODO: enable by default in next major release)

References

• Landmark Roles (WAI-ARIA spec)
• Using ARIA landmarks to identify regions of a page
• Document conformance requirements for use of ARIA attributes in HTML
• ARIA Spec, ARIA Adds Nothing to Default Semantics of Most HTML Elements