WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender] Pop-over UI design

for

From: John Martyn
Date: Dec 21, 2018 10:13AM

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