Tables should be properly formatted to include headers so screen readers can identify what they are, and read the data in a way that’s helpful to the users.
Accessibility Best Practices
Use the Rich Text EditorTable Tool to create and format tables properly
Designate a table header in the Table Properties
Include a Table Caption
Table Tips:
Check how your tables look if you make the browser window narrower, not all tables are readable if using a smaller screen.
Avoid using images or icons inside tables, words are best.
If you have images in a table the images will need to have alt-text
Tables are not used for layout
Tables shouldn’t be used for layout, such as creating multiple text columns or image placement.
Tables that are used for layout can be difficult for screen reader users and also behave unexpectedly on smaller screens.
The Rich Text Editor includes a table builder, which makes it easy to create and manage tables in your guides. Tables are best used to organize and present data and information, rather than for laying out content. Try to avoid using tables as a way to create columns inside of a box. Instead, consider using the Bootstrap grid system or the CSS grid.
There are two basic uses for tables on the web: data tables and layout tables. The original intended use of HTML tables was for tabular data. A table is a data table when row headers, column headers, or both are present.
Summary: Accessible tables are simple, rather than complex, have an identified header row, and include a table summary, either as a caption or as alt text. These techniques help screen reader users read the information contained in the table.
