WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Collapsible Braedcrumb Pattern

for

From: Robert Fentress
Date: Aug 1, 2018 9:42AM

Just realized the embedded images didn't come through. See attached for
collapsed and expanded state, which are described in text in the previous
message..

On Wed, Aug 1, 2018 at 10:45 AM Robert Fentress < <EMAIL REMOVED> > wrote:

> We have an interesting pattern we plan to use on our site, but I'm unsure
> how to code it to be accessible. Basically, at larger viewports, we have a
> horizontal breadcrumb, but to economize on space on mobile, we only show
> the first link in the list, which is the site name, followed by a button
> with three horizontal dots in it.
>
>
>
> Clicking the button then causes the rest of the breadcrumb to appear
> horizontally.
>
>
>
> I suppose I could, at a minimum, have the accessible name for the button
> be "Show full breadcrumb", and add aria-controls pointing back to the IDREF
> of the breadcrumb which would be changing. However, it seems a little
> weird. It's sort of like a disclosure, but not really and the triggering
> button follows what is being disclosed. Should I use aria-expanded on the
> button? Should I float the button or use flexbox so it actually comes
> before the breadcrumb in the tab order? Anything else I could do to make
> the relationship clearer?
>
> Another option might be to have the full breadcrumb be there all the time,
> but with the height set to the line-height and overflow set to hidden, such
> that only the first link is visible by default. Then, if the user tabs to
> the next link in the breadcrumb, the height would be set to auto, revealing
> the full breadcrumb. When you tabbed past the breadcrumb, the height would
> again be set to the line-height, with only the first link being visible.
> In this scenario, there would still be the expansion button following the
> breadcrumb, but it would simply be toggling between styles where the height
> is the line-height or auto. The accessible name for the button, then,
> would provide some additional cue for screen reader users that the
> expansion button only affects the visible appearance of the breadcrumb.
>
> What do you think? You seen anything like this before? I think in our
> case at least, it is a good way of using space efficiently while still
> providing access to mechanisms that can help in wayfinding.
>
> --
> *Rob Fentress*
> *Web Accessibility Solutions Designer*
> Accessible Technologies at Virginia Tech
> Electronic Business Card (vCard)
> <http://search.vt.edu/search/person.vcf?person=1154847>;
> LinkedIn Profile
> <https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
> VT Zoom Personal Conferencing
> <https://virginiatech.zoom.us/my/rob.fentress>
>


--
*Rob Fentress*
*Web Accessibility Solutions Designer*
Accessible Technologies at Virginia Tech
Electronic Business Card (vCard)
<http://search.vt.edu/search/person.vcf?person=1154847>;
LinkedIn Profile
<https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
VT Zoom Personal Conferencing <https://virginiatech.zoom.us/my/rob.fentress>