10

Are modal dialogs WCAG compliant? I understand that pop-ups of any kind do not meet WCAG requirements, and I assume this includes modal dialogs?

For example, I am working with a Primefaces component, , which has a modal attribute: http://www.primefaces.org/showcase/ui/overlay/dialog/rtl.xhtml

I'd like to know if I can use this and know that it is WCAG compliant or not.

  • 1
    The answers lean towards "it's OK". But, in addition to being WCAG-compliant, you must ensure that the UI is usable by any disabled user with efficiency, efficacy and satisfaction. I write this, which is obvious, because I see only compliance advice (which, BTW, is what the PO asked for, so it's OK). – Juan Lanus Oct 4 '16 at 21:11
  • @JuanLanus Where does WCAG 2.0 require efficiency, efficacy and satisfaction? – Christophe Strobbe Dec 23 '16 at 18:03
  • @ChristopheStrobbe: efficiency, efficacy and satisfaction are the parts of a widely accepted ISO/IEC definition of usability. My comment is an attempt to bring up the rather obvious fact that, in addition to accesibility, usability considerations still apply. – Juan Lanus Dec 25 '16 at 15:53
11

There is a section of WCAG 2.0 dedicated to this. 2.1 Keyboard Accessible.

https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html

Specifically:

2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.(Level A)

And

2.1.2 No Keyboard Trap: If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away. (Level A)

You will note both are Level A requirements so while there is no mention of modal dialogs, you must ensure the keyboard focus moves from the page to the modal dialog.

If you are interested in learning about how to create an accessible modal dialog, this excellent article takes you through it step-by-step in HTML with additional ARIA tags and a little JavaScript: https://www.marcozehe.de/2015/02/05/advanced-aria-tip-2-accessible-modal-dialogs/

Obviously you are using a third party UI technology so the actual implementation may be different and there could be some technical challenges, customisation or constraints, but this does not change the essence of the WCAG 2.1 keyboard operation requirements.

  • Nice find, I completely missed the point. Mainly because I assumed all modern dialog boxes do fulfill this requirement. – Himanshu Vaishnav Sep 28 '16 at 13:51
  • @HimanshuVaishnav Sadly too many modal dialogs do not meet WCAG2.0 because the keyboard focus does not move into the modal dialog, thus rendering the feature unusable to people who cannot use a mouse. – SteveD Sep 28 '16 at 13:57
  • 1
    It's not specifically mentioned in WCAG 2.1.1 or 2.1.2 but make sure you constrain the keyboard focus to within the dialog. For assistive technology users such as screen reader users, there's nothing more confusing than listening to where your focus is as you TAB around the dialog and then all of a sudden hear objects that should be in the background in the main part of the window. You should not be able to get your keyboard focus on any objects that are in the dialog invoking window. – slugolicious Oct 5 '16 at 20:10
3

WCAG is there for evaluating the accessibility of content or services and not for components like modals. To understand if the modal keeps things accessible you should look at the accessibilty of the content/service.

Also is WCAG a set of guidelines with different levels of implementation. Choose how strict you need to follow the guidelines before implementing anything.

However to answer the question; Yes it is possible to meet WCAG guidelines while using modals. But it depends on the content itself, the way the modals are implemented and, as mentioned before, how strict you want to follow the guidelines.

What you can do for example is:
- Always show a title above every modal
- Have a close button with a caption and a key binding (as SteveD already mentioned move the keyboard focus to the modal)
- Evaluate the site and if necessary look for alternatives when the modal is causing trouble.

2

WCAG Provides guidelines about internet accessibility & not the interface methods itself. As far as the direct concern go - there is no reference for "Modal Dialogs" in the WCAG2.0 documentation.

The closest I could find was a reference to pop-up and new tab windows but no hints about modal dialog. I think it's safe to assume that it falls under the safe side of WCAG.

Ref: https://www.w3.org/WAI/WCAG20/quickref/?currentsidebar=%23col_customize#top

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.