DEV Community

Discussion on: Make readable table headers with CSS

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

You might not be aware, but when you change table elements display property, you break their semantics and break their accessibility. To retain that, you need to add in a role="..." for each table element (<table>, <tr>, <th>, <td>, etc) with the correct (default) role for each of them. It adds a little to the overall HTML markup, but it does mean that those people who rely on screen readers can still understand the table as a table.

Collapse
 
cchana profile image
Charanjit Chana

Interesting, I didn’t know that but nice that the fix is pretty simple. Still getting to grips with stuff I’ve not had on my radar for quite some time around accessibility. Thanks for commenting 🙂

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

Yes, I agree, it's not something that many courses or online tutorials on languages/frameworks often give any thought to, so it's not something many developers know about. I must admit, it took me quite some years to really understand the importance of it.