Best Practices


Table Compliance and Accessibility

Accessibility & Compliance Tips

  • Ensure that all cells have data. If a cell does not have data, add “N/A” to indicate to users with screen readers that the cell is empty. If the table has empty cells, then the screen reader will only pause briefly, which is insufficient in indicating a lack of data.
  • Ensure that header rows universally apply to all related information in underlying cells. These headers will be read each time a cell under them is read. For instance, “Vitamin A.” “Vitamin B3.” Chemical Name Retinol” Chemical Name Ascorbic Acid.”
  • Table Header row and columns in Editor columns are marked <th> as opposed to <td> for table data cells. If you want to edit the first column to have a header style, narrow the first column (so that on the code side it’s easier to locate) and then change each <td> tag to <th>.
  • Make tables as small and as simple as possible. This lessens the possibility that a user will get confused or a screen reader will get stuck in one cell. It is better to break a table up (I.e., Vitamins and functions of vitamin a as two separate tables) versus putting the functions of vitamin a table inside the Vitamin A Sources cell.
  • Tables in Editor widgets cannot have header columns easily applied with one click- this means that if you want the information to apply universally across, you need to put it each cell or code in the header column (see above). For instance, if you wanted each item in a row to say “September 6th” – For instance, September 6th Agenda, September 6th Minutes, September 6th Video, you need to write it like that. You cannot just write September 6th Agenda in the first cell, and then “Minutes” in the next, and “Video” in the last. 

Important Note

  • Use the Table Insert tool in the Editor Widget instead of the Table Widget. The Table Widget is a fairly simple tool, meaning it is not as robust as the Table Insert tool in the Editor Widget, as described below, nor is it as compliant. The Table Widget does not use the CSS classes that Screen Readers require to properly translate the code. The Editor Widget uses the right CSS classes to allow Screen Readers to automatically translate and work. 


I'd Like to Request an Enhancement

0 out of 0 found this helpful


Article Feedback