WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Collapsible Braedcrumb Pattern

for

From: Angela French
Date: Aug 8, 2018 9:28AM

Whoever invented the term 'hamburger' for the collapsed menu must have been hungry!

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Jonathan Cohn
Sent: Wednesday, August 8, 2018 8:06 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Collapsible Braedcrumb Pattern

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