3

How do I handle the "X" at the upper right corner of my web site modals in order to make the modal as accessible as possible for users with screen readers but also for keyboard users?

As I see it, there are to ways to go:

  1. Hide it from those users (since it till break the workflow) by setting `aria-hidden=”true”, remove it from the tab order and simply let the user rely on the buttons at the bottom of the modal to close it?

  2. Add an `aria-label=”Close dialog” and include the "X" in the tab order to make that close-feature more obvious?

Sure, there are a lot of other things one shall have in mind when creating accessible modals, but let´s stick to this simple topic for now.

  • 1
    It's not just screenreader users to consider, but keyboard users too. Is the 'X' going to be selectable in the tab order? – JonW Jan 19 '17 at 14:21
  • Well, that might also be included in my question. Updating, thanks @JonW – Ilias Bennani Jan 19 '17 at 14:26
2

I always include an explicit Close button alongside the main call to action, to close the modal, which coexists with the tiny X in the top-right corner. Redundancy is not always a bad thing.

I have collated data from my user base that show just about everyone (regular users and those who need additional support) uses the explicit Close button rather than the tiny X.

However, both are in the tabbing sequence.

I add aria-label="Close dialog" on the X because it will be very useful for screen reader users who use JAWS or NVDA, and this is very easy to add to the html.

I also set aria-hidden="true"on the modal while the modal is inactive to ensure the user cannot tab to it, but only because we use CSS to hide the modal in the html (and if you hide it with CSS the users can still tab to it) - just remember to set it to false when you launch the modal, and remember to place the keyboard focus into the modal (use a little JS to do this). If you are using AJAX to inject the modal in to the html then you don't need the aria-hidden attribute.

  • 1
    Make sure you implement ESC too to close the window. That doesn't mean 'X' should be hidden. Being able to tab to X and hit enter or just hit ESC to close the dialog are both good features for keyboard and assistive technology users. And to further expand on SteveD's comment about unhiding the dialog, make sure you disable the main window when the dialog is open so that screen reader users don't accidentally tab out of the dialog and get their focus on the window in the background and get confused. – slugolicious Jan 19 '17 at 21:14
  • +1 for mentioning the ESC key behaviour too - I forgot to mention that :-) – SteveD Jan 20 '17 at 9:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.