WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Collapsible Braedcrumb Pattern

for

From: Steve Green
Date: Aug 1, 2018 8:58AM

I don't think screen reader users are a problem. I would probably design the feature so they always hear all the links and are not even aware of the expand / collapse status.

I would be more concerned about how someone using voice recognition software would interact with it, although that's probably an issue for the future because there currently seems to be just about zero support for web browsing using voice control on mobile devices, either natively or via an app. If anyone knows any differently, I would be very interested to hear what is available. I have never encountered voice recognition software that reveals the accessible name to the user, so it would not be possible to interact with the "dot dot dot" link unless the accessible name is obvious.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Robert Fentress
Sent: 01 August 2018 15:45
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Collapsible Braedcrumb Pattern

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>