WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Collapsible Braedcrumb Pattern

for

From: Joe Chidzik
Date: Aug 9, 2018 7:19AM

I like this. I looked up the story of the minotaur on Wikipedia, and ended up on the linked page on "Ariadne's thread (logic)."

"...named for the legend of Ariadne, is the solving of a problem with multiple apparent means of proceeding - such as a physical maze, a logic puzzle, or an ethical dilemma".

Now the name of Ariadne from Inception, who was adept at creating mazes, makes sense.

On topic: it was Hansel and Gretel that I remembered when first encountering the term Breadcrumb trail, and helped me understand it's purpose.

Joe

> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf
> Of Patrick H. Lauke
> Sent: 08 August 2018 16:16
> To: <EMAIL REMOVED>
> Subject: Re: [WebAIM] Collapsible Braedcrumb Pattern
>
> Unrelated, but something that tickled me a while a go: in french, breadcrumbs
> are called "fil d'ariane" (Ariane's thread, from the story of the Minotaur in Greek
> mythology).
>
> P
>
> On 08/08/2018 16:06, Jonathan Cohn wrote:
> > That took me less time to understand the structure than when I came across
> "Hamburgers" in my web pages.
> >
> > Of course I had Hansel and Greta read to me as a child, so I am sure that
> helped me understand the term breadcrumb when I first encountered it on a
> web site.
> >
> >
> >
> >> On Aug 8, 2018, at 10:02 AM, Isabel Holdsworth
> < <EMAIL REMOVED> > wrote:
> >>
> >> Just out of interest, I wonder if "breadcrumbs" is a term understood
> >> more by devs and designers than by actual users. Would a
> >> screenreader-user understand what was meant by "view full breadcrumb?"
> >>
> >> On 01/08/2018, Robert Fentress < <EMAIL REMOVED> > wrote:
> >>> Thanks, Jon! That's what I was thinking of. Unfortunately, when I go to
> >>> it in the Google Play Store on my device, it says "The early access program
> >>> is currently full. Space may open up later." Bummer.
> >>>
> >>> On Wed, Aug 1, 2018 at 2:29 PM Jonathan Avila
> < <EMAIL REMOVED> >
> >>> wrote:
> >>>
> >>>> The Voice Access App can be found at
> >>>>
> https://play.google.com/store/apps/details?id=com.google.android.apps.access
> ibility.voiceaccess
> >>>>
> >>>>
> >>>> Jonathan Avila
> >>>> Chief Accessibility Officer
> >>>> Level Access
> >>>> <EMAIL REMOVED>
> >>>> 703.637.8957 office
> >>>>
> >>>> Visit us online:
> >>>> Website | Twitter | Facebook | LinkedIn | Blog
> >>>>
> >>>> Looking to boost your accessibility knowledge? Check out our free
> >>>> webinars!
> >>>>
> >>>> The information contained in this transmission may be attorney privileged
> >>>> and/or confidential information intended for the use of the individual or
> >>>> entity named above. If the reader of this message is not the intended
> >>>> recipient, you are hereby notified that any use, dissemination,
> >>>> distribution or copying of this communication is strictly prohibited.
> >>>>
> >>>> -----Original Message-----
> >>>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ]
> On
> >>>> Behalf Of Robert Fentress
> >>>> Sent: Wednesday, August 01, 2018 12:07 PM
> >>>> To: WebAIM Discussion List
> >>>> Subject: Re: [WebAIM] Collapsible Braedcrumb Pattern
> >>>>
> >>>> Any kind of icon button is a challenge in that regard. I planned to have
> >>>> an accessible name and tooltip that would appear on focus or hover, but
> >>>> that doesn't really help speech recognition users so much, unless they do
> >>>> "Press tab" a million times, or use mouse grid. Of course, they could
> >>>> say
> >>>> "click button" and then choose the number that appeared over this
> >>>> particular button. Not ideal, but I'd think that'd be the way to handle
> >>>> that circumstance (in Dragon and Windows Speech Recognition anyway).
> >>>> This
> >>>> kind of speech recognition and control software really needs a feature
> >>>> that
> >>>> displays the accessible name for all elements on the page, or maybe all
> >>>> elements of a certain type like buttons or images. Having visual labels
> >>>> for icon buttons is not always possible in a design.
> >>>>
> >>>> As far as voice control on mobile devices, I know Google had a beta test
> >>>> of
> >>>> an Android app that let you control everything on the screen with your
> >>>> voice, and I think it may have even had text-to-speech incorporated in it
> >>>> as well. Unfortunately, it was a limited release and I was too late to
> >>>> sign up to test the app by the time I learned of it. Can't wait until
> >>>> that
> >>>> get's released though! Anyone else know anything about that?
> >>>>
> >>>> On Wed, Aug 1, 2018 at 10:58 AM Steve Green <
> >>>> <EMAIL REMOVED> >
> >>>> wrote:
> >>>>
> >>>>> 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?person54847>
> >>>>> LinkedIn Profile
> >>>>> <https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-
> badge>
> >>>>> VT Zoom Personal Conferencing <
> >>>>> https://virginiatech.zoom.us/my/rob.fentress>
> >>>>> > >>>>> > >>>>> archives
> >>>>> 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?person54847>
> >>>> 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?person54847>
> >>> LinkedIn Profile
> >>> <https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
> >>> VT Zoom Personal Conferencing
> >>> <https://virginiatech.zoom.us/my/rob.fentress>
> >>> > >>> > >>> > >>> > >>>
> >> > >> > >> > >> > >
> > > > > > > > > >
>
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > >