Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSUN 2020: CSS Display Properties Versus HTML Semantics

672 views

Published on

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.

Published in: Internet
  • Be the first to comment

CSUN 2020: CSS Display Properties Versus HTML Semantics

  1. 1. CSS Display Properties versus HTMLSemantics Adrian Roselli
  2. 2. 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
  3. 3. Adrian Roselli • Building for the web since 1993, • Learn more at AdrianRoselli.com, • Avoid on Twitter @aardrian.
  4. 4. A Use Case
  5. 5. 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.
  6. 6. HTML Tables
  7. 7. 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.
  8. 8. BasicHTMLTable  Make a valid HTML <table>,  Avoid spanning cells,  Make sure you use <th> for headers,  Add a useful <caption>.
  9. 9. <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
  10. 10. 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.
  11. 11. 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>
  12. 12. 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.
  13. 13. 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>
  14. 14. Responsive Web Design (RWD)
  15. 15. 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>.
  16. 16. 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>
  17. 17. EvenMoreResponsive • ‘Responsive’ is not just about viewport width; • Even if it were, a scrolling table may not cut it.
  18. 18. RespondtoPrint
  19. 19. RespondtoWHCM
  20. 20. RespondtoViewportWidth
  21. 21. 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; } }
  22. 22. RejiggeringtheLayout
  23. 23. CSS Display Properties
  24. 24. CSSDisplayProperties  The following override native semantics in the browser: - display: block - display: inline - display: grid - display: flex - display: contents
  25. 25. CSSDisplayProperties  Nothing in the HTML / CSS specifications mandates this,  Does not work in reverse: - display: table - display: table-cell
  26. 26. AssistiveTechnology(AT)  Browsers do not convey correct semantics to AT,  Users who rely on these semantics can be stranded: - Understanding content, - Navigating a page.
  27. 27. 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.
  28. 28. ScreenReader(NVDA/Firefox)
  29. 29. ScreenReader(NVDA/Firefox)
  30. 30. 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.
  31. 31. AccessibilityTree:<table>
  32. 32. AccessibilityTree:<caption>
  33. 33. AccessibilityTree:<th>
  34. 34. AccessibilityTree:<td>
  35. 35. 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.
  36. 36. 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)
  37. 37. Chrome80/Windows10 CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button> display: flex ✔ ✔ ✔ ✔ display: grid ✔ ✔ ✔ ✔ display: block ✔ ✔ ✔ ✔ display: inline-block ✔ ✔ ✔ ✔ display: contents ✔ ❌ ✔ ✔
  38. 38. Firefox73/Windows10 CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button> display: flex ❌1 ✔ ✔ ✔ display: grid ❌1 ✔ ✔ ✔ display: block ✔ ✔ ✔ ✔ display: inline-block ✔ ✔2 ✔ ✔ display: contents ❌ ✔2 ✔ ✔3
  39. 39. Safari/macOS10.15.2 CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button> display: flex ❌ ✔ ✔ ✔ display: grid ❌ ✔ ✔ ✔ display: block ❌ ❌1 ✔ ✔ display: inline-block ❌ ❌1 ✔ ✔ display: contents ❌ ❌1 ❌ ❌
  40. 40. Chrome80/Android10 CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button> display: flex ✔ ✔ ✔ ✔ display: grid ✔ ✔ ✔ ✔ display: block ✔ ✔ ✔ ✔ display: inline-block ✔ ✔ ✔ ✔ display: contents ✔ ❌ ✔ ✔
  41. 41. 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
  42. 42. 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.
  43. 43. 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.
  44. 44. 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.
  45. 45. ARIA to the Rescue?
  46. 46. 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.
  47. 47. ARIATableRoles  Do not use ARIA grid roles,  Test with a screen reader,  If your tables are generated from script, update the script.
  48. 48. 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>
  49. 49. ScreenReader(NVDA/Firefox)
  50. 50. ARIA Grid
  51. 51. 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.
  52. 52. display:contents
  53. 53. 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.
  54. 54. 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.
  55. 55. AffectingDifferentElements
  56. 56. AccessibilityTree:<table>
  57. 57. AccessibilityTree:<ul>
  58. 58. AccessibilityTree:<button>
  59. 59. AccessibilityTree:<h2>
  60. 60. ScreenReader(NVDA/Firefox)
  61. 61. 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?
  62. 62. How Is This a Thing?
  63. 63. 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.
  64. 64. 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).
  65. 65. 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.
  66. 66. 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.
  67. 67. 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.
  68. 68. Wrap-up
  69. 69. 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
  70. 70. Questions / Q & A

×