Skip to content
Biome
Docs Blog Playground

noHeaderScope (since v1.0.0)

Diagnostic Category: lint/a11y/noHeaderScope

Sources:

The scope prop should be used only on <th> elements.

Examples

Section titled Examples

Invalid

Section titled Invalid
<div scope={scope} />
code-block.jsx:1:6 lint/a11y/noHeaderScope  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using the scope attribute on elements other than th elements.
  
  > 1 │ <div scope={scope} />
      │      ^^^^^^^^^^^^^
    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={scope}·/>
      │      --------------  

<div scope="col" />
code-block.jsx:1:6 lint/a11y/noHeaderScope  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using the scope attribute on elements other than th elements.
  
  > 1 │ <div scope="col" />
      │      ^^^^^^^^^^^
    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"·/>
      │      ------------

Valid

Section titled Valid
<th scope={scope}></th>
<th scope="col"></th>

Accessibility guidelines

Section titled Accessibility guidelines
Section titled Related links