CODEWITHSUNDEEP
javascriptaccessibilityember.jswai-aria
RhinoWalrus
RhinoWalrus

Reputation: 3089

Setting focus of a screen reader on a modal alert in ember

I am attempting to make my ember.js app more accessible and am doing my testing via Apple's built-in VoiceOver utility. I'm adding ariaRoles as necessary to my views and tacking on aria-label attributes where the purpose of navigation is unclear. I'm having issues getting the focus on modal alerts, as the reader's focus stays on the page items behind the modal. Does anyone have experience handling focus on modal alerts for screen readers? I'm under the impression that declaring "ariaRole:'alertDialog'" in my view sets the appropriate role for such a dialog, and it is possible that the focus behavior for this role differs between screen readers. Thanks!!!

Upvotes: 3

Views: 4018

Answers (1)

Ryan B
Ryan B

Reputation: 3392

I don't have first hand experience with modal stuff. Essentially your issue is you are throwing on an ARIA role, and kind of expect it to work. You need to do more than that. You need to keep the following in mind:

  • Once the link/button is pressed, move focus to the modal window/dialog/popup. Most modal elements are simply a <div>. You can give the<div> an attribute of tabindex="-1".
  • Trap focus inside the modal window.
  • Allow the user to press escape to close
  • When closed, move focus back to link/button

Resources

Upvotes: 5

Related Questions