WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Trapping focus in an alert

for

From: Birkir R. Gunnarsson
Date: Apr 7, 2018 11:35AM

I was going to mention the alertdialog role but Steve beat me to it.
THe aert role is for noninteractive alerts that do not grab fous.
When you have an alert that the user has to respond to, code it as an
alertdialog, use aria-labelledby or aria-label to call it "Session
timeout", use aria-describedby to connect it with the message (your
session will time out in x seconds) or whatever, and place focus on
the primary CTA button in the dialog, probably "continue" or "extend"
session.
Use role="time" on the span with the time remaining (it is a vie
region role with value of off, a screen reader should only announce
updates to it if the user has screen reader focus right on th element
itself.

HTML would look something like

<div role='alertdialog" aria-modal="true" aria-labelledby="toHeading"
aria-describedby="toMessage">
<h4 id="toHeading">Session timeout alert</h4>
<p id="toMessage">Your session will expire in <span
role="timer">45</spn> seconds.</p>
<!-- this button should get focus when dialog is displayed. -->
<button class="primary">Extend session</button>
<button class="secondary">Log out</button>
</div>



On 4/6/18, Steve Faulkner < <EMAIL REMOVED> > wrote:
> Hi Brian, 2 suggestions
> Use role=alertdialog as the alert role is not for dialogs and does not
> convey the appropriate semantics.
>
> Follow the Alert dialog design pattern
>
> https://www.w3.org/TR/wai-aria-practices/#alertdialog
>
> On Thursday, 5 April 2018, Lovely, Brian via WebAIM-Forum <
> <EMAIL REMOVED> > wrote:
>
>> We have an alert that tells the user they have so many minutes remaining
>> in their session. The alert also contains two buttons, one to continue and
>> one to sign out. The container has a role of alert, and focus is shifted
>> to
>> the container when the alert is displayed. My question is whether or not
>> to
>> trap focus in the alert so the user cannot navigate away until they have
>> activated one of the buttons.
>> >>
>> The information contained in this e-mail is confidential and/or
>> proprietary to Capital One and/or its affiliates and may only be used
>> solely in performance of work or services for Capital One. The information
>> transmitted herewith is intended only for use by the individual or entity
>> to which it is addressed. If the reader of this message is not the
>> intended
>> recipient, you are hereby notified that any review, retransmission,
>> dissemination, distribution, copying or other use of, or taking of any
>> action in reliance upon this information is strictly prohibited. If you
>> have received this communication in error, please contact the sender and
>> delete the material from your computer.
>> >> >> >> >>
>
>
> --
> --
>
> Regards
>
> SteveF
> Current Standards Work @W3C
> <http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
> > > > >


--
Work hard. Have fun. Make history.