WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Collapsible Braedcrumb Pattern

for

From: Jonathan Cohn
Date: Aug 8, 2018 9:06AM

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