# data[].attributes.blurb.html
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.

# data[].attributes.slidedeck.data[].slides[].desc.html
Hiding
content Hidde de Vries / @hdv / DEPT, Rotterdam / 21-06-2017

# data[].attributes.slidedeck.data[].slides[].desc.html
People centered development

# data[].attributes.slidedeck.data[].slides[].desc.html
This is actually an accessibility talk

# data[].attributes.slidedeck.data[].slides[].desc.html
Physical
accessibility

# data[].attributes.slidedeck.data[].slides[].desc.html
Tactile paving

# data[].attributes.slidedeck.data[].slides[].desc.html
Elevator

# data[].attributes.slidedeck.data[].slides[].desc.html
Digital accessibility

# data[].attributes.slidedeck.data[].slides[].desc.html
Colour

# data[].attributes.slidedeck.data[].slides[].desc.html
Language

# data[].attributes.slidedeck.data[].slides[].desc.html
Code

# data[].attributes.slidedeck.data[].slides[].desc.html
When you send your
markup to the browser, it generates two trees (amongst others)

# data[].attributes.slidedeck.data[].slides[].desc.html
DOM tree

# data[].attributes.slidedeck.data[].slides[].desc.html
DOM tree

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessibility tree

# data[].attributes.slidedeck.data[].slides[].desc.html
Accessibility tree

# data[].attributes.slidedeck.data[].slides[].desc.html
https://www.paciellogroup.com/resources/aviewer/ https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb

# data[].attributes.slidedeck.data[].slides[].desc.html
role = link

# data[].attributes.slidedeck.data[].slides[].desc.html
role = alert role = link role = button role = checkbox role = tab role = radio role = dialog role = progressbar role = slider role = tooltip https://www.w3.org/TR/using-aria/

# data[].attributes.slidedeck.data[].slides[].desc.html
Properties

# data[].attributes.slidedeck.data[].slides[].desc.html
Labels

# data[].attributes.slidedeck.data[].slides[].desc.html
States

# data[].attributes.slidedeck.data[].slides[].desc.html
Hiding
content

# data[].attributes.slidedeck.data[].slides[].desc.html
Hiding
content 1. Visually hiding 2. Hiding from AT 3. Really hiding 4. Inertifying

# data[].attributes.slidedeck.data[].slides[].desc.html
Visually hiding

# data[].attributes.slidedeck.data[].slides[].desc.html
You want text to be present for machines, but don’t want to see it
on the screen.

# data[].attributes.slidedeck.data[].slides[].desc.html
Contextual cues   to supplement
visual cues

# data[].attributes.slidedeck.data[].slides[].desc.html
[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/

# data[].attributes.slidedeck.data[].slides[].desc.html
Navigation heading EXAMPLE

# data[].attributes.slidedeck.data[].slides[].desc.html
Navigation heading EXAMPLE About us Products Projects Contact

# data[].attributes.slidedeck.data[].slides[].desc.html
Navigation heading EXAMPLE About us Products Projects Contact

# data[].attributes.slidedeck.data[].slides[].desc.html
Icon button EXAMPLE

# data[].attributes.slidedeck.data[].slides[].desc.html
Icon button EXAMPLE Please accept our cookie policy OK ×

# data[].attributes.slidedeck.data[].slides[].desc.html
Icon button EXAMPLE Please accept our cookie policy OK ×

# data[].attributes.slidedeck.data[].slides[].desc.html
Required indicator EXAMPLE

# data[].attributes.slidedeck.data[].slides[].desc.html
Required indicator EXAMPLE First name *

# data[].attributes.slidedeck.data[].slides[].desc.html
Required indicator EXAMPLE First name *

# data[].attributes.slidedeck.data[].slides[].desc.html
Hide label and rely on placeholder instead EXAMPLE

# data[].attributes.slidedeck.data[].slides[].desc.html
Hide label and rely on placeholder instead EXAMPLE

Name

# data[].attributes.slidedeck.data[].slides[].desc.html
Hide label and rely on placeholder instead EXAMPLE

Name

# data[].attributes.slidedeck.data[].slides[].desc.html
Hide label and rely on placeholder instead EXAMPLE

Name AVOID

# data[].attributes.slidedeck.data[].slides[].desc.html
text-indent: -9999em;

# data[].attributes.slidedeck.data[].slides[].desc.html
width: 0; and/or height: 0;

# data[].attributes.slidedeck.data[].slides[].desc.html
position: absolute; clip: rect(1px, 1px, 1px, 1px);

# data[].attributes.slidedeck.data[].slides[].desc.html
position: absolute; left: -9999em;

# data[].attributes.slidedeck.data[].slides[].desc.html
Visually hiding Element still shows up in the accessibility tree.

# data[].attributes.slidedeck.data[].slides[].desc.html
Visually hiding Element still shows up in the accessibility tree.

# data[].attributes.slidedeck.data[].slides[].desc.html
Hiding only from screenreaders

# data[].attributes.slidedeck.data[].slides[].desc.html
You want text to be invisible only for users of Assistive Technology

# data[].attributes.slidedeck.data[].slides[].desc.html
Repeating text that hinders AT users EXAMPLE

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
aria-hidden

# data[].attributes.slidedeck.data[].slides[].desc.html
If you find you have to use aria-hidden , this may indicate there’s something wrong with the page

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Hiding from AT Element shows it is in the aria-hidden state.

# data[].attributes.slidedeck.data[].slides[].desc.html
Hiding from AT Element shows it is in the aria-hidden state.

# data[].attributes.slidedeck.data[].slides[].desc.html
(on purpose) Really hiding

# data[].attributes.slidedeck.data[].slides[].desc.html
You don’t want anyone to know about the content and make it invisible to all

# data[].attributes.slidedeck.data[].slides[].desc.html
A modal panel that is not currently shown EXAMPLE

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
A tab control that   is closed EXAMPLE

# data[].attributes.slidedeck.data[].slides[].desc.html
A tab control that   is closed EXAMPLE

1. Personal details

2. Your application

3. Agreement

4. Summary 







# data[].attributes.slidedeck.data[].slides[].desc.html
visibility: hidden;

# data[].attributes.slidedeck.data[].slides[].desc.html
display: none;

# data[].attributes.slidedeck.data[].slides[].desc.html
hidden

# data[].attributes.slidedeck.data[].slides[].desc.html
Not exposed to a11y tree Not rendered Invisible to text search

# data[].attributes.slidedeck.data[].slides[].desc.html
Really hiding Element shows as ‘not exposed’ / ‘not rendered’

# data[].attributes.slidedeck.data[].slides[].desc.html
Really hiding Element shows as ‘not exposed’ / ‘not rendered’

# data[].attributes.slidedeck.data[].slides[].desc.html
Inert

# data[].attributes.slidedeck.data[].slides[].desc.html
inert https://github.com/WICG/inert https://html.spec.whatwg.org/multipage/interaction.html#inert

# data[].attributes.slidedeck.data[].slides[].desc.html
Makes the element and its entire subtree inert

# data[].attributes.slidedeck.data[].slides[].desc.html
No pointer events. No focus. Invisible to text search. Impossible to select.

# data[].attributes.slidedeck.data[].slides[].desc.html
Rest of the page while modal is open (“<dialog> without <dialog>” – Hixie ) EXAMPLE

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Non current
carousel items EXAMPLE Now playing ➜ ➜

# data[].attributes.slidedeck.data[].slides[].desc.html
Non current
carousel items EXAMPLE Now playing ➜ ➜

# data[].attributes.slidedeck.data[].slides[].desc.html
Non current
carousel items EXAMPLE Now playing ➜ ➜

# data[].attributes.slidedeck.data[].slides[].desc.html
‘Shipping address’ section when ‘Same as billing address’ is checked EXAMPLE

# data[].attributes.slidedeck.data[].slides[].desc.html
‘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 *

# data[].attributes.slidedeck.data[].slides[].desc.html
Hiding
content 1. Visually hiding 2. Hiding from AT 3. Really hiding 4. Inertifying

# data[].attributes.slidedeck.data[].slides[].desc.html
Further reading http://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html

# data[].attributes.slidedeck.data[].slides[].desc.html
Questions? @hdv / hidde@hiddedevries.nl