WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender] Pop-over UI design


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

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

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