Developers who choose HTML elements that best describe a screen’s structure and semantics often don’t know how browsers use their CSS to break those semantics.

1. CSS Display Properties
versus
HTML Semantics

2. • I’ve written some stuff,
• Member of W3C,
• Building for the web
since 1993,
• Learn more at
AdrianRoselli.com,
• Avoid on Twitter @aardrian.
About Adrian Roselli

3. CSS Display Properties
• The following can override native semantics in the browser:
• display: block
• display: inline
• display: grid
• display: flex
• display: contents

4. CSS Display Properties
• Nothing in the HTML / CSS specifications mandates this,
• Does not work in reverse:
• display: table
• display: table-cell

5. Assistive Technology (AT)
• Browsers do not convey correct semantics to AT,
• Users who rely on these semantics can be stranded:
• Understanding content,
• Navigating a page.

6. Tables as a Canary
• Breaking semantics of any single required child element can
break entire table:
• A missing row, column or row header;
• The parent table even with good rows and cells.

8. Accessibility Tree
• A sub/super-set of the DOM,
• Includes UI objects of browser & objects of the document,
• Created in tree for every DOM element that:
• Fires an accessibility event,
• Has a property, relationship or feature which needs to be exposed.
• Is abstracted for dev tools.

9. Accessibility Tree: <table>

10. Accessibility Tree: <caption>

11. Accessibility Tree: <th>

12. Accessibility Tree: <td>

13. Chrome 86 / Windows 10
CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button>
display: flex ✔ ✔ ✔ ✔
display: grid ✔ ✔ ✔ ✔
display: block ✔ ✔ ✔ ✔
display: inline-block ✔ ✔ ✔ ✔
display: contents ✔ ❌ ✔ ✔

14. Firefox 82 / Windows 10
CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button>
display: flex ❌1 ✔ ✔ ✔
display: grid ❌1 ✔ ✔ ✔
display: block ✔ ✔ ✔ ✔
display: inline-block ✔ ✔2 ✔ ✔
display: contents ✔ ✔2 ✔ ✔3

15. Safari / macOS 10.15.6
CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button>
display: flex ❌1 ✔4 ✔ ✔
display: grid ❌1 ✔4 ✔ ✔
display: block ❌2 ❌ ✔ ✔
display: inline-block ❌2 ❌ ✔ ✔
display: contents ❌3 ❌ ❌ ❌

16. Chrome 86 / Android 11
CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button>
display: flex ✔ ✔ ✔ ✔
display: grid ✔ ✔ ✔ ✔
display: block ✔ ✔ ✔ ✔
display: inline-block ✔ ✔ ✔ ✔
display: contents ✔ ❌1 ✔ ✔

17. Safari / iOS 14
CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button>
display: flex ❌ ✔ ✔ ✔
display: grid ❌ ✔ ✔ ✔
display: block ❌1 ❌2 ✔ ✔
display: inline-block ❌1 ❌2 ✔ ✔
display: contents ❌1 ❌2 ❌ ❌3

18. display: table
• display: table, table-caption, table-row, table-cell;
• Each of these will add layout-table semantics in Chrome v80+,
• There is no CSS display property for col/row headers,
• Requires a well-structured DOM,
• Not a workaround, fix, or way to do <div>s-as-tables.

20. display: table
• As LayoutTable, LayoutRowTable, LayoutCellTable;
• JAWS, Narrator will read this as a table,
– But without col/row headers,
• NVDA, VO, TalkBack will not read this as a table.

21. ARIA TO THE RESCUE?

22. ARIA Table Roles
• <table role="table">
• <caption role="caption">
• <thead|tbody|tfoot role="rowgroup">
• <tr role="row">
• <td role="cell">
• <th scope="col" role="columnheader">
• <th scope="row" role="rowheader">
• Cannot address re-ordered
content,
• Cannot address hidden
content.

23. ARIA Table Roles
• Do not use ARIA grid roles,
• Test with a screen reader,
• If your tables are generated from script, update the script.

24. Table with ARIA
<table id="Books" role="table">
<caption id="Cap1" role="caption">Books I May or May Not Have Read</caption>
<tr role="row">
<th role="columnheader">Author</th>
<th role="columnheader">Title</th>
<th role="columnheader">Year</th>
<th role="columnheader">ISBN-13</th>
<th role="columnheader">ISBN-10</th>
</tr>
<tr role="row">
<td role="cell">Miguel De Cervantes</td>
<td role="cell">The Ingenious Gentleman Don Quixote of La Mancha</td>
<td role="cell">1605</td>
<td role="cell">9783125798502</td>
<td role="cell">3125798507</td>
</tr>
[…]
<tr role="row">
<td role="cell">George Orwell</td>
<td role="cell">Nineteen Eighty-Four</td>
<td role="cell">1948</td>
<td role="cell">9780451524935</td>
<td role="cell">0451524934</td>
</tr>
</table>

25. What is display: contents
• The element does not generate any boxes,
• Its children and pseudo-elements still generate boxes,
• Text runs as normal,
• For box generation & layout, element treated as if replaced in
element tree by its contents,
• As if opening and closing tags removed,
• Also yanks it from accessibility tree.

26. Why It Is More Dangerous
• You cannot add it back to the accessibility tree with ARIA,
• You can give it an accessible name and properties,
• But these are not passed to screen readers,
• Some browsers do not hand the information off,
• If used as a poor-dev’s CSS reset:
• Will hide elements from assistive technology,
• Will hide semantics from assistive technology.

27. HOW IS THIS A THING?

28. Assistive Tech Is Not at Fault
• Not screen readers’ fault,
• Accessibility information comes from browser,
• Screen reader needs more than DOM to understand page,
• Cannot ignore all but the DOM:
• Years of HTML tables for layout informed screen readers,
• Screen readers developed heuristics for dealing with tables.

29. Detecting AT Is Not Viable
• Users generally don’t want us to be able to detect screen
readers,
• Not all screen reader users are blind anyway,
• Mouse actions are a poor proxy for sighted screen reader
users,
• Disabling a site’s CSS for screen reader users is impractical (and
a terrible, terrible idea).

30. CSS Is Not Blameless
• CSS already impacts HTML semantics — display: none,
• Using display: table does (generally) not impart HTML table
semantics,
• CSS flex or grid makes it easy for content order and source
order to disagree,
• CSS grid to lay out an HTML table still won’t be a table
semantically.

31. ARIA Is Not Ideal
• You must understand ARIA and the table structure,
• This will require you to keep current on SR and browser
support,
• You have to manage headers and other content you might
hide,
• Consider how this scales with CSS does not load,
• This is not the purpose of ARIA,
• The technique here is a stop-gap.

32. The Browser Is Not Right
• The CSS spec does not state that semantics should be dropped,
• As display properties, there is no reason to remove them,
• The accessibility tree should not care about visuals.

33. WRAP-UP

35. CSS Display Properties
versus
HTML Semantics