WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Collapsible Braedcrumb Pattern

for

From: Robert Fentress
Date: Aug 20, 2018 3:25PM

Another FYI: Dragon 14.0 does not appear to recognize buttons labelled
using aria-labelledby. However, it does recognize anchor tags labelled
this way. Also, rather strangely, it does respond if you change the role
of the anchor tag to button with role="button".

So this works:

<a aria-labelledby="tooltip" href="#" onclick="alert('success!');
return false;" role="button">test</a>
<div role="tooltip" id="tooltip" class="sr-only">Expand / collapse
breadcrumb path</div>

But this doesn't:

<button aria-labelledby="tooltip" onclick="alert('success!');">test</button>
<div role="tooltip" id="tooltip" class="sr-only">Expand / collapse
breadcrumb path</div>

Anybody know if this works better in more recent versions of Dragon?


On Mon, Aug 20, 2018 at 4:51 PM Robert Fentress < <EMAIL REMOVED> > wrote:

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


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