3 ms·
> Whatever you do, don’t be tempted to change the table’s display property value to grid, just to make styling easier. You’ll break the baked-in accessibility t
by gedy 2y ago
> Whatever you do, don’t be tempted to change the table’s display property value to grid, just to make styling easier. You’ll break the baked-in accessibility that browsers provide for free, rendering your table inaccessible to users of assistive technologies.
Is this accurate? The accessibility for things like screen readers comes from the HTML tags, not CSS afaik.
- Elfener 2y agoThis reminded me of a web dev competition's task I saw once where the instructions said both "Always use semantic HTML for proper accessibility" and "In this exercise, you must create the table using grid and flexbox". I thought that was weird, but now I think you might be right - if you use <table> and add display: grid to it then it might preserve the default role="row" and similar accessibility things.
- lelandfe 2y agoCSS can impact screen reader accessibility. Most obviously ‘display: none’ will remove the element from the outline From a quick google it appears the article is correct: https://www.tpgi.com/short-note-on-what-css-display-properties-do-to-table-semantics/ https://www.tpgi.com/short-note-on-what-css-display-properti... You can return the structure with judicious use of role attributes, but it’s surely easier to just keep a table a table.
- cricketminister 2y agoFrom MDN[1]: > In some browsers, changing the display value of a <table> element to block, grid, or flex will alter its representation in the accessibility tree. This will cause the table to no longer be announced properly by screen reading technology. 1. <https://developer.mozilla.org/en-US/docs/Web/CSS/display#tables https://developer.mozilla.org/en-US/docs/Web/CSS/display#tab...>
- gedy 2y agoI'm sure there are Very Important Reasons but seems like a poor design. Maybe "display: none" makes some sense, but the rest are visual.