WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Collapsible Braedcrumb Pattern

for

From: Patrick H. Lauke
Date: Aug 8, 2018 9:15AM

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.accessibility.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