Hiding
content Hidde de Vries / @hdv / DEPT, Rotterdam / 21-06-2017

People centered development

This is actually an accessibility talk

Physical
accessibility

Tactile paving

Elevator

Digital accessibility

Colour

Language

Code

When you send your
markup to the browser, it generates two trees (amongst others)

DOM tree

DOM tree

Accessibility tree

Accessibility tree

https://www.paciellogroup.com/resources/aviewer/ https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb

role = link

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/

Properties

Labels

States

Hiding
content

Hiding
content 1. Visually hiding 2. Hiding from AT 3. Really hiding 4. Inertifying

Visually hiding

You want text to be present for machines, but don’t want to see it
on the screen.

Contextual cues 
 to supplement
visual cues

[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/

Navigation heading EXAMPLE

Navigation heading EXAMPLE About us Products Projects Contact

Navigation heading EXAMPLE About us Products Projects Contact

Icon button EXAMPLE

Icon button EXAMPLE Please accept our cookie policy OK ×

Icon button EXAMPLE Please accept our cookie policy OK ×

Required indicator EXAMPLE

Required indicator EXAMPLE First name *

Required indicator EXAMPLE First name *

Hide label and rely on placeholder instead EXAMPLE

Hide label and rely on placeholder instead EXAMPLE

Name

Hide label and rely on placeholder instead EXAMPLE

Name

Hide label and rely on placeholder instead EXAMPLE

Name AVOID

text-indent: -9999em;

width: 0; and/or height: 0;

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

position: absolute; left: -9999em;

Visually hiding Element still shows up in the accessibility tree.

Visually hiding Element still shows up in the accessibility tree.

Hiding only from screenreaders

You want text to be invisible only for users of Assistive Technology

Repeating text that hinders AT users EXAMPLE

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

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

aria-hidden

<div aria-hidden></div>

If you find you have to use aria-hidden , this may indicate there’s something wrong with the page

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

Hiding from AT Element shows it is in the aria-hidden state.

Hiding from AT Element shows it is in the aria-hidden state.

(on purpose) Really hiding

You don’t want anyone to know about the content and make it invisible to all

A modal panel that is not currently shown EXAMPLE

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

A tab control that 
 is closed EXAMPLE

A tab control that 
 is closed EXAMPLE

  1. Personal details 
 
 
 
 

  2. Your application
  3. Agreement
  4. Summary 







visibility: hidden;

display: none;

hidden

<div hidden></div>

Not exposed to a11y tree Not rendered Invisible to text search

Really hiding Element shows as ‘not exposed’ / ‘not rendered’

Really hiding Element shows as ‘not exposed’ / ‘not rendered’

Inert

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

Makes the element and its entire subtree inert

No pointer events. No focus. Invisible to text search. Impossible to select.

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

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

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

Non current
carousel items EXAMPLE Now playing ➜ ➜

Non current
carousel items EXAMPLE Now playing ➜ ➜

Non current
carousel items EXAMPLE Now playing ➜ ➜

‘Shipping address’ section when ‘Same as billing address’ is checked EXAMPLE

‘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 *

Hiding
content 1. Visually hiding 2. Hiding from AT 3. Really hiding 4. Inertifying

Further reading http://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html

Questions? @hdv / hidde@hiddedevries.nl