WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Collapsible Braedcrumb Pattern

for

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

Strange. They show up on mine, but I'm not sure how the listserv handles
such things.

Lets try just providing links to the images:

- Collapsible Breadcrumb (Collapsed)
<http://www.test.assist.vt.edu/sandbox/breadcrumb-collapsed.jpg>;
- Collapsible Breadcrumb (Expanded)
<http://www.test.assist.vt.edu/sandbox/breadcrumb-expanded.jpg>;

Third time's the charm (I hope).

On Wed, Aug 1, 2018 at 11:44 AM Steve Green < <EMAIL REMOVED> >
wrote:

> 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>
> > > at http://webaim.org/discussion/archives
> > > > > >


--
*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>