WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessible modal

for

From: Ugurcan Kutluoglu
Date: Jun 5, 2017 6:02PM

Those are my personal notes I put together a while ago for creating
accessible modal dialogs. I hope it helps.


-Modal dialog must be aria-hidden=-true- and/or display:none if present in
DOM but not shown on screen.

-Modal container should not be the first or the last focusable element in
the DOM. Although we trap focus with JS, user may still be able to navigate
to browser chrome if modal container is the first or last focusable item in
the DOM.

-Modal container must be <div role=-dialog- tabindex=--1-
aria-modal=-true->. In future we can just use <dialog/>

-<div role=-alertdialog- tabindex=--1- aria-modal=-true-> may also be used
depending on the purpose of the modal.

-Modal container must have a label (aria-label or aria-labelledby)

-Modal container should have a short description (aria-describedby).

-Keyboard focus should be trapped inside the modal dialog using an event
listener. Do not listen for keystrokes, instead listen for changes in
focus.
https://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/

-Keyboard focus should initially be placed on the modal container itself or
the first focusable item in the modal.

-Keyboard focus should be returned to originating element once the modal is
closed.

-Users should be able to close the Modal window by pressing ESC.

-Make sure the dialog border is visible in Windows high contrast mode.

-In addition to focus management, you may also use aria-hidden which can
help hiding objects that are behind the modal overlay from AT users. Simply
add aria-hidden="true" to main page wrapper once the modal dialog is
displayed, and set it to false once it's closed. (Important: Use only if
modal dialog is not a child of the page wrapper) Do the same thing to
parent modal, if modal windows are stacked on top of each other.

Example:

<div id="mainPageWrapper" aria-hidden="true">...</div>
...

<div id="modal" tabindex="-1" aria-modal="true" aria-hidden="false"
aria-labelledby="modalTitle" aria-describedby="modalDescription"
role="dialog">

<div id="modalDescription" class="visually-hidden">

{Short description of modal}, Escape key will cancel and close the
dialog.

</div>

<h1 id="modalTitle">Registration Form</h1>

{ContentHere}

</div>

On Mon, Jun 5, 2017 at 4:07 PM, Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

> There's quite a few out there.
>
> Deque University (comes with JQuery code, HTML and CSS):
> https://dequeuniversity.com/library/aria/popups-dialogs/sf-modal-dialog
>
> Paul Adam did a blog post on how to make one:
> https://www.deque.com/blog/aria-modal-alert-dialogs-a11y-
> support-series-part-2/
>
> There is the incredible accessible modal (classic):
> https://github.com/gdkraus/accessible-modal-dialog
>
>
> Bryan Garaventa has a solid version of a modal, along with most other
> custom widgets under thhe sun on his Whatsock page.
>
>
>
> On 6/5/17, Nick Allan < <EMAIL REMOVED> > wrote:
> > Hi all
> > Has anyone got any suggestions on a good accessible modal control?
> >
> > Nick
> >
> >
> > Nick Allan
> > Access Technology Technical Lead
> > Digital
> > Vision Australia
> > 454 Glenferrie Rd Kooyong VIC 3144
> >
> > T: 03 9864 9293 (I: 341293)
> > E: <EMAIL REMOVED>
> > www.visionaustralia.org
> >
> > [Vision Australia. Blindness. Low Vision. Opportunity. - logo]
> >
> > The history, culture, diversity and value of all Aboriginal and Torres
> > Strait Islander peoples are recognised, acknowledged and respected.
> >
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >