Deepcrawl is now Lumar. Read more.
DeepcrawlはLumarになりました。 詳細はこちら

Table has incorrect scope attribute (A11y Best Practice Violation)

How to fix the web accessibility issue of tables with incorrect scope attributes — Lumar Web Accessibility Wiki

Tables - Lumar Accessibility Thumbnail
NULL NULL
 

What does this accessibility issue mean?

Accessibility issue summary: Table has an incorrect scope attribute

Table scope attributes (for example, <th scope=”col”>) help screen readers understand the structure and meaning of a table so its content can be presented to users with visual impairments. 

Table scope attributes of <th> elements should be valid — which is to say, table scope attributes should include a scope value of one of the following:

  • <th scope=”row”>
  • <th scope=”col”>
  • <th scope=”rowgroup”>
  • <th scope=”colgroup”> 

Solution:

Ensure that the scope attribute is used correctly on tables.

Issue details
  • WCAG Level BP
  • Severity: Critical
  • Category: Tables (BP)
  • Rule ID: scope-attr-valid

Lumar can help you find & resolve this website accessibility issue — & many others — on your own site. Speak to our team to get started with the platform.

Get a Lumar demo

 

Example HTML violation: Table has incorrect scope attribute (A11y Best Practice Violation)

 <table>
   <tbody>
     <tr>
       <th scope="column">Item</th>
       <th scope="column">Price</th>
       <th scope="column">Quantity</th>
     </tr>
     <tr>
       <td>iPad</td>
       <td>$399</td>
       <td>10</td>
     </tr>
   </tbody>
 </table>

Reason for Violation:The scope attribute in the th elements is incorrectly set to 'column'. The correct value to provide column association is 'col'.To fix the above issue, we need to correct the scope attribute value to 'col'.

The corrected HTML is as follows:

 

How to fix "Table has incorrect scope attribute (A11y Best Practice Violation)" issue

 <table>
   <tbody>
     <tr>
       <th scope="col">Item</th>
       <th scope="col">Price</th>
       <th scope="col">Quantity</th>
     </tr>
     <tr>
       <td>iPad</td>
       <td>$399</td>
       <td>10</td>
     </tr>
   </tbody>
 </table>

In this corrected code, the scope attribute is correctly set to 'col', providing proper association of table headers to columns for screen readers, thus improving the accessibility of the web page. Note that this is important to ensure that people who use screen readers are able to understand and navigate the table content efficiently.

 
Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform