CSUN 2020: CSS Display Properties Versus HTML Semantics

CSS Display Properties
versus
HTMLSemantics
Adrian Roselli

Agenda
 About Me
 Use Case
 HTML Tables
 Responsive Web Design (RWD)
 CSS Display Properties
 ARIA to the Rescue?
 ARIA Grid
 display:contents
 How is This a Thing?
 Wrap-up

Adrian Roselli
• Building for the web
since 1993,
• Learn more at
AdrianRoselli.com,
• Avoid on Twitter
@aardrian.

UseCase
 Build a layout that can adapt to screen sizes,
 Uses a native HTML element that has inbuilt structure,
 Also has inbuilt semantics,
 Provides a specific set of nodes in the accessibility tree.

HTMLTables
 We will use HTML tables as our proxy,
 They have a long history on the web,
 Used for layout and tabular data,
 Have a specific DOM structure,
 Have their own navigation methods in screen readers.

BasicHTMLTable
 Make a valid HTML <table>,
 Avoid spanning cells,
 Make sure you use <th> for headers,
 Add a useful <caption>.

<table>
<caption>Books I May or May Not Have Read</caption>
<tr>
<th>Author</th>
<th>Title</th>
<th>Year</th>
</tr>
<tr>
<td>Miguel De Cervantes</td>
<td>The Ingenious Gentleman Don Quixote of La Mancha</td>
<td>1605</td>
</tr>
[…]
</table>
BasicHTMLTable

Complexity#1:RowHeaders
 Continue to use <th>,
 Add the scope attribute using the values (as appropriate):
- row, col, rowgroup, colgroup.
 Conforms to WCAG technique H63: Using the scope attribute to
associate header cells and data cells in data tables.

Complexity#1:RowHeaders
<table>
<caption>Contact Information</caption>
<tr>
<td></td>
<th scope="col">Name</th>
<th scope="col">Phone#</th>
<th scope="col">Fax#</th>
<th scope="col">City</th>
</tr>
<tr>
<td>1.</td>
<th scope="row">Joel Garner</th>
<td>412-212-5421</td>
<td>412-212-5400</td>
<td>Pittsburgh</td>
</tr>
[…]
</table>

Complexity#2:SpanningCells
 Continue to use <th>,
 Every <th> gets an id,
 Every <td> gets a headers attribute
 The headers value is the id of the <th> you want it to use,
 Conforms to WCAG 2.0 technique H43: Using id and headers
attributes to associate data cells with header cells in data tables.

Complexity#2:SpanningCells
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>

ResponsiveTables
 Specifically talking about viewport width,
 Let it scroll off-screen:
- Add tabindex="0" for keyboard users,
- Add role="region" so screen readers announce it,
- Add aria-labelledby so screen readers give it a name,
- Set the aria-labelledby value to the id of the <caption>.

ResponsiveTable
<div role="region" aria-labeledby="Cap1" tabindex="0">
<table>
<caption id="Cap1">Books I May or May Not Have Read</caption>
<tr>
<th>Author</th>
<th>Title</th>
<th>Year</th>
<th>ISBN-13</th>
<th>ISBN-10</th>
</tr>
<tr>
<td>Miguel De Cervantes</td>
<td>The Ingenious Gentleman Don Quixote of La Mancha</td>
<td>1605</td>
<td>9783125798502</td>
<td>3125798507</td>
</tr>
[…]
</table>
</div>

EvenMoreResponsive
• ‘Responsive’ is not just about viewport width;
• Even if it were, a scrolling table may not cut it.

RejiggeringtheLayout
@media screen and (max-width: 37em), print and (max-width: 5in) {
table, tr, td {
display: block;
}
[…]
td {
display: grid;
grid-template-columns: 4em auto;
grid-gap: 1em 0.5em;
}
}

CSSDisplayProperties
 The following override native semantics in the browser:
- display: block
- display: inline
- display: grid
- display: flex
- display: contents

CSSDisplayProperties
 Nothing in the HTML / CSS specifications mandates this,
 Does not work in reverse:
- display: table
- display: table-cell

AssistiveTechnology(AT)
 Browsers do not convey correct semantics to AT,
 Users who rely on these semantics can be stranded:
- Understanding content,
- Navigating a page.

TablesasaCanary
 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.

CSUN 2020: CSS Display Properties Versus HTML Semantics

AccessibilityTree
 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.

Chromev80
 Released February 19, 2020,
 Fixes flex bug on table,
 Caused me to re-examine overall,
 Other fixes / changes are in there,
 Browsers based on Blink (ChromiEdge) will benefit.

TheWebIsNotChrome
Screen Reader & Browser # of Respondents % of Respondents
JAWS with Chrome 259 21.4%
NVDA with Firefox 237 19.6%
NVDA with Chrome 218 18.0%
JAWS with Internet Explorer 139 11.5%
VoiceOver with Safari 110 9.1%
JAWS with Firefox 71 5.9%
VoiceOver with Chrome 36 3.0%
NVDA with Internet Explorer 14 1.2%
Other combinations 126 10.4%
WebAIM Screen Reader Survey #8 (2019)

Chrome80/Windows10
CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button>
display: flex ✔ ✔ ✔ ✔
display: grid ✔ ✔ ✔ ✔
display: block ✔ ✔ ✔ ✔
display: inline-block ✔ ✔ ✔ ✔
display: contents ✔ ❌ ✔ ✔

Firefox73/Windows10
display: flex ❌1 ✔ ✔ ✔
display: grid ❌1 ✔ ✔ ✔
display: inline-block ✔ ✔2 ✔ ✔
display: contents ❌ ✔2 ✔ ✔3

Safari/macOS10.15.2
display: flex ❌ ✔ ✔ ✔
display: grid ❌ ✔ ✔ ✔
display: block ❌ ❌1 ✔ ✔
display: inline-block ❌ ❌1 ✔ ✔
display: contents ❌ ❌1 ❌ ❌

Chrome80/Android10
display: flex ✔ ✔ ✔ ✔
display: grid ✔ ✔ ✔ ✔
display: inline-block ✔ ✔ ✔ ✔
display: contents ✔ ❌ ✔ ✔

Safari/iOS
display: flex ❌ ✔ ✔ ✔
display: grid ❌ ✔ ✔ ✔
display: block ❌1 ❌ ✔ ✔
display: inline-block ❌1 ❌ ✔ ✔
display: contents ❌1 ❌ ❌ ❌2

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.

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.

Chromev82
 Will support align-items on <button>s,
- When display: inline-grid / grid / inline-flex / flex is applied,
 Lack of support has hampered <button> uptake in these layouts,
 Expect to see more <button>s with more display properties.

ARIATableRoles
 <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.

ARIATableRoles
 Do not use ARIA grid roles,
 Test with a screen reader,
 If your tables are generated from script, update the script.

TablewithARIA
<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>

ARIAGrid
 Do not use for simple data tables,
 Intended to mimic Excel-style spreadsheet,
 A grid is a composite widget so it:
- Contains multiple interactive controls,
- Has only one tab-stop in the sequence,
- Requires author to provide code to manage focus within.

Whatisdisplay: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.

Whydisplay:contentsIsMoreDangerous
 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.

Bugs!
 Firefox bug 1455357 (19-Apr-2018): Setting grid item to display:
contents resets its accessible role
 Chromium Issue 835455 (20-Apr-2018): Element not exposed to
accessibility tree when it is set to display: contents
 Safari bug 39630240 (which I cannot see because my AppleID may
not have the needed permissions to see it)
 CSSWG #2632 (30-Apr-2018): [css-display][css-aam][selectors-4]
How elements with `display:contents` get focused?

AssistiveTechIsNotatFault
 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.

DetectingATIsNotViable
 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).

CSSIsNotBlameless
 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.

ARIAIsNotIdeal
 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.

TheBrowserIsNotRight
 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.

References
 It’s OK to Use Tables
 Hey, It’s Still OK to Use Tables
 A Responsive Accessible Table
 Tables, CSS Display Properties,
and ARIA
 Tables, JSON, CSS, ARIA,
RWD, TLAs…
 GitHub Contributions Chart
 Short note on what CSS display
properties do to table semantics
by Steve Faulkner
 Data Tables by Heydon Pickering
 How display: contents; Works by
Ire Aderinokun
 CSS3 — Appendix B: Effects of
display: contents on Unusual
Elements

CSUN 2020: CSS Display Properties Versus HTML Semantics

More Related Content

What's hot (19)

Similar to CSUN 2020: CSS Display Properties Versus HTML Semantics (20)

More from Adrian Roselli (20)

Recently uploaded (20)

CSUN 2020: CSS Display Properties Versus HTML Semantics

Editor's Notes