WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender] Pop-over UI design

for

From: Yoandry Collazo
Date: Dec 21, 2018 9:55AM

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