{"id":21165,"date":"2023-03-21T08:00:00","date_gmt":"2023-03-21T13:00:00","guid":{"rendered":"https:\/\/theadminbar.com\/?post_type=accessibility-weekly&p=21165"},"modified":"2024-02-10T06:59:21","modified_gmt":"2024-02-10T12:59:21","slug":"the-html-behind-accessible-tables","status":"publish","type":"accessibility-weekly","link":"https:\/\/theadminbar.com\/accessibility-weekly\/the-html-behind-accessible-tables\/","title":{"rendered":"The HTML Behind Accessible Tables"},"content":{"rendered":"\n

Last week, as I was auditing a website for accessibility, I came across a table that was completely coded in divs. \ud83d\ude31<\/p>\n\n\n\n

\"Code <\/picture><\/figure>\n\n\n\n

This was a pricing table that was styled quite nicely, and visually looked like a table. To a sighted person, nothing would be wrong because they could easily scan across rows and down columns to see what feature applies to which price option.<\/p>\n\n\n\n

\"Screenshot <\/picture><\/figure>\n\n\n\n

Why Tables Shouldn\u2019t Be Built With Divs<\/strong><\/h2>\n\n\n\n

To understand why you (or the plugins you choose) shouldn\u2019t build tables with divs, it\u2019s important to understand how a screen reader user experiences an HTML table.<\/p>\n\n\n\n

Screen readers allow for special interaction when navigating through a correctly coded table to help the user more quickly find the information they are looking for and interpret what they are hearing.<\/p>\n\n\n\n

    \n
  • With a screen reader, you can use the up and down arrows and right and left arrows to skip through cells quickly.<\/li>\n\n\n\n
  • When you enter a table cell, the screen reader will read out the row and column number and the headings for that row and column, in addition to the data that is the cell. This provides extra context making the table more understandable.<\/li>\n<\/ul>\n\n\n\n

    In the table shown above, coded with divs, you can only use the left and right arrow keys. That means there is no way to go down a single column and hear all the features included with that specific plan.<\/p>\n\n\n\n

    It also fails to give context in each cell, so you only hear the plan names (Free, Pro, Team, Enterprise) once, and you somehow have to count your tab-stops to try and determine which plan a specific benefit applies to.<\/p>\n\n\n\n

    With a pricing table coded in this way, it would be impossible for a user to compare and choose a pricing plan without asking a sighted person to help them.<\/p>\n\n\n\n

    The Right Way to Code a Table<\/strong><\/h2>\n\n\n\n

    The right way to code a table is to\u2026use HTML <table> tags. Sometimes the most simple answer is the best solution, and this is definitely one of these times. Using <table> tags also has the added benefit of saving you from having to write a CSS to position divs in a tabular layout.<\/p>\n\n\n\n

    Here are the best practices to follow when coding an accessible table:<\/p>\n\n\n\n

      \n
    1. Use semantic HTML: Use HTML tags that clearly define the structure and purpose of each element in the table. For example, use <table> to define the table, <thead> to define the table header, <tbody> to define the table body, and <th> to define table headers.<\/li>\n\n\n\n
    2. If you have multiple headers on your table, for both columns and rows, ensure you\u2019re using <th> tags for the row headers too (not just the column headers, a common mistake), and use the scope attribute to indicate what the header applies to.<\/li>\n\n\n\n
    3. Make the table responsive and ensure it can adapt to different screen sizes, both mobile phones and large monitors, and doesn\u2019t extend off the page if the website is zoomed in to 200% or 400%.<\/li>\n<\/ol>\n\n\n\n

      Here is an example code for the pricing table above, with headers that are scoped to apply across rows and columns.<\/p>\n\n\n\n