Guide: How to Enhance HTML Table Accessibility using Markup
Web accessibility refers to the design of web applications in a way that can be easily used by people with a visual impairment. Some of these users rely on screen readers to read the content of the web pages. The screen readers interpret the code on the page and read the content to the user
The range attribute
Even for a simple table with What does scope attribute do? According to W3C: In others words it helps us associate the data cells with their corresponding header cells. Please note that in the above example
Complex tables
Now let’s move to a more complex table.
Above is a table of students in a class and their grades in practice and theory for three subjects. Here’s the HTML code for it. The table used rowspan and colspan to create merged headers for the data cells. In the above table, each data cell, i.e. each of the table cells displaying the grade, is associated with three types of information:
To which student does this grade belong? Which subject does this grade belong to? Is this grade for the Practical or Theory section?
Those three information are structurally and visually defined in three different header cell types:
Student name Topic Practical or theory
Let’s define the same for accessibility. In the above format, we added range to cells containing header information about the data cells.
Column group
The cells Biology, Chemistry and Physics are associated with a group of two columns each (theory and practice). Adding only colspan = ”2 ″ does not create the column groups, it just indicates that the specific cell should occupy two cells of space. To create a column group, you must use colgroup and then add the span attribute to it to indicate how many columns that column group contains. The mark with scope = “col” helps assistive technology identify that the cells that follow in the same column are student names. Likewise, cells such as with scope = “colgroup” users identify that the data in the cells that follow in the column group it spans is associated with that particular topic. Then there is the flag with scope = “row” which defines that the cells that follow it in the same row contain the “grade” information related to that particular student name.
Row groups
Now let’s go to another example, this example has almost the same table as above, except we switch row and column headings so we can work with row groups. Now that we have our example to work with, let’s start creating row groups like we did for the column groups in the previous example. However, row groups cannot be created with a tag such as colgroup because there is no rowgroup element. HTML rows are generally grouped with We’ve added the “Practical” and “Theory” rows in each body, creating row groups with two rows each. We’ve also added the scope = ”rowgroup” to the cells containing the header information about those two rows (this is the subject name the numbers belong to in this case).
How to Enhance HTML Table Accessibility using Markup: benefits
Faq
Final note
I hope you like the guide How to Enhance HTML Table Accessibility using Markup. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the How to Enhance HTML Table Accessibility using Markup, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “How to Enhance HTML Table Accessibility using Markup”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide How to Enhance HTML Table Accessibility using Markup, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel. Compsmag has Proudly Shared Free Information Since 2014.
