E-mail List Archives
Thread: Pop-over UI design
Number of posts in this thread: 6 (In chronological order)
From: mhysnm1964@gmail.com
Date: Thu, Dec 20 2018 11:27PM
Subject: Pop-over UI design
No previous message | Next message →
All,
I have a situation of a web ap which is using what the devs call is a
pop-over. I am wondering what is the best practice here is for such UI
design? How should this be handled with accessibility. I cannot show code or
screen shot due to NDA. Thus I am hoping someone understand what they are
referring to as a pop-over. I was treating it as a modal.
From: Brian Lovely
Date: Fri, Dec 21 2018 6:59AM
Subject: Re: [External Sender] Pop-over UI design
← Previous message | Next message →
Does is consist of a list of links, or is it more in the nature of a modal
with a variety of elements (form, paragraph, heading)?
On Fri, Dec 21, 2018 at 1:27 AM < = EMAIL ADDRESS REMOVED = > wrote:
> All,
>
>
>
> I have a situation of a web ap which is using what the devs call is a
> pop-over. I am wondering what is the best practice here is for such UI
> design? How should this be handled with accessibility. I cannot show code
> or
> screen shot due to NDA. Thus I am hoping someone understand what they are
> referring to as a pop-over. I was treating it as a modal.
>
>
>
>
>
> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=k9RxXPG0IbXcfD_dCOI8QG1JlF8WHSolTTjyiiN53gc&s=ILBaySO2f2eLKfdPymdVOEJngLnSjfnpZUhoGuYoeCE&e=
> List archives at
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=k9RxXPG0IbXcfD_dCOI8QG1JlF8WHSolTTjyiiN53gc&s=lp4JgkFS-IWlw3GJY-7lg4a67UG0T0A-zkiBbu-pQmI&e=
> >
--
*Brian Lovely*
Digital Accessibility
804.389.1064
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.
From: Yoandry Collazo
Date: Fri, Dec 21 2018 9:55AM
Subject: Re: [External Sender] Pop-over UI design
← Previous message | Next message →
Hi, I'm not a specialist but I'll share what I learn about pop-up
accessibility.
Pop-up windows provide a unique accessibility concern. First of all, most
usability experts would argue against the use of pop-up windows except in
extreme cases. link <https://webaim.org/techniques/javascript/other>
For example: If you have an Input field where the user should enter a
color, you should show a pop-up with a color palette to make it easy for
the user interface.
In this situation, you should care about DOM order, because of the DOM
order matter
<https://developers.google.com/web/fundamentals/accessibility/focus/dom-order-matters>
a
modal always render her code at the end of the body, and you could
experience focus order problems. a pop-up always renders on his container.
You'll need to care about keyboard navigation when you focus your input the
user should receive a description with instructions about how to use this
field.
Once inside the pop-up, you should bring an escape option on the top, then
when the user selected his favorite color should have a summit option to
confirm her selection. the pop-up will close but the focus should remain on
the input field.
I hope this helps.
Yoandry
On Fri, Dec 21, 2018 at 9:00 AM Brian Lovely via WebAIM-Forum <
= EMAIL ADDRESS REMOVED = > wrote:
> Does is consist of a list of links, or is it more in the nature of a modal
> with a variety of elements (form, paragraph, heading)?
>
> On Fri, Dec 21, 2018 at 1:27 AM < = EMAIL ADDRESS REMOVED = > wrote:
>
> > All,
> >
> >
> >
> > I have a situation of a web ap which is using what the devs call is a
> > pop-over. I am wondering what is the best practice here is for such UI
> > design? How should this be handled with accessibility. I cannot show code
> > or
> > screen shot due to NDA. Thus I am hoping someone understand what they are
> > referring to as a pop-over. I was treating it as a modal.
> >
> >
> >
> >
> >
> > > > > >
> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=k9RxXPG0IbXcfD_dCOI8QG1JlF8WHSolTTjyiiN53gc&s=ILBaySO2f2eLKfdPymdVOEJngLnSjfnpZUhoGuYoeCE&e=
> > List archives at
> >
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=k9RxXPG0IbXcfD_dCOI8QG1JlF8WHSolTTjyiiN53gc&s=lp4JgkFS-IWlw3GJY-7lg4a67UG0T0A-zkiBbu-pQmI&e=
> > > >
>
>
> --
> *Brian Lovely*
> Digital Accessibility
> 804.389.1064
> >
> 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.
> > > > >
From: John Martyn
Date: Fri, Dec 21 2018 10:13AM
Subject: Re: [External Sender] Pop-over UI design
← Previous message | Next message →
Sometimes the only way to handle pop-ups in the jaws buffer is depressed
insert a scape in force refresh the virtual offer to show items. They
sometimes appear at the very bottom of the virtual buffer so you can get to
them. Hope this helps, John BTW the virtual buffer is going away since
Internet explorer is being dumped in favor of Microsoft edge. Edge is true
you are a components and any other browser is not.
On Fri, Dec 21, 2018 at 9:55 AM Yoandry Collazo < = EMAIL ADDRESS REMOVED = >
wrote:
> Hi, I'm not a specialist but I'll share what I learn about pop-up
> accessibility.
>
> Pop-up windows provide a unique accessibility concern. First of all, most
> usability experts would argue against the use of pop-up windows except in
> extreme cases. link <https://webaim.org/techniques/javascript/other>
>
> For example: If you have an Input field where the user should enter a
> color, you should show a pop-up with a color palette to make it easy for
> the user interface.
> In this situation, you should care about DOM order, because of the DOM
> order matter
> <
> https://developers.google.com/web/fundamentals/accessibility/focus/dom-order-matters
> >
> a
> modal always render her code at the end of the body, and you could
> experience focus order problems. a pop-up always renders on his container.
> You'll need to care about keyboard navigation when you focus your input the
> user should receive a description with instructions about how to use this
> field.
> Once inside the pop-up, you should bring an escape option on the top, then
> when the user selected his favorite color should have a summit option to
> confirm her selection. the pop-up will close but the focus should remain on
> the input field.
>
> I hope this helps.
> Yoandry
>
>
> On Fri, Dec 21, 2018 at 9:00 AM Brian Lovely via WebAIM-Forum <
> = EMAIL ADDRESS REMOVED = > wrote:
>
> > Does is consist of a list of links, or is it more in the nature of a
> modal
> > with a variety of elements (form, paragraph, heading)?
> >
> > On Fri, Dec 21, 2018 at 1:27 AM < = EMAIL ADDRESS REMOVED = > wrote:
> >
> > > All,
> > >
> > >
> > >
> > > I have a situation of a web ap which is using what the devs call is a
> > > pop-over. I am wondering what is the best practice here is for such UI
> > > design? How should this be handled with accessibility. I cannot show
> code
> > > or
> > > screen shot due to NDA. Thus I am hoping someone understand what they
> are
> > > referring to as a pop-over. I was treating it as a modal.
> > >
> > >
> > >
> > >
> > >
> > > > > > > > >
> >
> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=k9RxXPG0IbXcfD_dCOI8QG1JlF8WHSolTTjyiiN53gc&s=ILBaySO2f2eLKfdPymdVOEJngLnSjfnpZUhoGuYoeCE&e=
> > > List archives at
> > >
> >
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=k9RxXPG0IbXcfD_dCOI8QG1JlF8WHSolTTjyiiN53gc&s=lp4JgkFS-IWlw3GJY-7lg4a67UG0T0A-zkiBbu-pQmI&e=
> > > > > >
> >
> >
> > --
> > *Brian Lovely*
> > Digital Accessibility
> > 804.389.1064
> > > >
> > 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.
> > > > > > > > > >
> > > > >
From: Sean Murphy
Date: Fri, Dec 21 2018 3:58PM
Subject: Re: [External Sender] Pop-over UI design
← Previous message | Next message →
Thank you everyone.
The popover from a screen reader point of you looks like a modal. The popover is activated by pressing a button and then you get a range of form fields or grids to activate different options. The popovers appear at the top of the virtual buffer based upon how the injecting the information into the DOM
Personally I think they should be a modal not a pop over. I'm not sure how they look visually. They aren't acting like modals because you can still access the other information on the webpage. The developers indicate by using the mouse you can click outside of the popover to perform other actions.
My experience is the part
> On 22 Dec 2018, at 3:55 am, Yoandry Collazo < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi, I'm not a specialist but I'll share what I learn about pop-up
> accessibility.
>
> Pop-up windows provide a unique accessibility concern. First of all, most
> usability experts would argue against the use of pop-up windows except in
> extreme cases. link <https://webaim.org/techniques/javascript/other>
>
> For example: If you have an Input field where the user should enter a
> color, you should show a pop-up with a color palette to make it easy for
> the user interface.
> In this situation, you should care about DOM order, because of the DOM
> order matter
> <https://developers.google.com/web/fundamentals/accessibility/focus/dom-order-matters>
> a
> modal always render her code at the end of the body, and you could
> experience focus order problems. a pop-up always renders on his container.
> You'll need to care about keyboard navigation when you focus your input the
> user should receive a description with instructions about how to use this
> field.
> Once inside the pop-up, you should bring an escape option on the top, then
> when the user selected his favorite color should have a summit option to
> confirm her selection. the pop-up will close but the focus should remain on
> the input field.
>
> I hope this helps.
> Yoandry
>
>
> On Fri, Dec 21, 2018 at 9:00 AM Brian Lovely via WebAIM-Forum <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> Does is consist of a list of links, or is it more in the nature of a modal
>> with a variety of elements (form, paragraph, heading)?
>>
>>> On Fri, Dec 21, 2018 at 1:27 AM < = EMAIL ADDRESS REMOVED = > wrote:
>>>
>>> All,
>>>
>>>
>>>
>>> I have a situation of a web ap which is using what the devs call is a
>>> pop-over. I am wondering what is the best practice here is for such UI
>>> design? How should this be handled with accessibility. I cannot show code
>>> or
>>> screen shot due to NDA. Thus I am hoping someone understand what they are
>>> referring to as a pop-over. I was treating it as a modal.
>>>
>>>
>>>
>>>
>>>
>>> >>> >>>
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=k9RxXPG0IbXcfD_dCOI8QG1JlF8WHSolTTjyiiN53gc&s=ILBaySO2f2eLKfdPymdVOEJngLnSjfnpZUhoGuYoeCE&e>>> List archives at
>>>
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=k9RxXPG0IbXcfD_dCOI8QG1JlF8WHSolTTjyiiN53gc&s=lp4JgkFS-IWlw3GJY-7lg4a67UG0T0A-zkiBbu-pQmI&e>>> >>>
>>
>>
>> --
>> *Brian Lovely*
>> Digital Accessibility
>> 804.389.1064
>> >>
>> 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.
>> >> >> >> >>
> > > >
From: David Engebretson
Date: Fri, Dec 21 2018 4:30PM
Subject: Re: [External Sender] Pop-over UI design
← Previous message | No next message
I've run into this, too.
I like the idea where these popovers pop up as modal.
Then the user can determine what they want to do with the content involved in the popover. And, It gives users more autonomy in their user experience.
At the same time it allows designers and developers to create creative, and accessible, user interfaces.
Best,
David
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Sean Murphy
Sent: Friday, December 21, 2018 2:58 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] [External Sender] Pop-over UI design
Thank you everyone.
The popover from a screen reader point of you looks like a modal. The popover is activated by pressing a button and then you get a range of form fields or grids to activate different options. The popovers appear at the top of the virtual buffer based upon how the injecting the information into the DOM
Personally I think they should be a modal not a pop over. I'm not sure how they look visually. They aren't acting like modals because you can still access the other information on the webpage. The developers indicate by using the mouse you can click outside of the popover to perform other actions.
My experience is the part
> On 22 Dec 2018, at 3:55 am, Yoandry Collazo < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi, I'm not a specialist but I'll share what I learn about pop-up
> accessibility.
>
> Pop-up windows provide a unique accessibility concern. First of all,
> most usability experts would argue against the use of pop-up windows
> except in extreme cases. link
> <https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fweba
> im.org%2Ftechniques%2Fjavascript%2Fother&data%7C01%7Cengebrd2%4
> 0wwu.edu%7Cb4311be5efa1437af61a08d66798e0fd%7Cdc46140ce26f43efb0ae00f2
> 57f478ff%7C0%7C0%7C636810303645073297&sdata=T8ydxaHl771ysWBgmarqlX
> t9oC2W20aUwLaZEhe4ttY%3D&reserved=0>
>
> For example: If you have an Input field where the user should enter a
> color, you should show a pop-up with a color palette to make it easy
> for the user interface.
> In this situation, you should care about DOM order, because of the DOM
> order matter
> <https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdeve
> lopers.google.com%2Fweb%2Ffundamentals%2Faccessibility%2Ffocus%2Fdom-o
> rder-matters&data%7C01%7Cengebrd2%40wwu.edu%7Cb4311be5efa1437af
> 61a08d66798e0fd%7Cdc46140ce26f43efb0ae00f257f478ff%7C0%7C0%7C636810303
> 645073297&sdata=2Wk%2FQwHzJmgBDqes74aUs5SgVtelJkkPLXsiXlJnV5U%3D&a
> mp;reserved=0>
> a
> modal always render her code at the end of the body, and you could
> experience focus order problems. a pop-up always renders on his container.
> You'll need to care about keyboard navigation when you focus your
> input the user should receive a description with instructions about
> how to use this field.
> Once inside the pop-up, you should bring an escape option on the top,
> then when the user selected his favorite color should have a summit
> option to confirm her selection. the pop-up will close but the focus
> should remain on the input field.
>
> I hope this helps.
> Yoandry
>
>
> On Fri, Dec 21, 2018 at 9:00 AM Brian Lovely via WebAIM-Forum <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> Does is consist of a list of links, or is it more in the nature of a
>> modal with a variety of elements (form, paragraph, heading)?
>>
>>> On Fri, Dec 21, 2018 at 1:27 AM < = EMAIL ADDRESS REMOVED = > wrote:
>>>
>>> All,
>>>
>>>
>>>
>>> I have a situation of a web ap which is using what the devs call is
>>> a pop-over. I am wondering what is the best practice here is for
>>> such UI design? How should this be handled with accessibility. I
>>> cannot show code or screen shot due to NDA. Thus I am hoping someone
>>> understand what they are referring to as a pop-over. I was treating
>>> it as a modal.
>>>
>>>
>>>
>>>
>>>
>>> >>> >>>
>> https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Furld
>> efense.proofpoint.com%2Fv2%2Furl%3Fu%3Dhttp-3A__list.webaim.org_%26d%
>> 3DDwICAg%26c%3DpLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE%26r%3DnA3L
>> 5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE%26m%3Dk9RxXPG0IbXcfD_dCOI8QG1
>> JlF8WHSolTTjyiiN53gc%26s%3DILBaySO2f2eLKfdPymdVOEJngLnSjfnpZUhoGuYoeC
>> E%26e&data%7C01%7Cengebrd2%40wwu.edu%7Cb4311be5efa1437af61a08d
>> 66798e0fd%7Cdc46140ce26f43efb0ae00f257f478ff%7C0%7C0%7C63681030364507
>> 3297&sdata=RCYvKeqyW81muXDQS75ZVYL8CxNob973RFUiueRqSII%3D&res
>> erved=0>>> List archives at
>>>
>> https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Furld
>> efense.proofpoint.com%2Fv2%2Furl%3Fu%3Dhttp-3A__webaim.org_discussion
>> _archives%26d%3DDwICAg%26c%3DpLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0Bp
>> TJE%26r%3DnA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE%26m%3Dk9RxXPG0I
>> bXcfD_dCOI8QG1JlF8WHSolTTjyiiN53gc%26s%3Dlp4JgkFS-IWlw3GJY-7lg4a67UG0
>> T0A-zkiBbu-pQmI%26e&data%7C01%7Cengebrd2%40wwu.edu%7Cb4311be5e
>> fa1437af61a08d66798e0fd%7Cdc46140ce26f43efb0ae00f257f478ff%7C0%7C0%7C
>> 636810303645073297&sdata=rMDK4t%2BxMx89DV20YClXJflx992Ax6yUVfMIZZ
>> NaOug%3D&reserved=0>>> >>>
>>
>>
>> --
>> *Brian Lovely*
>> Digital Accessibility
>> 804.389.1064
>> >>
>> 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.
>> >> >> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.
>> webaim.org%2F&data%7C01%7Cengebrd2%40wwu.edu%7Cb4311be5efa1437
>> af61a08d66798e0fd%7Cdc46140ce26f43efb0ae00f257f478ff%7C0%7C0%7C636810
>> 303645073297&sdata=J8DVktWszlCq%2F2PCbN4SB9dgITCim0cvkLpL1XQNXRw%
>> 3D&reserved=0 List archives at
>> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebai
>> m.org%2Fdiscussion%2Farchives&data%7C01%7Cengebrd2%40wwu.edu%7
>> Cb4311be5efa1437af61a08d66798e0fd%7Cdc46140ce26f43efb0ae00f257f478ff%
>> 7C0%7C0%7C636810303645073297&sdata=%2Bn34ZJebDlFaVNfzRChTmxxGpkcb
>> gdZCT5nhMqSx1m0%3D&reserved=0 >> = EMAIL ADDRESS REMOVED =
>>
> > > https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.w
> ebaim.org%2F&data%7C01%7Cengebrd2%40wwu.edu%7Cb4311be5efa1437af
> 61a08d66798e0fd%7Cdc46140ce26f43efb0ae00f257f478ff%7C0%7C0%7C636810303
> 645073297&sdata=J8DVktWszlCq%2F2PCbN4SB9dgITCim0cvkLpL1XQNXRw%3D&a
> mp;reserved=0 List archives at
> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim
> .org%2Fdiscussion%2Farchives&data%7C01%7Cengebrd2%40wwu.edu%7Cb
> 4311be5efa1437af61a08d66798e0fd%7Cdc46140ce26f43efb0ae00f257f478ff%7C0
> %7C0%7C636810303645073297&sdata=%2Bn34ZJebDlFaVNfzRChTmxxGpkcbgdZC
> T5nhMqSx1m0%3D&reserved=0 > = EMAIL ADDRESS REMOVED =