CSUN 2020: CSS Display Properties versus HTML Semantics
While originally I was scheduled to attend CSUN to present two talks one talk, I ended up not attending (my father won A Major Award so I joined him instead). I gave my talk remotely in my scheduled slot (during my father’s award dinner).
While I would have loved to have been there, the COVID-19 cloud hung over the entire event, with plenty of sponsors, speakers, and attendees taking precautions and skipping. As it is, when California recommended a ban on large groups, that may have helped motivate CSUN to wrap early.
Those who attended my talk got to see it live. For those who did not attend my talk, or opted to skip CSUN overall, I have posted my slides.
Or visit them directly at SlideShare: CSUN 2020: CSS Display Properties versus HTML Semantics
The typefaces are messed up because I used a pre-built PowerPoint template and the fonts it uses do not translate well to SlideShare.
Video
Tables
There were a few slides of tables showing browser and screen reader support. The structure is lost in the SlideShare embed, so I have re-created them here.
| Screen Reader & Browser | Number of Respondents | Percent of Respondents |
|---|---|---|
| JAWS with Chrome | 259 | 21.40% |
| NVDA with Firefox | 237 | 19.60% |
| NVDA with Chrome | 218 | 18.00% |
| JAWS with Internet Explorer | 139 | 11.50% |
| VoiceOver with Safari | 110 | 9.10% |
| JAWS with Firefox | 71 | 5.90% |
| VoiceOver with Chrome | 36 | 3.00% |
| NVDA with Internet Explorer | 14 | 1.20% |
| Other combinations | 126 | 10.40% |
| CSS | <table>, etc. |
<ul>, <ol>, <dl> |
<h#> |
<button> |
|---|---|---|---|---|
display: flex |
✔ | ✔ | ✔ | ✔ |
display: grid |
✔ | ✔ | ✔ | ✔ |
display: block |
✔ | ✔ | ✔ | ✔ |
display: inline-block |
✔ | ✔ | ✔ | ✔ |
display: contents |
✔ | ❌ | ✔ | ✔ |
| CSS | <table>, etc. |
<ul>, <ol>, <dl> |
<h#> |
<button> |
|---|---|---|---|---|
display: flex |
❌1 | ✔ | ✔ | ✔ |
display: grid |
❌1 | ✔ | ✔ | ✔ |
display: block |
✔ | ✔ | ✔ | ✔ |
display: inline-block |
✔ | ✔2 | ✔ | ✔ |
display: contents |
❌ | ✔2 | ✔ | ✔3 |
<th>s withflexandgridare announced as cells, not column or row header;- Inserts text leaf between each one;
- Issues a keyboard use warning.
| CSS | <table>, etc. |
<ul>, <ol>, <dl> |
<h#> |
<button> |
|---|---|---|---|---|
display: flex |
❌ | ✔ | ✔ | ✔ |
display: grid |
❌ | ✔ | ✔ | ✔ |
display: block |
❌ | ❌1 | ✔ | ✔ |
display: inline-block |
❌ | ❌1 | ✔ | ✔ |
display: contents |
❌ | ❌1 | ❌ | ❌ |
- But recognizes
<dl>.
| CSS | <table>, etc. |
<ul>, <ol>, <dl> |
<h#> |
<button> |
|---|---|---|---|---|
display: flex |
✔ | ✔ | ✔ | ✔ |
display: grid |
✔ | ✔ | ✔ | ✔ |
display: block |
✔ | ✔ | ✔ | ✔ |
display: inline-block |
✔ | ✔ | ✔ | ✔ |
display: contents |
✔ | ❌ | ✔ | ✔ |
| CSS | <table>, etc. |
<ul>, <ol>, <dl> |
<h#> |
<button> |
|---|---|---|---|---|
display: flex |
❌ | ✔ | ✔ | ✔ |
display: grid |
❌ | ✔ | ✔ | ✔ |
display: block |
❌1 | ❌ | ✔ | ✔ |
display: inline-block |
❌1 | ❌ | ✔ | ✔ |
display: contents |
❌1 | ❌ | ❌ | ❌2 |
- Treats all cells belonging in column 1;
- Still fires on double-tap with VO.
Videos
I embedded the videos from the slides since they will not play in SlideShare.
References
- On this site:
- 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 Aderi okun
- CSS3 — Appendix B: Effects of display: contents on Unusual Elements
Tweets
The room was mostly full (or so I was told) and a few of those attendees even tweeted about my session.
One of my favorite #CSUNATC20 sessions so far! Thanks @aardrian! Were you channeling Talking Heads with "where are my beautiful tables?"
Thanks for a deeper dive and testing into display properties. Heads up that people were asking about slide deck locations.
Great (remote) session by @aardrian at CSUNATC2020.
In a massage chair in the vispero suite, listening to the disembodied voice of @aardrian. CSUN is quite laid-back so far. 😉
Holy moly, I need the slides and recording of @aardrian’s #CSUNATC20 talk about CSS display gazumping HTML semantics. So many ways things are breaking, and it’s so subtle, it’d be very easy for a developer / auditor to miss it.
Leave a Comment or Response