Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hiding content

Hiding content

The basics of hiding content in just under 10 minutes: this talk goes into hiding content visually, hiding content completely and hiding content just from assistive technologies.

Ead3b438cfc0b1066b3330834a6b8a97?s=128

Hidde de Vries

October 05, 2017
Tweet

Transcript

  1. Hiding content Hidde de Vries / @hdv / Fronteers Jam

    Session, Amsterdam / 05-10-2017
  2. My name is Hidde

  3. My name is Hidde

  4. Hiding content

  5. This is actually an accessibility talk

  6. Tactile paving

  7. Elevator

  8. Colour

  9. Language

  10. Code

  11. When you send your markup to the browser, it generates

    two trees (amongst others)
  12. DOM tree

  13. Accessibility tree

  14. role = alert role = link role = button role

    = checkbox role = tab role = radio role = dialog role = progressbar role = slider Roles
  15. hidden open expanded checked pressed selected hidden open expanded States

  16. “skip to content” “open menu” “first name” “table of contents”

    “about us” “show more” “click here” “go to next photo” “skip to content” Labels
  17. People use AT, assistive technologies. Examples: braille terminals, screenreaders speech

    input software, alternate input devices
  18. 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
  19. Accessibility tree Platform APIs Microsoft Active Accessibility Microsoft User Interface

    Automation MSAA Mac OS X Accessibility Protocol Linux/Unix Accessibility Toolkit IAccessible2 Your markup DOM tree
  20. Hiding content

  21. Hiding from screen “visually hidden”

  22. Icon button EXAMPLE Please accept our cookie policy OK ×

  23. Required indicator EXAMPLE First name *

  24. position: absolute; left: -9999em;

  25. None
  26. Hiding from AT

  27. A decorative icon EXAMPLE Cars

  28. 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
  29. 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
  30. aria-hidden

  31. <div aria-hidden></div>

  32. If you find you have to use aria-hidden, this may

    indicate there’s something wrong with the page
  33. 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
  34. None
  35. Hiding from everything

  36. 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
  37. A tab control that 
 is closed EXAMPLE 1. Personal

    details 
 
 
 
 
 2. Your application 3. Agreement 4. Summary △ ▽ ▽ ▽
  38. display: none;

  39. hidden

  40. <div hidden></div>

  41. None
  42. Not exposed by a11y tree Not rendered Invisible to text

    search
  43. None
  44. Inert

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

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

    unusable
  47. No pointer events. No focus. Invisible to text search. Impossible

    to select.
  48. 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
  49. Non current carousel items EXAMPLE Now playing ➜ ➜

  50. ‘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 *
  51. 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
  52. 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/

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

  54. None