In this short video, I will explain how to make tables on a web page more accessible to users. It is quite simple for sighted users to look at a data table and understand its information. Screen readers, however, only read one cell at a time, possibly making it very confusing for visually impaired users. One way to limit the confusion is to designate row and/or column headers. This can be achieved by using the <th> tag for table headers and the <td> tag for table data. One way to associate each data cell with the correct headers is to implement the “scope” attribute. The “scope” attribute should only be used in conjunction with simple tables such as this one. By using the “scope” attribute, you tell the browser, as well as the screen reader, that everything in the column is related to the header at the top and everything in the row is related to the header on the left. Notice in the code how the “scope” attribute is utilized. This is how the browser and screen reader know which header the data in the cells are associated with. For more complex tables with more than one logical level, like the one shown here, it is recommended to use the “headers” and “id” attributes. This method allows the screen reader to announce each heading that the data cell is associated with, even when there are more than two headings. Notice in the HTML markup that each heading is given an “id”. Then those “id”s are used in the “header”s before each data cell. This is how the screen reader knows which heading to announce before each data cell. Although the “header” and “id” attributes work to solve this issue, it is recommended not to have a table with more than one logical level. Some screen readers do not handle the multilevel dimensions with spanned rows and columns very well. Even with the headers properly marked, screen readers could struggle to differentiate between cells. It is also good practice to provide titles for tables, as well as summaries. Hope this video helps. Thanks for watching!