Save 37% off PRO during our Black Friday Sale! »

Hiding content

Hiding content

Most modern front-end builds contain bits of hidden content. Some have large parts of the application hidden from view. In this talk, Hidde will go into various ways of making things invisible, and explain what their impact on your application's accessibility could be.

Ead3b438cfc0b1066b3330834a6b8a97?s=128

Hidde de Vries

June 21, 2017
Tweet

Transcript

  1. Hiding content Hidde de Vries / @hdv / DEPT, Rotterdam

    / 21-06-2017
  2. None
  3. None
  4. None
  5. Hiding content

  6. This is actually an accessibility talk

  7. Physical accessibility

  8. Tactile paving

  9. Elevator

  10. Digital accessibility

  11. Colour

  12. Language

  13. Code

  14. When you send your markup to the browser, it generates

    two trees (amongst others)
  15. DOM tree

  16. DOM tree

  17. Accessibility tree

  18. Accessibility tree

  19. AT text-to-speech screen magnifiers alternate pointing devices

  20. Platform APIs AT Microsoft Active Accessibility Microsoft User Interface Automation

    MSAA Mac OS X Accessibility Protocol Linux/Unix Accessibility Toolkit IAccessible2 text-to-speech screen magnifiers alternate pointing devices
  21. Accessibility tree Platform APIs AT Microsoft Active Accessibility Microsoft User

    Interface Automation MSAA Mac OS X Accessibility Protocol Linux/Unix Accessibility Toolkit IAccessible2 text-to-speech screen magnifiers alternate pointing devices
  22. Accessibility tree Platform APIs Microsoft Active Accessibility Microsoft User Interface

    Automation MSAA Mac OS X Accessibility Protocol Linux/Unix Accessibility Toolkit IAccessible2
  23. Accessibility tree Platform APIs Microsoft Active Accessibility Microsoft User Interface

    Automation MSAA Mac OS X Accessibility Protocol Linux/Unix Accessibility Toolkit IAccessible2 DOM tree
  24. Accessibility tree Platform APIs Microsoft Active Accessibility Microsoft User Interface

    Automation MSAA Mac OS X Accessibility Protocol Linux/Unix Accessibility Toolkit IAccessible2 Your markup DOM tree
  25. https://www.paciellogroup.com/resources/aviewer/ https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb

  26. None
  27. role = link

  28. (video: create button, add it into the DOM and inspect

    it in the a11y tree)
  29. (video: create button, add it into the DOM and inspect

    it in the a11y tree)
  30. role = alert role = link role = button role

    = checkbox role = tab role = radio role = dialog role = progressbar role = slider https://www.w3.org/TR/using-aria/
  31. Properties

  32. Labels

  33. States

  34. Hiding content

  35. Hiding content 1. Visually hiding 2. Hiding from AT 3.

    Really hiding 4. Inertifying
  36. Visually hiding

  37. You want text to be present for machines, but don’t

    want to see it on the screen.
  38. Contextual cues 
 to supplement visual cues

  39. [visually hiding] can resolve some of the tension between the

    demands of accessibility and the demands of visual design http://webaim.org/techniques/css/invisiblecontent/
  40. Navigation heading EXAMPLE

  41. Navigation heading EXAMPLE About us Products Projects Contact

  42. Navigation heading EXAMPLE About us Products Projects Contact

  43. Icon button EXAMPLE

  44. Icon button EXAMPLE Please accept our cookie policy OK ×

  45. Icon button EXAMPLE Please accept our cookie policy OK ×

  46. Required indicator EXAMPLE

  47. Required indicator EXAMPLE First name *

  48. Required indicator EXAMPLE First name *

  49. Hide label and rely on placeholder instead EXAMPLE

  50. Hide label and rely on placeholder instead EXAMPLE Name

  51. Hide label and rely on placeholder instead EXAMPLE Name

  52. Hide label and rely on placeholder instead EXAMPLE Name AVOID

  53. text-indent: -9999em;

  54. width: 0; and/or height: 0;

  55. position: absolute; clip: rect(1px, 1px, 1px, 1px);

  56. position: absolute; left: -9999em;

  57. Visually hiding Element still shows up in the accessibility tree.

    (video: add position: absolute; left: -9999em; to button and show that it still appears in the a11y tree)
  58. Visually hiding Element still shows up in the accessibility tree.

    (video: add position: absolute; left: -9999em; to button and show that it still appears in the a11y tree)
  59. Hiding only from screenreaders

  60. You want text to be invisible only for users of

    Assistive Technology
  61. Repeating text that hinders AT users EXAMPLE

  62. Repeating text that hinders AT users EXAMPLE Our company won

    a prize We are very proud to announce that we were nominated for an amazing price and that we have actually won it, too. Read more We opened a new office With the great opening party that took place yesterday, it is now official: our new office in Utrecht is open! Read more We’ll be at the trade show The trade show is taking place next week and we will be presenting interesting new stuff. Visit our booth! Read more
  63. Repeating text that hinders AT users EXAMPLE Our company won

    a prize We are very proud to announce that we were nominated for an amazing price and that we have actually won it, too. Read more We opened a new office With the great opening party that took place yesterday, it is now official: our new office in Utrecht is open! Read more We’ll be at the trade show The trade show is taking place next week and we will be presenting interesting new stuff. Visit our booth! Read more Read more Read more Read more
  64. aria-hidden

  65. <div aria-hidden></div>

  66. If you find you have to use aria-hidden, this may

    indicate there’s something wrong with the page
  67. Repeating text that hinders AT users EXAMPLE Our company won

    a prize We are very proud to announce that we were nominated for an amazing price and that we have actually won it, too. Read more We opened a new office With the great opening party that took place yesterday, it is now official: our new office in Utrecht is open! Read more We’ll be at the trade show The trade show is taking place next week and we will be presenting interesting new stuff. Visit our booth! Read more
  68. Hiding from AT Element shows it is in the aria-hidden

    state. (video: add aria-hidden and show element shows up as aria-hidden in the a11y tree)
  69. Hiding from AT Element shows it is in the aria-hidden

    state. (video: add aria-hidden and show element shows up as aria-hidden in the a11y tree)
  70. (on purpose) Really hiding

  71. You don’t want anyone to know about the content and

    make it invisible to all
  72. A modal panel that is not currently shown EXAMPLE

  73. A modal panel that is not currently shown EXAMPLE Perhaps

    the most heavily-repeated pattern in JavaScript-based page manipulation is showing and hiding content. Tabbed interfaces. Collapsible elements. Accordion widgets. It crops up nearly everywhere. In and of itself, this pattern is not a bad thing, but few people realize how profoundly your choice of hiding mechanism can influence the accessibility of your content to assistive technologies like screen readers. When building custom JavaScript-based widgets, it’s quite easy to fully control the hiding mechanism, but when you begin working with animation libraries like jQuery or Scriptaculous, the hiding mechanism is typically dictated by the library, leaving you little control over the accessibility of your Are you sure? NO YES
  74. A tab control that 
 is closed EXAMPLE

  75. A tab control that 
 is closed EXAMPLE 1. Personal

    details 
 
 
 
 
 2. Your application 3. Agreement 4. Summary ̗ ̙ ̙ ̙
  76. visibility: hidden;

  77. display: none;

  78. hidden

  79. <div hidden></div>

  80. None
  81. Not exposed to a11y tree Not rendered Invisible to text

    search
  82. Really hiding Element shows as ‘not exposed’ / ‘not rendered’

    (video: add display: none; and show that element now shows up as not exposed and not rendered)
  83. Really hiding Element shows as ‘not exposed’ / ‘not rendered’

    (video: add display: none; and show that element now shows up as not exposed and not rendered)
  84. Inert

  85. inert https://github.com/WICG/inert https://html.spec.whatwg.org/multipage/interaction.html#inert

  86. Makes the element and its entire subtree inert: visible, but

    unusable
  87. No pointer events. No focus. Invisible to text search. Impossible

    to select.
  88. Rest of the page while modal is open (“<dialog> without

    <dialog>” – Hixie) EXAMPLE
  89. Rest of the page while modal is open (“<dialog> without

    <dialog>” – Hixie) EXAMPLE Perhaps the most heavily-repeated pattern in JavaScript-based page manipulation is showing and hiding content. Tabbed interfaces. Collapsible elements. Accordion widgets. It crops up nearly everywhere. In and of itself, this pattern is not a bad thing, but few people realize how profoundly your choice of hiding mechanism can influence the accessibility of your content to assistive technologies like screen readers. When building custom JavaScript-based widgets, it’s quite easy to fully control the hiding mechanism, but when you begin working with animation libraries like jQuery or Scriptaculous, the hiding mechanism is typically dictated by the library, leaving you little control over the accessibility of your Are you sure? NO YES
  90. Non current carousel items EXAMPLE Now playing ➜ ➜

  91. ‘Shipping address’ section when ‘Same as billing address’ is checked

    EXAMPLE Billing address Shipping address ✔ Same as billing address Street * Postal code * City * Street * Postal code * City *
  92. Hiding content Visually hiding Hiding from AT Really hiding Inert

    Accessible to: ✔ AT users ✗ sighted users Accessible to: ✗ AT users ✔ sighted users Accessible to: ✗ AT users ✗ sighted users Visible, but not usable * Note that there are a lot of different ATs, and they are not all for users with sight impairments
  93. Further reading http://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html https://github.com/alice/inert https://allyjs.io/tutorials/hiding-elements.html https://hiddedevries.nl/en/blog/2017-04-11-on-hiding-content https://www.w3.org/TR/html-aam-1.0/

  94. Thanks for listening. Questions? @hdv / hidde@hiddedevries.nl