Hiding content

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

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

Icon button EXAMPLE

Icon button EXAMPLE Please accept our cookie policy OK ×

Required indicator EXAMPLE

Required indicator EXAMPLE First name *

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.

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.

(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

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’

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

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

Hiding content

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75