The Australian Government coat of Arms

Communities of practice

Communities of practice

Modal alert


#1

Might be somewhat controversial as modal’s in general usually don’t pair well with accessibility standards however, it might be worth discussing as a community that if somebody had to implement this component, let’s make it as good as possible.


#2

I’m in agreement with @adamzerella. While modals are not exactly great accessibility practice, I unfortunately I’ve been requested to implement one.

There are ARIA guidelines on best practices, so I think a dialog/modal component following them would be of benefit.
https://www.w3.org/TR/wai-aria-practices/#dialog_modal


#3

@jozzhart

Considering that implementing a robust and tested modal component should take a considerable amount of time, I think our solution for now should be to specify some solid guidance on why modal dialogs should be avoided and why.

It should be on the table as a proper component later on but for now, we should just refer users to some rationale and guidance on this topic.


#4

My colleague whipped up a (first visit only, dismiss-able) modal on our National Redress website: https://www.nationalredress.gov.au/

The idea for it is to serve as a content warning on the potentially distressing nature of content on the website.

It’s probably not perfect when it comes to a11y. In the sense that focus can be tabbed right on though and onto the rest of the website content. But that may not even be a bad thing for screenreader users.


#5

@chris.lamb

It might not be that great with the a11y, as you said but it’s a start! We might pursue some screenreader testing with this kind of thing at a later time :slight_smile:


#6

Probably not much chop for mobile/responsive either.

A handful of years ago I did use a chunk of jQuery that could get the target of an anchor tag (using ajax). And open it into a modal.
So a link with class=“modal” to a URL like /your-feedback-page#form could open just that #form into the modal.

At the time I remember putting in a bit of effort to get the a11y support down-pat. It had a bit of ARIA, and I tried to get the tabbing order working right.
But by today’s standards it was probably pretty sketchy.

A bonus was that it could be set to only open as a modal above the 720px breakpoint, for example. So for phone/tablet users (or if you open link in new window) the link would be just like any other regular link.

I’ve put the code into a gist if anyone is interested. https://gist.github.com/Chris820/c82adabce9ab135383bd5457bbf440d2


#7

On https://nationalredress.gov.au/ we’re using tingle.js, a vanilla JS modal plugin.
There were efforts to make it more a11y friendly, might be worth a second bash as it’s quite a great little plugin.