search

filiph / edgehead

MOVED:
https://github.com/filiph/egamebook
44 stars 3 forks source link

[Accessibility] Modal dialogs should truly be modal #12

Open citelao opened 6 years ago

citelao commented 6 years ago

Let me start by saying that modal dialogs are the worst to implement properly on the web. In fact, some screen readers never handle them properly, no matter what. My solution is to open a new tab most of the time 😄.

That being said, https://bitsofco.de/accessible-modal-dialog/ is a good place to start. Specifically:

  1. It needs to have the correct aria-roles so that screenreader users notice it
  2. It needs to trap focus inside it, so that screenreader users don't skip dismissing it
  3. And all the housekeeping that comes with that.
filiph commented 6 years ago

Thanks! Could you please have a look at https://dart-lang.github.io/angular_components_example/#/material_dialog (scroll down to open the examples) and check whether this implementation of modal dialogs is good enough?

I was going to switch to these components for the next iteration of the UI.

citelao commented 6 years ago

Those modals do a lot of things right, but they're still inaccessible.

Specifically:

It might be possible to have Dart fix it :) I will post an issue there.

In case you're wondering, here's why these changes are necessary:

This modal is accessible. When I open it in Safari, VoiceOver reads the entire dialog: Beginning of dialog window. It begins with a heading.... Without seeing the screen, I know that I am in a new context. It finishes with a description of my currently selected element. I cannot navigate out of the dialog without dismissing it. When I close the dialog, my focus is on the activating element, as though I never left.

Angular's modals (as you linked) are substantially less fun. When I open the modal, VO provides no indication that I have opened a dialog. Instead, it just reads Close, button, or whatever I had selected. I can easily navigate out of the dialog unknowingly, and I cannot dismiss the dialog easily. When I dismiss the dialog, focus is on the first element in the page.