WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender] Pop-over UI design

for

From: David Engebretson
Date: Dec 21, 2018 4:30PM

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 REMOVED> > On Behalf Of Sean Murphy
Sent: Friday, December 21, 2018 2:58 PM
To: WebAIM Discussion List < <EMAIL 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 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&amp;data%7C01%7Cengebrd2%4
> 0wwu.edu%7Cb4311be5efa1437af61a08d66798e0fd%7Cdc46140ce26f43efb0ae00f2
> 57f478ff%7C0%7C0%7C636810303645073297&amp;sdata=T8ydxaHl771ysWBgmarqlX
> t9oC2W20aUwLaZEhe4ttY%3D&amp;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&amp;data%7C01%7Cengebrd2%40wwu.edu%7Cb4311be5efa1437af
> 61a08d66798e0fd%7Cdc46140ce26f43efb0ae00f257f478ff%7C0%7C0%7C636810303
> 645073297&amp;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 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 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&amp;data%7C01%7Cengebrd2%40wwu.edu%7Cb4311be5efa1437af61a08d
>> 66798e0fd%7Cdc46140ce26f43efb0ae00f257f478ff%7C0%7C0%7C63681030364507
>> 3297&amp;sdata=RCYvKeqyW81muXDQS75ZVYL8CxNob973RFUiueRqSII%3D&amp;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&amp;data%7C01%7Cengebrd2%40wwu.edu%7Cb4311be5e
>> fa1437af61a08d66798e0fd%7Cdc46140ce26f43efb0ae00f257f478ff%7C0%7C0%7C
>> 636810303645073297&amp;sdata=rMDK4t%2BxMx89DV20YClXJflx992Ax6yUVfMIZZ
>> NaOug%3D&amp;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&amp;data%7C01%7Cengebrd2%40wwu.edu%7Cb4311be5efa1437
>> af61a08d66798e0fd%7Cdc46140ce26f43efb0ae00f257f478ff%7C0%7C0%7C636810
>> 303645073297&amp;sdata=J8DVktWszlCq%2F2PCbN4SB9dgITCim0cvkLpL1XQNXRw%
>> 3D&amp;reserved=0 List archives at
>> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebai
>> m.org%2Fdiscussion%2Farchives&amp;data%7C01%7Cengebrd2%40wwu.edu%7
>> Cb4311be5efa1437af61a08d66798e0fd%7Cdc46140ce26f43efb0ae00f257f478ff%
>> 7C0%7C0%7C636810303645073297&amp;sdata=%2Bn34ZJebDlFaVNfzRChTmxxGpkcb
>> gdZCT5nhMqSx1m0%3D&amp;reserved=0 >> <EMAIL REMOVED>
>>
> > > https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.w
> ebaim.org%2F&amp;data%7C01%7Cengebrd2%40wwu.edu%7Cb4311be5efa1437af
> 61a08d66798e0fd%7Cdc46140ce26f43efb0ae00f257f478ff%7C0%7C0%7C636810303
> 645073297&amp;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&amp;data%7C01%7Cengebrd2%40wwu.edu%7Cb
> 4311be5efa1437af61a08d66798e0fd%7Cdc46140ce26f43efb0ae00f257f478ff%7C0
> %7C0%7C636810303645073297&amp;sdata=%2Bn34ZJebDlFaVNfzRChTmxxGpkcbgdZC
> T5nhMqSx1m0%3D&amp;reserved=0 > <EMAIL REMOVED>