a11yTO Conf: CSS Display Properties versus HTML Semantics
If you attended my pre-recorded remote CSUN 2020 talk, then this talk will be familiar. I updated with the latest browsers, since February was six Chrome and nine Firefox versions ago.
This talk was also only fifteen minutes, so I cut the videos and some other materials. Go check the original slides if you need that context.
Or visit them directly at SlideShare: a11yTO CONF 2020: CSS Display Properties v. HTML Semantics
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.
This time I am linking the test cases so you can try them yourself:
| 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 |
❌1 | ✔4 | ✔ | ✔ |
display: grid |
❌1 | ✔4 | ✔ | ✔ |
display: block |
❌2 | ❌ | ✔ | ✔ |
display: inline-block |
❌2 | ❌ | ✔ | ✔ |
display: contents |
❌3 | ❌ | ❌ | ❌ |
- Recognizes
<table>and<caption>only; - Can navigate in VoiceOver with table commands, but column/row headers are not conveyed;
- Can navigate by row in VoiceOver, but only hear a string of text;
- VoiceOver will break up any text that wraps when using virtual cursor.
| CSS | <table>, etc. |
<ul>, <ol>, <dl> |
<h#> |
<button> |
|---|---|---|---|---|
display: flex |
✔ | ✔ | ✔ | ✔ |
display: grid |
✔ | ✔ | ✔ | ✔ |
display: block |
✔ | ✔ | ✔ | ✔ |
display: inline-block |
✔ | ✔ | ✔ | ✔ |
display: contents |
✔ | ❌1 | ✔ | ✔ |
- TalkBack will not announce the list item count, position, start, or end, but it will announce when you exit the list.
| 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 |
- Treats all cells as column 1;
- Recognizes
<dl>s overall, which likely came with the addition of<dl>support in iOS 14; - Still fires on double-tap with VO.
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 Aderinokun
- CSS3 — Appendix B: Effects of display: contents on Unusual Elements
Leave a Comment or Response