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.

Transcript

1. Hiding content Hidde de Vries / @hdv / DEPT, Rotterdam / 21-06-2017
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
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>
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