WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Collapsible Braedcrumb Pattern

for

From: Robert Fentress
Date: Aug 20, 2018 9:22AM

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>