WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Collapsible Braedcrumb Pattern

for

From: Robert Fentress
Date: Aug 1, 2018 10:06AM

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