Potential A11y Violation:
Missing heading text
Point of Failure
Every heading element (h1-h6) should contain meaningful content. Empty heading elements will cause a violation of the associated WCAG Success Criteria.
Available Automation Evaluation
In checking known available linting and testing tools, these are our findings.
Linting Exists
Automated linting exists in some JS frameworks:
- Ember: See the
ember-template-lintlibrary for theno-empty-headingsrule. - Lit: See the
eslint-plugin-lit-a11ylibrary for theheading-has-contentrule. - React (JSX): See the
eslint-plugin-jsx-a11ylibrary for theheading-has-contentrule. - Vue: See the
eslint-plugin-vuejs-accessibilitylibrary for theheading-has-contentrule.
Testing Exists
Automated testing exists. See the axe-core library for the empty-heading rule.
Other Test Methods
In addition to automated tests, there are other types of tests that could be conducted to prevent this potential violation.
Developer Authored Test Could Exist
Developers should make sure that their code does not violate this rule, and try to write a test that would prevent a regression in accessibility if the code is later changed. Alternatively, integration of automated accessibility tests would also prevent violation of the related Success Criteria.
Manual Test Could Exist
Review page and ensure the point of failure does not exist, inspecting the DOM where necessary.