E-mail List Archives
Thread: Web Accesibility and popovers
Number of posts in this thread: 5 (In chronological order)
From:
Subject: Web Accesibility and popovers
No previous message | Next message →
I am about to use bootstrap popover to show some content after the user
clicks a button. These popovers allow you to add wherever content and this
content will appear in a small box next to the element that trigger the
action.
This content can have 'buttons' for further actions.
Checking the accessibility I found:
- use aria-describedby to link the content.
- the element only has aria-describedby when the popover is visible in
the screen after clicking the button for example.
It is a good way to provide accessibility to an element like that? How you
will do it if you have the freedom to implement the component from scratch?
This is an example:
https://codepen.io/luarmr/pen/JVJGMJ
This is the original component in bootstrap doc:
https://getbootstrap.com/docs/4.0/components/popovers/
From: glen walker
Date: Thu, Apr 11 2019 4:59PM
Subject: Re: Web Accesibility and popovers
← Previous message | Next message →
When I tab to the info button, the tooltip automatically displays but is
not announced. If I tab again to the x-close button in the tooltip, the
tooltip disappears as soon as the x-close receives focus.
It looks like you're adding the aria-describedby attribute on the fly.
When the attribute is added, it won't be announced. I'd have to tab off
the info button and then back to it to hear the aria-describedby value.
However, tabbing off the info button causes the tooltip to disappear and
thus the aria-describedby attribute to be removed. Thus I never hear the
tooltip.
aria-describedby is only helpful if it exists on your element all the
time. Don't add it dynamically. The element it points to can be hidden
(display:none) but the text of the tooltip will still be read when your
button receives focus (see step 2A -
https://www.w3.org/TR/accname-1.1/#step2)
Glen
From:
Subject: Re: Web Accesibility and popovers
← Previous message | Next message →
Thanks, Glen!
This makes sense. I wonder if this should be a bug in the bootstrap
repository.
I am trying to find a way to add dynamically the content, for example
pointing the describedBy to an empty div that I can populate when the
content is needed.
Or using a different set of aria-attributes, like aria-haspopup
On Thu, Apr 11, 2019 at 3:59 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> When I tab to the info button, the tooltip automatically displays but is
> not announced. If I tab again to the x-close button in the tooltip, the
> tooltip disappears as soon as the x-close receives focus.
>
> It looks like you're adding the aria-describedby attribute on the fly.
> When the attribute is added, it won't be announced. I'd have to tab off
> the info button and then back to it to hear the aria-describedby value.
> However, tabbing off the info button causes the tooltip to disappear and
> thus the aria-describedby attribute to be removed. Thus I never hear the
> tooltip.
>
> aria-describedby is only helpful if it exists on your element all the
> time. Don't add it dynamically. The element it points to can be hidden
> (display:none) but the text of the tooltip will still be read when your
> button receives focus (see step 2A -
> https://www.w3.org/TR/accname-1.1/#step2)
>
> Glen
> > > > >
From: Patrick H. Lauke
Date: Thu, Apr 11 2019 6:39PM
Subject: Re: Web Accesibility and popovers
← Previous message | Next message →
While not explicitly stated in the bootstrap documentation, popovers
(similar to tooltips) are really not currently meant to contain
interactive content (though this is something planned, in a much more
structured way, in future releases).
In your example, you seem to be using the hover trigger only. This makes
it unworkable for keyboard users.
I'd note that if you have anything focusable in the popover, I'd stay
clear of the using just the focus and hover triggers, as the focus one
will only show the popover when the trigger element has focus...as soon
as you try to move to the interactive elements in the popover itself, it
will close/disapper. You can probably use a combined click and hover
trigger.
Make sure there's an actual visible focus indication when that button
gets focus (currently you're suppressing outline, for instance).
In some mild testing, the aria-describedby seemed to work, which is why
bootstrap uses this approach. Glen, which combination of browser/AT was
causing problems for you?
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Patrick H. Lauke
Date: Thu, Apr 11 2019 6:40PM
Subject: Re: Web Accesibility and popovers
← Previous message | No next message
Related ... some initial thoughts about popovers in bootstrap and what
could be done with them in future (probably v5)
https://github.com/twbs/bootstrap/issues/28446
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke