Simplify tables and include a header row and/or column and a summary, either in a caption or alt text.
When sighted users focus on a table cell, they are able to visually determine which row and column the cell is in by scanning up and down or left and right. This adds context to what the value in a particular cell means.
On the other hand, a screen reader can only read aloud each cell one by one from left to right and top to bottom.
If the table is not formatted correctly, there is no easy way to determine what label a particular value in a cell might have.
Example
If you are not a screen reader user, pretend that you are and you want to find the location of a biology 205 class. You find a webpage with an incorrectly formatted table and you hear the following text read out loud. Do you know where the class will be held?
Table with 10 columns and 7 rows. Department Code, Class Number, Section, Max Enrollment, Current Enrollment, Room Number, Days, Start Time, End Time, Instructor, BIO, 100, 1, 15, 13, 5, Mon,Wed,Fri, 10:00, 11:00, Magde, 100, 2, 15, 7, 5, Tue,Thu, 11:00, 12:30, Indge, 205, 1, 15, 9, 6, Tue,Thu, 09:00, 10:30, Magde, 315, 1, 12, 3, 6, Mon,Wed,Fri, 13:00, 14:00, Indge, BUS, 150, 1, 15, 15, 13, Mon,Wed,Fri, 09:00, 10:00, Roberts, 210, 1, 10, 9, 13, Mon,Wed,Fri, 08:00, 09:00, Rasid.
Creating Accessible Tables from WebAIM
Use Tables to Display Data
Tables traditionally show the relationship between two or more items in rows and columns. But in the early days of the internet, Web designers and developers commonly used tables to control the layout of webpage content because they couldn't easily do so with HTML.
Similarly, content creators occasionally utilize tables in word-processing documents to dictate content placement rather than to signify data relationships.
However, screen reader software may struggle to accurately interpret the sequence of cells in such tables. Nowadays, advancements in webpage design, such as CSS, and tools available in document creation software offer more effective control over page layout, rendering the use of tables for this purpose unnecessary.
Do
Use tables to present information in a grid, or matrix, with columns or rows that show the meaning of the information.
Don't
Don't use tables to make your webpage look a particular way. Layout tables on webpages do not pose inherent accessibility issues, but it is more challenging to make sure screen reader software reads the cells in the proper order.
Never use tables to lay out a page in a Google or Microsoft Word document. While these tables can be hidden from visual users by simply eliminating the borders between cells, they cannot be hidden from screen readers.
Users who are blind or visually impaired can process the information displayed in a table when their screen reader software reads which row and column header each cell refers to before the content in the cell.
Do
Designate at least one row and/or column header using the table formatting tools in your web content management system or document creation software.
Use the <th> element to mark up table headers in HTML.
Simple tables are easier for users of assistive technologies to understand and navigate, because screen readers essentially ignore that the content is inside a table. HTML code maintenance may be easier for simple tables as well.
Do
Include a maximum of one header row and one header column.
Spell out abbreviations or acronyms, or use the <abbr> or <acronym> tags in HTML to ensure accessibility.
If your table has multiple header rows, merged cells, or another table embedded in it, split it into two or more simple tables.
If you do create a complex data table on a webpage, use the <scope> tag to programmatically associate the data cells with the appropriate headers.
Don't
Don't merge cells.
Don't include a table within another table.
When they encounter empty cells within tables, both visual and screen reader users may wonder if data was omitted by mistake. In addition, screen reader software may skip reading empty data cells, causing mismatches between header rows and their corresponding data cells.
Do
Include text such as "not applicable," "none," etc. to indicate that there is no data in empty cells.
Don't
Don't leave any table cells empty.