How to design accessible tables?
Find the handy tips to design accessible tables.
Tables are one of the most commonly used formats to represent data in a categorized and understandable manner. Tables help us to present complex information in an easily understandable and relatable manner. It helps us to display content in more meaningful ways. Tables are used to organize data in a logical relationship in grids.
Tables are an integral part of the content design. Can a simple table cause an accessibility issue? Are there any rules to follow while designing a table? If you thought it is something that you can design closing your eyes and needs no special attention, think again. There are a few designs that can make tables inaccessible.
For example, look at the table below. Do you see any issue with it? This is one of the common table design. It is cool, minimal and easy on the eyes. Now imagine how will an assistive technology (screen-reader) read this table? Can it read the tick marks?
Maybe not. Relying on visual cues alone is not a good idea to create an accessible table.
Some accessibility best practices to remember while designing a table are:
- The table should have a caption describing what the table is intended to communicate
- Each column and row should have a separate header
- Have a flatter table structure, which means a simple table. Do not have a table within tables with multiple levels of header cells.
- Keep the horizontal scroll minimal
- Make sure there are no merged cells within a table
- Provide a summary of the table
- Do not rely on visual cues alone to communicate the information
- Use proportional size over absolute size
- Do not put table images with a lot of information and ensure tables are handled in code
- Ensure information, its structure and relationships are conveyed well either through good labels or through code.
- Keep the sequence of content in a meaningful way.
Accessible tables need HTML markup that indicates header cells and data cells to defines their relationship. Assistive technologies (screen-readers ) use this information to provide context to users.
Designers are the architects of the modern digital world, what you do impacts many lives. When you are in such a powerful position, knowing accessibility and creating designs that are accessible makes a big difference to your users. Let’s do our bit to make this a better place.
