E-mail List Archives
Thread: Non-modal window after time delay
Number of posts in this thread: 11 (In chronological order)
From: Fernand van Olphen
Date: Wed, Jun 07 2017 5:45AM
Subject: Non-modal window after time delay
No previous message | Next message →
Hi everyone,
On our website a non-modal window appears after a almost half a minute, asking visitors if they want to participate in a survey.
(For example on this page: https://www.denhaag.nl/home/bewoners/loket/to/Grofvuil-of-tuinafval-wegbrengen-afvalbrengstations.htm. You will have to wait 25 seconds before the window scrolls into view, in the left hand corner)
Two questions:
1) The window appears some time after the page has loaded. Is such a time-delay allowed by WCAG?
2) How can I make the appearance of this window known to users of assistive technology?
Regards,
Fernand van Olphen
Accessibility Advisor
Municipality of The Hague
De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer
From: JP Jamous
Date: Wed, Jun 07 2017 6:22AM
Subject: Re: Non-modal window after time delay
← Previous message | Next message →
See my notes after your questions.
From: Birkir R. Gunnarsson
Date: Wed, Jun 07 2017 7:04AM
Subject: Re: Non-modal window after time delay
← Previous message | Next message →
I agree, either use a visually hidden text at the top of the DOM or a
live region ext alerting a screen reader user that a dialog has been
added to the page.
Make sure a screen reader user can quickly navigate to the dialog,
e.g. b using a region landmark (role="region" aria-label="subscription
dialog").
Live region HTML (assum visuallyHidden is the name of visually hidden
class, you can implement it using the clip method):
<div class="visuallyHidden" aria-live="polite"> </div>
JavaScript populates this div with a message, like:
A subscription dialog has been added to the page, please navigate to
it (add description of the easiest way to do so) and respond.
The concern s keyboard only users, if they have to tab thorug the
entire page to get to the dialo.
If the dialog is time sensitive (closest after a short period of time)
this is a concern, and then I think you may have to go the route of
automatically putting focus on the dialog when it is displayed
(keeping track of where the focus was when the dialog is displayed)
and making sure that focus is moved back to that element when user
closes the dialog.
This will not fully address the inconvenience of screen reader users
who read the document in the off-screen buffer, but it is a decent
compromise.
On 6/7/17, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> See my notes after your questions.
>
>
From: Fernand van Olphen
Date: Wed, Jun 07 2017 7:34AM
Subject: Re: Non-modal window after time delay
← Previous message | Next message →
@JP: Thanks for your swift answer!
With regard to your suggestion B:
I have read somewhere that a container with aria-live="polite" must already be present in the DOM in order to work. The modal window must then be injected inside that container. Is this correct?
For example:
<div aria-live="polite">
[insert modal window here after 25 seconds through javascript]
</div>
- Fernand
De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer
From: Detlev Fischer
Date: Wed, Jun 07 2017 7:41AM
Subject: Re: Non-modal window after time delay
← Previous message | Next message →
The appearance (after a time delay) of the non-modal dialog is not announced by screen reader NVDA - but the next tab stop takes the unsuspecting user to the "Ja, ick doe mee.." link wherever you have been before, without the survey context being obvious at all. The keyboard focus is then trapped in the alert which in that sense behaves like a modal window. The alert would be announced if it was given the ARIA role alertdialog (whether that is a good design choice is another matter, however). On dismissal of the dialog the focus is not restored to the position where it was before.
The insertion of the dialog links into the focus order might be flagged under 2.4.3 Focus Order.
--
Detlev Fischer
testkreis c/o feld.wald.wiese
Thedestr. 2, 22767 Hamburg
Mobil +49 (0)157 57 57 57 45
Fax +49 (0)40 439 10 68-5
http://www.testkreis.de
Beratung, Tests und Schulungen für barrierefreie Websites
Fernand van Olphen schrieb am 07.06.2017 13:45:
> Hi everyone,
>
> On our website a non-modal window appears after a almost half a minute, asking
> visitors if they want to participate in a survey.
> (For example on this page:
> https://www.denhaag.nl/home/bewoners/loket/to/Grofvuil-of-tuinafval-wegbrengen-afvalbrengstations.htm.
> You will have to wait 25 seconds before the window scrolls into view, in the
> left hand corner)
>
> Two questions:
>
>
> 1) The window appears some time after the page has loaded. Is such a
> time-delay allowed by WCAG?
>
> 2) How can I make the appearance of this window known to users of
> assistive technology?
>
>
> Regards,
>
> Fernand van Olphen
> Accessibility Advisor
> Municipality of The Hague
>
> De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op:
> http://www.denhaag.nl/disclaimer
> > > > >
From: JP Jamous
Date: Wed, Jun 07 2017 7:47AM
Subject: Re: Non-modal window after time delay
← Previous message | Next message →
You can code aria-live inside a JS script. As soon as the JS script fires up to show the pop-up, aria-live="polite" will fire.
I would suggest having it in a parent container that the pop-up resides in it as you described. I would also add to it role="alert".
<div role="alert" aria-live="polite">
Pop-Up
</div>
Additionally, you should take Birkir's feedback in consideration especially with the clipped CSS part to hide the text. Off-screen text doesn't work on mobile layouts.
From: Fernand van Olphen
Date: Thu, Jun 08 2017 2:54AM
Subject: Re: Non-modal window after time delay
← Previous message | Next message →
Detlev, JP, Birkir: thanks for the response. Much appreciated!
@Birkir: you say the dialog should have a role="region". Not role="dialog" ?
- Fernand
De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer
From: Birkir R. Gunnarsson
Date: Thu, Jun 08 2017 10:31AM
Subject: Re: Non-modal window after time delay
← Previous message | Next message →
If you go the route of automatically moving the focus to the dialog
when it is displayed, it should have a role of dialog.
If you, instead, decide to let the user know something is now visible
on the page without moving the focus, I would recommend role="region"
over rol="dialog".
A region is an ARIA landmark and can easily be discovered. And if you
display non-modular content on the page it isn't really a dialog,
especially when you don't move focus to it.
But, honestly, either is fine, we are getting into awfully hair
splitting territory here. ;)
On 6/8/17, Fernand van Olphen < = EMAIL ADDRESS REMOVED = > wrote:
> Detlev, JP, Birkir: thanks for the response. Much appreciated!
>
>
> @Birkir: you say the dialog should have a role="region". Not role="dialog" ?
>
> - Fernand
>
>
>
> De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op:
> http://www.denhaag.nl/disclaimer
> > > > >
--
Work hard. Have fun. Make history.
From: Fernand van Olphen
Date: Fri, Jun 09 2017 3:04AM
Subject: Re: Non-modal window after time delay
← Previous message | Next message →
@Birkir:
I see what you mean., I must admit that, in trying to find the best approach for Assistive Technoloy users, I find it sometimes very difficult in understanding the difference between a "must" and a "nice to have". But I'm working on it ;)
One more question (and then this topic can be closed):
Is it important where in the DOM the dialog window is positioned?
- Fernand
De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer
From: JP Jamous
Date: Fri, Jun 09 2017 5:24AM
Subject: Re: Non-modal window after time delay
← Previous message | Next message →
If it does not open up in a modal window or a new tab then absolutely. I have witnessed some developers put the markup after the site footer and using CSS move it to the top of the page. That's very bad.
Proper DOM structure is a highly important success criteria of WCAG. I would like to hit anything related to a page in the page body. Not before the header and not after the footer.
From: John Hicks
Date: Fri, Jun 09 2017 6:18AM
Subject: Re: Non-modal window after time delay
← Previous message | No next message
Hello folks
Why is this not a violation of 3.2.5 ?
John
2017-06-09 13:24 GMT+02:00 JP Jamous < = EMAIL ADDRESS REMOVED = >:
> If it does not open up in a modal window or a new tab then absolutely. I
> have witnessed some developers put the markup after the site footer and
> using CSS move it to the top of the page. That's very bad.
>
> Proper DOM structure is a highly important success criteria of WCAG. I
> would like to hit anything related to a page in the page body. Not before
> the header and not after the footer.
>
>