11

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.

Improve this question
3
  • 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, 2016 at 21:11
  • @JuanLanus Where does WCAG 2.0 require efficiency, efficacy and satisfaction?
    – Tsundoku
    Dec 23, 2016 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, 2016 at 15:53

3 Answers 3

Reset to default
13

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.

Improve this answer
3
  • Nice find, I completely missed the point. Mainly because I assumed all modern dialog boxes do fulfill this requirement.
    – Himanshu Vaishnav
    Sep 28, 2016 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, 2016 at 13:57
  • 2
    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, 2016 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.

Improve this answer
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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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