WebAIM - Web Accessibility In Mind

E-mail List Archives

Collapsible Braedcrumb Pattern

for

From: Robert Fentress
Date: Aug 1, 2018 8:45AM

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>