E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: Nick Allan
Date: Mon, Jun 05 2017 4:55PM
Subject: accessible modal
No previous message | Next message →

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 ADDRESS 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.

From: Birkir R. Gunnarsson
Date: Mon, Jun 05 2017 5:07PM
Subject: Re: accessible modal
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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.

From: Ugurcan Kutluoglu
Date: Mon, Jun 05 2017 6:02PM
Subject: Re: accessible modal
← Previous message | No next message

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 ADDRESS 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 ADDRESS 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 ADDRESS 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.
> > > > >