WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Collapsible Braedcrumb Pattern

for

From: Robert Fentress
Date: Aug 1, 2018 3:40PM

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