WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender] Pop-over UI design

for

From: Sean Murphy
Date: Dec 21, 2018 3:58PM

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