O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

a11yTO CONF 2020: CSS Display Properties v. HTML Semantics

1.267 visualizações

Publicada em

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.

Publicada em: Internet
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

a11yTO CONF 2020: CSS Display Properties v. HTML Semantics

  1. 1. CSS Display Properties versus HTML Semantics
  2. 2. • I’ve written some stuff, • Member of W3C, • Building for the web since 1993, • Learn more at AdrianRoselli.com, • Avoid on Twitter @aardrian. About Adrian Roselli
  3. 3. CSS Display Properties • The following can override native semantics in the browser: • display: block • display: inline • display: grid • display: flex • display: contents
  4. 4. CSS Display Properties • Nothing in the HTML / CSS specifications mandates this, • Does not work in reverse: • display: table • display: table-cell
  5. 5. Assistive Technology (AT) • Browsers do not convey correct semantics to AT, • Users who rely on these semantics can be stranded: • Understanding content, • Navigating a page.
  6. 6. Tables as a Canary • 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.
  7. 7. Accessibility Tree • 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.
  8. 8. Accessibility Tree: <table>
  9. 9. Accessibility Tree: <caption>
  10. 10. Accessibility Tree: <th>
  11. 11. Accessibility Tree: <td>
  12. 12. Chrome 86 / Windows 10 CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button> display: flex ✔ ✔ ✔ ✔ display: grid ✔ ✔ ✔ ✔ display: block ✔ ✔ ✔ ✔ display: inline-block ✔ ✔ ✔ ✔ display: contents ✔ ❌ ✔ ✔
  13. 13. Firefox 82 / 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
  14. 14. Safari / macOS 10.15.6 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 ❌ ❌ ❌
  15. 15. Chrome 86 / Android 11 CSS <table>, etc. <ul>, <ol>, <dl> <h#> <button> display: flex ✔ ✔ ✔ ✔ display: grid ✔ ✔ ✔ ✔ display: block ✔ ✔ ✔ ✔ display: inline-block ✔ ✔ ✔ ✔ display: contents ✔ ❌1 ✔ ✔
  16. 16. Safari / iOS 14 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
  17. 17. 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.
  18. 18. 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.
  19. 19. ARIA TO THE RESCUE?
  20. 20. ARIA Table Roles • <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.
  21. 21. ARIA Table Roles • Do not use ARIA grid roles, • Test with a screen reader, • If your tables are generated from script, update the script.
  22. 22. Table with ARIA <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>
  23. 23. What is display: 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.
  24. 24. Why It Is More Dangerous • 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.
  25. 25. HOW IS THIS A THING?
  26. 26. Assistive Tech Is Not at Fault • 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.
  27. 27. Detecting AT Is Not Viable • 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).
  28. 28. CSS Is Not Blameless • 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.
  29. 29. ARIA Is Not Ideal • 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.
  30. 30. The Browser Is Not Right • 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.
  31. 31. WRAP-UP
  32. 32. CSS Display Properties versus HTML Semantics

×