Web Directions

Conffab

  • Speakers
  • Presentations
  • Conferences
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
Advanced Search
Searching videos

Pop-up Accessibility

Rhiana Heath at Code 2015
  • accessibility
Sign up for a free membership to watch this and hundreds of other videos
  • Details
  • References
  • Slides
  • Keypoints

Modals and pop-ups can be a really useful tool for displaying additional information or getting users to enter information in a way that doesn’t clutter up your screen. However as yet (one coming soon) there is no official HTML element that lets us display modals in a consistent way. As a result screen readers, such as JAWS and NVDA, have a hard time reading them resulting in a lot of pop-ups not being accessible to people with disabilities.

Today we will look at how to make a modal accessible for people who use screen readers. This uses a combination of ARIA attributes and hidden text to speak with the screen reader. As well as helping of JavaScript to help with some custom keyboard control. All while keeping a pleasing look and feel for all users using JavaScript and CSS.

slides.com/rhianaheath/pop-up-accessibility

 

Websites use modals and popups a lot… but screen readers tend not to know about them as there’s no really standard way to do them.

Working on a project was using bootstrap – which has been improving, but still isn’t perfect.

Tested JAWS and NVAccess NVDA – these two form about 70% of screen reader users. Voiceover is also quite popular; Chromevox is nice but less than 1% usage.

WAI-ARIA sends extra information to the browser, which helps with non-standard interactions and content.

Bootstrap has <div class=”modal” role=”dialog”> …advice was actually remove the dialog role as it forces all-in-one reading. Otherwise you need to also insert role=”document” to reinstate the usual fine-grained control.

Mistake: used aria-hidden=”false” and display:none together… it didn’t work on the big screen readers. Correction: use the clip rect visually hidden style.

Aria-label is useful for giving extra cues, similar to title but without triggering tooltips.

ARIA implementation is often as simple as updating your existing show/hide functions so they also update aria-hidden’s boolean. It’s not hard at all.

To keep focus inside the dialog – focusable hidden element at start and end of the dialog, plus a third to close it.

Screen readers read things fast – it’s hard to get used to when you don’t use a reader all the time, but people who do use them run them even faster than the default.

(check slides for a demo of NVDA in action)

You may also be interested in

    Thumbnail for The colorful future of CSS

    The colorful future of CSS

    Thumbnail for Designing for Learning Difficulties

    Designing for Learning Difficulties

    Thumbnail for Making Content Creation Tools Accessible

    Making Content Creation Tools Accessible

    Thumbnail for Branding for accessibility: an inclusive approach to identity

    Branding for accessibility: an inclusive approach to identity

    Thumbnail for What you see is What I get

    What you see is What I get

    Thumbnail for Designing Inclusive Products

    Designing Inclusive Products

    Thumbnail for WebVTT & Video Accessibility

    WebVTT & Video Accessibility

    Thumbnail for The Low-Hanging, High Impact Accessibility Issues For Developers

    The Low-Hanging, High Impact Accessibility Issues For Developers

More presentations from Code 2015

    Thumbnail for Async and Await

    Async and Await

    Thumbnail for Eliminate JavaScript Code Smells

    Eliminate JavaScript Code Smells

    Thumbnail for Async Frontiers in JavaScript

    Async Frontiers in JavaScript

    Thumbnail for Stop the Hand Waving – Scope Chains & Closures

    Stop the Hand Waving – Scope Chains & Closures

    Thumbnail for JavaScript Numbers Like You’ve Never Seen Them Before

    JavaScript Numbers Like You’ve Never Seen Them Before

    Thumbnail for The State of the Animation

    The State of the Animation

    Thumbnail for Dawn of the Progressive Single Page App

    Dawn of the Progressive Single Page App

    Thumbnail for Classing up ES6

    Classing up ES6

Conffab
  • About
  • Speakers
  • Presentations
  • Conferences
  • Contact
  • Sign in
Sign Up

© Conffab 2023