WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Non-modal window after time delay

for

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Fernand van Olphen
Sent: Wednesday, June 7, 2017 6:45 AM
To: ' = EMAIL ADDRESS REMOVED = ' < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Non-modal window after time delay

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?
Off the top of my head, I don't think why this should be an issue. I cannot think of any WCAG SC that would be violated. If I missed one, blame it on lack of caffeine intake.


2) How can I make the appearance of this window known to users of assistive technology?
There are various ways, the most important thing to me as a screen reader user is do not set focus on your pop-up as I am reading in the body of the page. You'd really tick me off as I would have to navigate down to where I was. I would suggest some ideas.

A. Use a hidden text prior to the site header informing me that after 25 seconds a survey window will pop up. Do not surprise me later.
B. When the pop-up shows, use aria-live="polite" to inform me of the window that just popped up. A short description will suffice. If I want to review it, I can navigate to it.
C. Hide the pop-up from screen readers using aria-hidden="true" and provide the link to the survey before the site header as the page loads. This way, I can hit enter on the link which would activate a JavaScript and show the pop-up using aria-hidden="false"

As obvious above, there are multiple ways you can handle this. It goes back to your audience. The most important thing to me is forcing my cursor to bounce from where I am at in the DOM back to the top of the survey. Most likely, I would leave the site and not take your survey or revisit that site again.

I must remind you that this is my own personal opinion as a user. If you are looking at this from a general prospective of all users, then aria-live would be the best bet as it will alert users and ensure to keep the user's cursor in its current position in the DOM.


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: 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.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Fernand van Olphen
> Sent: Wednesday, June 7, 2017 6:45 AM
> To: ' = EMAIL ADDRESS REMOVED = ' < = EMAIL ADDRESS REMOVED = >
> Subject: [WebAIM] Non-modal window after time delay
>
> 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?
> Off the top of my head, I don't think why this should be an issue. I cannot
> think of any WCAG SC that would be violated. If I missed one, blame it on
> lack of caffeine intake.
>
>
> 2) How can I make the appearance of this window known to users of
> assistive technology?
> There are various ways, the most important thing to me as a screen reader
> user is do not set focus on your pop-up as I am reading in the body of the
> page. You'd really tick me off as I would have to navigate down to where I
> was. I would suggest some ideas.
>
> A. Use a hidden text prior to the site header informing me that after 25
> seconds a survey window will pop up. Do not surprise me later.
> B. When the pop-up shows, use aria-live="polite" to inform me of the window
> that just popped up. A short description will suffice. If I want to review
> it, I can navigate to it.
> C. Hide the pop-up from screen readers using aria-hidden="true" and provide
> the link to the survey before the site header as the page loads. This way, I
> can hit enter on the link which would activate a JavaScript and show the
> pop-up using aria-hidden="false"
>
> As obvious above, there are multiple ways you can handle this. It goes back
> to your audience. The most important thing to me is forcing my cursor to
> bounce from where I am at in the DOM back to the top of the survey. Most
> likely, I would leave the site and not take your survey or revisit that site
> again.
>
> I must remind you that this is my own personal opinion as a user. If you are
> looking at this from a general prospective of all users, then aria-live
> would be the best bet as it will alert users and ensure to keep the user's
> cursor in its current position in the DOM.
>
>
> 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
> > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Fernand van Olphen
Sent: Wednesday, June 7, 2017 8:35 AM
To: ' = EMAIL ADDRESS REMOVED = ' < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Non-modal window after time delay

@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: 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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Fernand van Olphen
Sent: Friday, June 9, 2017 4:05 AM
To: ' = EMAIL ADDRESS REMOVED = ' < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Non-modal window after time delay

@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: 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.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Fernand van Olphen
> Sent: Friday, June 9, 2017 4:05 AM
> To: ' = EMAIL ADDRESS REMOVED = ' < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Non-modal window after time delay
>
> @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 > _________________
> > at http://webaim.org/discussion/archives
> >
> > > > >