noHeaderScope (HTML)
Summary
Section titled “Summary”- Rule available since:
v2.3.0 - Diagnostic Category:
lint/a11y/noHeaderScope - This rule is recommended, meaning it is enabled by default.
- This rule has an unsafe fix.
- The default severity of this rule is error.
- Sources:
- Inspired from
jsx-a11y/scope
- Inspired from
How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "noHeaderScope": "error" } } }}Description
Section titled “Description”The scope prop should be used only on <th> elements.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<div scope="col"></div>code-block.html:1:6 lint/a11y/noHeaderScope FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid using the scope attribute on elements other than th elements.
> 1 │ <div scope="col"></div>
│ ^^^^^^^^^^^
2 │
ℹ The scope attribute is used to associate a data cell with its corresponding header cell in a data table,
so it should be placed on th elements to provide accessibility to screen readers.
ℹ Follow the links for more information,
WCAG 1.3.1
WCAG 4.1.1
ℹ Unsafe fix: Remove the scope attribute.
1 │ <div·scope="col"></div>
│ -----------
<div scope></div>code-block.html:1:6 lint/a11y/noHeaderScope FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid using the scope attribute on elements other than th elements.
> 1 │ <div scope></div>
│ ^^^^^
2 │
ℹ The scope attribute is used to associate a data cell with its corresponding header cell in a data table,
so it should be placed on th elements to provide accessibility to screen readers.
ℹ Follow the links for more information,
WCAG 1.3.1
WCAG 4.1.1
ℹ Unsafe fix: Remove the scope attribute.
1 │ <div·scope></div>
│ -----
<th scope="col"></th><th scope></th>Accessibility guidelines
Section titled “Accessibility guidelines”Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.