Hiding content
A presentation at Rotterdam The Hague Front-end Meetup in in Rotterdam, Netherlands by Hidde de Vries
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
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
- Personal details
- Your application
- Agreement
- Summary
visibility: hidden;
display: none;
hidden
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
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.
Buzz and feedback
Here’s what was said about this presentation on social media.
