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.

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.

Most common screen reader and browser combinations
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%
Slide 39, WebAIM Screen Reader Survey #8 (2019)
Chrome 80 / Windows 10
CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button>
display: flex
display: grid
display: block
display: inline-block
display: contents
Slide 40
Firefox 73 / 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
Slide 41
  1. <th>s with flex and grid are announced as cells, not column or row header;
  2. Inserts text leaf between each one;
  3. Issues a keyboard use warning.
Safari / macOS 10.15.2
CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button>
display: flex
display: grid
display: block 1
display: inline-block 1
display: contents 1
Slide 42
  1. But recognizes <dl>.
Chrome 80 / Android 10
CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button>
display: flex
display: grid
display: block
display: inline-block
display: contents
Slide 43
Safari / iOS
CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button>
display: flex
display: grid
display: block 1
display: inline-block 1
display: contents 1 2
Slide 44
  1. Treats all cells belonging in column 1;
  2. Still fires on double-tap with VO.

Videos

I embedded the videos from the slides since they will not play in SlideShare.

Slide 20
Slide 29
Slide 30
Slide 53
Slide 64

References

Tweets

The room was mostly full (or so I was told) and a few of those attendees even tweeted about my session.

No comments? Be the first!

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>