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 Accessibility: Small Steps for a larger Audience

    Accessibility: Small Steps for a larger Audience

    Thumbnail for WebVTT & Video Accessibility

    WebVTT & Video Accessibility

    Thumbnail for Prefers Reduced Motion: Designing Safer Animation for Motion Sensitivities

    Prefers Reduced Motion: Designing Safer Animation for Motion Sensitivities

    Thumbnail for The Anatomy of an Accessible Auto-Suggest

    The Anatomy of an Accessible Auto-Suggest

    Thumbnail for ARIA Spec for the Uninitiated

    ARIA Spec for the Uninitiated

    Thumbnail for Focus Visible, At Last!

    Focus Visible, At Last!

    Thumbnail for Accessible Web Components Without Tears

    Accessible Web Components Without Tears

    Thumbnail for Making Modern JavaScript Frameworks Accessible

    Making Modern JavaScript Frameworks Accessible

More presentations from Code 2015

    Thumbnail for Console Dot

    Console Dot

    Thumbnail for Crossing The Streams

    Crossing The Streams

    Thumbnail for Canvas Cold War

    Canvas Cold War

    Thumbnail for Dawn of the Progressive Single Page App

    Dawn of the Progressive Single Page App

    Thumbnail for Back to the Future with Web Components

    Back to the Future with Web Components

    Thumbnail for What Does HTTP/2 Mean for Front End Engineers?

    What Does HTTP/2 Mean for Front End Engineers?

    Thumbnail for Getting Offline with the Service Worker

    Getting Offline with the Service Worker

    Thumbnail for Classing up ES6

    Classing up ES6

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

© Conffab 2023