WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Collapsible Braedcrumb Pattern

for

From: Robert Fentress
Date: Aug 20, 2018 2:51PM


FYI: I tested the string I mentioned earlier, "Expand/collapse breadcrumb
path", in both Windows Speech Recognition and Dragon Naturally Speaking
14.0. Here are the results:

- *Windows Speech Recognition* responded to "click expand", "click
collapse", "click breadcrumb", "click path", "click breadcrumb path",
"click expand breadcrumb", "click collapse breadcrumb", "click expand
path", "click collapse path", "click expand collapse breadcrumb path"
- *Dragon Naturally Speaking 14.0* responded to "click breadcrumb",
"click path", "click breadcrumb path"

If I surrounded the slash with spaces, however, making the string "Expand /
collapse breadcrumb path", then Dragon Naturally Speaking 14.0 responded to
all of the commands that Windows Speech Recognition did, and Windows Speech
Recognition still responded to all of those as well.

So the upshot is, if you're using this strategy, surround your slashes with
spaces.

On Mon, Aug 20, 2018 at 11:22 AM Robert Fentress < <EMAIL REMOVED> > wrote:

> Yes, Isabel. Actually, that was one of things our UX designer encountered
> when he was doing some quick guerrilla usability testing of the pattern
> with folks. He found that 50% of users know what a path is; 30% knew what
> breadcrumbs were (complete overlap with path); and 50% knew neither term.
> So, from that brief check, path seems like a better way to describe it.
> However, I think "Expand/collapse breadcrumb path" may be best. At the
> cost of a little extra verbosity, that should let speech recognition users
> activate the control by saying "click expand", "click collapse", "click
> breadcrumb", "click path", or "click breadcrumb path". I think; I still
> need to confirm that would work as described.
>
> On Wed, 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?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>
>> >> > >> >> > >> >> > 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?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>
>> > >> > >> > >> > >> >
>> >> >> >> >>
>
>
> --
> *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>