💼 This rule is enabled in the 📋 template-lint-migration config.
Headings relay the structure of a webpage and provide a meaningful, hierarchical order of its content. If headings are empty or its text contents are inaccessible, this could confuse users or prevent them accessing sections of interest.
Disallow headings (h1, h2, etc.) with no accessible text content.
This rule forbids the following:
<template><h*></h*></template><template><div role='heading' aria-level='1'></div></template><template><h*><span aria-hidden='true'>Inaccessible text</span></h*></template>This rule allows the following:
<template><h*>Heading Content</h*></template><template><h*><span>Text</span><h*></template><template><div role='heading' aria-level='1'>Heading Content</div></template><template><h* aria-hidden='true'>Heading Content</h*></template><template><h* hidden>Heading Content</h*></template>If violations are found, remediation should be planned to ensure text content is present and visible and/or screen-reader accessible. Setting aria-hidden="false" or removing hidden attributes from the element(s) containing heading text may serve as a quickfix.