Hiding content

A presentation at Fronteers Jam Session in October 2017 in Amsterdam, Netherlands by Hidde de Vries

Hiding
content Hidde de Vries / @hdv / Fronteers Jam Session, Amsterdam / 05-10-2017

My name is Hidde

My name is Hidde

Hiding
content

This is actually an accessibility talk

Tactile paving

Elevator

Colour

Language

Code

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

DOM tree

Accessibility tree

Roles role = alert role = link role = button role = checkbox role = tab role = radio role = dialog role = progressbar role = slider role = tooltip

States hidden open expanded checked pressed selected hidden open expanded checked

Labels “skip to content” “open menu” “first name” “table of contents” “about us” “show more” “click here” “go to next photo” “skip to content” “open menu”

People use AT, assistive technologies. Examples: braille terminals, screenreaders speech input software, alternate input devices

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

Accessibility tree Platform APIs AT Microsoft Active Accessibility Microsoft User Interface Automation
MSAA
Mac OS X Accessibility Protocol
Linux/Unix Accessibility Toolkit
IAccessible2 Yo u r markup DOM tree

Hiding
content

Hiding from screen “visually hidden”

Icon button EXAMPLE Please accept our cookie policy OK ×

Required indicator EXAMPLE First name *

position: absolute; left: -9999em;

Hiding from AT

A decorative icon EXAMPLE ! Cars

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 everything

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
Personal details          
Your application
Agreement
Summary △
▽
▽
▽

display: none;

hidden

<div hidden></div>

Not exposed by a11y tree Not rendered Invisible to text search

Inert

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

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

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 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 ➜ ➜

‘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 From screen From AT From everything 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

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/

Thanks for listening.
  Tweet/email any questions/comments! @hdv / hidde@hiddedevries.nl

Hidde de Vries
@hdv

1 / 54

Most modern front-end builds contain bits of hidden content. Some have large parts of the application hidden from view. In this talk, I’ll discuss various ways of making things invisible, and explain what their impact on an application’s accessibility could be.

Video