WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Collapsible Braedcrumb Pattern

for

From: Steve Green
Date: Aug 1, 2018 9:44AM

There is no attachment.

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

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>