Tables

Why Table Structure Is Important for Website Accessibility

Using proper table structure is essential for making data accessible to users who rely on assistive technologies like screen readers. Tables should be used specifically for presenting data, not for layout, and must include clear headers (<th>) and logically organized rows and columns. Screen readers use these headers to help users understand the relationships between different cells, enabling them to interpret the information accurately.

To ensure accessibility, always include a <caption> to describe the purpose of the table and use the <scope> attribute to define whether a header applies to a row or column. Avoid merging cells or creating overly complex tables unless necessary, as this can make it difficult for assistive technologies to interpret the data correctly. A well-structured table helps all users, especially those with visual or cognitive impairments, access and understand your content with ease.

Creating an Accessible Table in Sitecore Content Editor

To build an accessible table in Sitecore, follow these steps to ensure screen readers and other assistive technologies can understand and navigate the content effectively:

1. Open the Rich Text Editor:
   
   
   • Navigate to the item in Sitecore where you want to insert the table.
     
     
   • In the Content section, click into the appropriate rich text field and then click the "Edit HTML" or "Show Editor" button to open the Rich Text Editor.
     
     
2. Insert a Table:
   
   
   • Use the table icon in the toolbar to insert a new table (e.g., 3 rows x 3 columns).
     
     
3. Add a Table Caption (optional but recommended):
   
   
   • Switch to the HTML view in the editor and add a <caption> tag directly below the opening <table> tag:
     
     

4. 
   Use Table Headers:
   
   
   • Make sure the first row contains <th> elements instead of <td> to define column headers. You may need to manually adjust the HTML like this:
     
     

5. 
   Add Scope Attributes:
   
   
   • For column headers, use scope="col". For row headers, use scope="row". For example:
     
     

6. Save and Publish:
   
   
   • Click Accept or OK to close the editor, then Save and Publish your item.
     
     

✅ Resulting Accessible Table Example

This approach ensures your table is both semantic and accessible, improving usability for all users.