WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Collapsible Braedcrumb Pattern

for

From: Isabel Holdsworth
Date: Aug 8, 2018 8:02AM

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