3

as a part of accessibility conformance we are trying to "trap" focus within a modal dialog that appears. Unfortunately it seems like aria-modal="true" is not supported in iOS. Furthermore, capturing the tab focus via focusin/blur events does not work either: it seems the voiceover takes precedence and will allow the user to force focus away. With all that said, does anyone have a working example or technique that would allow for this? Currently it seems impossible.

Thank you

Sean Grant
  • 193
  • 1
  • 7
  • Does this answer your question? [How do I trap focus within a modal popup on iOS using the UIAccessibility protocol?](https://stackoverflow.com/questions/11674522/how-do-i-trap-focus-within-a-modal-popup-on-ios-using-the-uiaccessibility-protoc) – aheze May 19 '21 at 16:20
  • 1
    No, this is with HTML and Safari – Sean Grant May 19 '21 at 16:21
  • It's not straight forward but [give this answer I gave a read](https://stackoverflow.com/a/66083587/2702894) and then give it a go (there is a fiddle so you can see how I handle the `tabindex="-1"` addition and removal to restore the document to the original state when the modal is closed.). It is answering about a menu but the principle is identical, move the modal outside of all other content elements, add `aria-hidden="true"` to all other content, add `tabindex="-1"` to any interactive elements outside the modal. Any questions just ask (as there is a lot to process / unpack). – GrahamTheDev May 19 '21 at 16:50
  • I reckon you need to set focus on the first control in that modal using some JavaScript and use role="dialog": https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box. More here: https://www.w3.org/WAI/GL/wiki/Managing_focus_for_modal_dialogs. Kendo UI's modal/dialog is quite good: https://demos.telerik.com/kendo-ui/dialog/index – Nathaniel Flick May 23 '21 at 20:37
  • 1
    aria-modal is not enough on its own. The doc you linked mentions that using inert on the rest of the document is good practice (this, rather than aria-modal prevents focus straying). Some good info here https://www.tpgi.com/the-current-state-of-modal-dialog-accessibility/ – brennanyoung May 25 '21 at 11:13
  • Why is HTML and Safari not applying to your question? The questions labels indicate that we're talking web and not native. With which browser does the issue occur? Thx – Andy May 28 '21 at 17:53

0 Answers0