WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Collapsible Braedcrumb Pattern

for

Number of posts in this thread: 16 (In chronological order)

From: Robert Fentress
Date: Wed, Aug 01 2018 8:45AM
Subject: Collapsible Braedcrumb Pattern
No previous message | Next message →

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>

From: Steve Green
Date: Wed, Aug 01 2018 8:58AM
Subject: Re: Collapsible Braedcrumb Pattern
← Previous message | Next message →

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 ADDRESS REMOVED = > On Behalf Of Robert Fentress
Sent: 01 August 2018 15:45
To: WebAIM Discussion List < = EMAIL ADDRESS 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>

From: Robert Fentress
Date: Wed, Aug 01 2018 9:42AM
Subject: Re: Collapsible Braedcrumb Pattern
← Previous message | Next message →

Just realized the embedded images didn't come through. See attached for
collapsed and expanded state, which are described in text in the previous
message..

On Wed, Aug 1, 2018 at 10:45 AM Robert Fentress < = EMAIL ADDRESS REMOVED = > wrote:

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


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

From: Steve Green
Date: Wed, Aug 01 2018 9:44AM
Subject: Re: Collapsible Braedcrumb Pattern
← Previous message | Next message →

There is no attachment.

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Robert Fentress
Sent: 01 August 2018 16:43
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Collapsible Braedcrumb Pattern

Just realized the embedded images didn't come through. See attached for collapsed and expanded state, which are described in text in the previous message..

On Wed, Aug 1, 2018 at 10:45 AM Robert Fentress < = EMAIL ADDRESS REMOVED = > wrote:

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


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

From: Robert Fentress
Date: Wed, Aug 01 2018 9:50AM
Subject: Re: Collapsible Braedcrumb Pattern
← Previous message | Next message →

Strange. They show up on mine, but I'm not sure how the listserv handles
such things.

Lets try just providing links to the images:

- Collapsible Breadcrumb (Collapsed)
<http://www.test.assist.vt.edu/sandbox/breadcrumb-collapsed.jpg>;
- Collapsible Breadcrumb (Expanded)
<http://www.test.assist.vt.edu/sandbox/breadcrumb-expanded.jpg>;

Third time's the charm (I hope).

On Wed, Aug 1, 2018 at 11:44 AM Steve Green < = EMAIL ADDRESS REMOVED = >
wrote:

> There is no attachment.
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Robert Fentress
> Sent: 01 August 2018 16:43
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Collapsible Braedcrumb Pattern
>
> Just realized the embedded images didn't come through. See attached for
> collapsed and expanded state, which are described in text in the previous
> message..
>
> On Wed, Aug 1, 2018 at 10:45 AM Robert Fentress < = EMAIL ADDRESS REMOVED = > wrote:
>
> > 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>
> >
>
>
> --
> *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>

From: Robert Fentress
Date: Wed, Aug 01 2018 10:06AM
Subject: Re: Collapsible Braedcrumb Pattern
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Robert Fentress
> Sent: 01 August 2018 15:45
> To: WebAIM Discussion List < = EMAIL ADDRESS 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>

From: Jonathan Avila
Date: Wed, Aug 01 2018 12:28PM
Subject: Re: Collapsible Braedcrumb Pattern
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Robert Fentress
> Sent: 01 August 2018 15:45
> To: WebAIM Discussion List < = EMAIL ADDRESS 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>

From: Robert Fentress
Date: Wed, Aug 01 2018 3:40PM
Subject: Re: Collapsible Braedcrumb Pattern
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> > Robert Fentress
> > Sent: 01 August 2018 15:45
> > To: WebAIM Discussion List < = EMAIL ADDRESS 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>

From: Isabel Holdsworth
Date: Wed, Aug 08 2018 8:02AM
Subject: Re: Collapsible Braedcrumb Pattern
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>> > Robert Fentress
>> > Sent: 01 August 2018 15:45
>> > To: WebAIM Discussion List < = EMAIL ADDRESS 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>
> > > > >

From: Jonathan Cohn
Date: Wed, Aug 08 2018 9:06AM
Subject: Re: Collapsible Braedcrumb Pattern
← Previous message | Next message →

That took me less time to understand the structure than when I came across “Hamburgers” in my web pages.

Of course I had Hansel and Greta read to me as a child, so I am sure that helped me understand the term breadcrumb when I first encountered it on a web site.



> On Aug 8, 2018, at 10:02 AM, Isabel Holdsworth < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>>>> Robert Fentress
>>>> Sent: 01 August 2018 15:45
>>>> To: WebAIM Discussion List < = EMAIL ADDRESS 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?person54847>
>>>> 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?person54847>
>>> 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?person54847>
>> LinkedIn Profile
>> <https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
>> VT Zoom Personal Conferencing
>> <https://virginiatech.zoom.us/my/rob.fentress>
>> >> >> >> >>
> > > >

From: Patrick H. Lauke
Date: Wed, Aug 08 2018 9:15AM
Subject: Re: Collapsible Braedcrumb Pattern
← Previous message | Next message →

Unrelated, but something that tickled me a while a go: in french,
breadcrumbs are called "fil d'ariane" (Ariane's thread, from the story
of the Minotaur in Greek mythology).

P

On 08/08/2018 16:06, Jonathan Cohn wrote:
> That took me less time to understand the structure than when I came across “Hamburgers” in my web pages.
>
> Of course I had Hansel and Greta read to me as a child, so I am sure that helped me understand the term breadcrumb when I first encountered it on a web site.
>
>
>
>> On Aug 8, 2018, at 10:02 AM, Isabel Holdsworth < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>>>>> Robert Fentress
>>>>> Sent: 01 August 2018 15:45
>>>>> To: WebAIM Discussion List < = EMAIL ADDRESS 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?person54847>
>>>>> 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?person54847>
>>>> 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?person54847>
>>> LinkedIn Profile
>>> <https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
>>> VT Zoom Personal Conferencing
>>> <https://virginiatech.zoom.us/my/rob.fentress>
>>> >>> >>> >>> >>>
>> >> >> >> >
> > > > >

--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Angela French
Date: Wed, Aug 08 2018 9:28AM
Subject: Re: Collapsible Braedcrumb Pattern
← Previous message | Next message →

Whoever invented the term 'hamburger' for the collapsed menu must have been hungry!

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Jonathan Cohn
Sent: Wednesday, August 8, 2018 8:06 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Collapsible Braedcrumb Pattern

That took me less time to understand the structure than when I came across “Hamburgers” in my web pages.

Of course I had Hansel and Greta read to me as a child, so I am sure that helped me understand the term breadcrumb when I first encountered it on a web site.



> On Aug 8, 2018, at 10:02 AM, Isabel Holdsworth < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> wrote:
>>
>>> The Voice Access App can be found at
>>> https://play.google.com/store/apps/details?id=com.google.android.app
>>> s.accessibility.voiceaccess
>>>
>>>
>>> Jonathan Avila
>>> Chief Accessibility Officer
>>> Level Access
>>> = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf
>>>> Of Robert Fentress
>>>> Sent: 01 August 2018 15:45
>>>> To: WebAIM Discussion List < = EMAIL ADDRESS 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?person54847>
>>>> 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
>>>> >>>> >>>> >>>> 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?person54847>
>>> 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
>>> >>> >>> >>> 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?person54847>
>> 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
>> >>
> > > archives at http://webaim.org/discussion/archives
>

From: Joe Chidzik
Date: Thu, Aug 09 2018 7:19AM
Subject: Re: Collapsible Braedcrumb Pattern
← Previous message | Next message →

I like this. I looked up the story of the minotaur on Wikipedia, and ended up on the linked page on "Ariadne's thread (logic)."

"...named for the legend of Ariadne, is the solving of a problem with multiple apparent means of proceeding - such as a physical maze, a logic puzzle, or an ethical dilemma".

Now the name of Ariadne from Inception, who was adept at creating mazes, makes sense.

On topic: it was Hansel and Gretel that I remembered when first encountering the term Breadcrumb trail, and helped me understand it's purpose.

Joe

> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf
> Of Patrick H. Lauke
> Sent: 08 August 2018 16:16
> To: = EMAIL ADDRESS REMOVED =
> Subject: Re: [WebAIM] Collapsible Braedcrumb Pattern
>
> Unrelated, but something that tickled me a while a go: in french, breadcrumbs
> are called "fil d'ariane" (Ariane's thread, from the story of the Minotaur in Greek
> mythology).
>
> P
>
> On 08/08/2018 16:06, Jonathan Cohn wrote:
> > That took me less time to understand the structure than when I came across
> “Hamburgers” in my web pages.
> >
> > Of course I had Hansel and Greta read to me as a child, so I am sure that
> helped me understand the term breadcrumb when I first encountered it on a
> web site.
> >
> >
> >
> >> On Aug 8, 2018, at 10:02 AM, Isabel Holdsworth
> < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> >>> wrote:
> >>>
> >>>> The Voice Access App can be found at
> >>>>
> https://play.google.com/store/apps/details?id=com.google.android.apps.access
> ibility.voiceaccess
> >>>>
> >>>>
> >>>> Jonathan Avila
> >>>> Chief Accessibility Officer
> >>>> Level Access
> >>>> = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On
> Behalf Of
> >>>>> Robert Fentress
> >>>>> Sent: 01 August 2018 15:45
> >>>>> To: WebAIM Discussion List < = EMAIL ADDRESS 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?person54847>
> >>>>> 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?person54847>
> >>>> 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?person54847>
> >>> LinkedIn Profile
> >>> <https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
> >>> VT Zoom Personal Conferencing
> >>> <https://virginiatech.zoom.us/my/rob.fentress>
> >>> > >>> > >>> > >>> > >>>
> >> > >> > >> > >> > >
> > > > > > > > > >
>
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > >

From: Robert Fentress
Date: Mon, Aug 20 2018 9:22AM
Subject: Re: Collapsible Braedcrumb Pattern
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf
> Of
> >> > Robert Fentress
> >> > Sent: 01 August 2018 15:45
> >> > To: WebAIM Discussion List < = EMAIL ADDRESS 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>

From: Robert Fentress
Date: Mon, Aug 20 2018 2:51PM
Subject: Re: Collapsible Braedcrumb Pattern
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf
>> Of
>> >> > Robert Fentress
>> >> > Sent: 01 August 2018 15:45
>> >> > To: WebAIM Discussion List < = EMAIL ADDRESS 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>

From: Robert Fentress
Date: Mon, Aug 20 2018 3:25PM
Subject: Re: Collapsible Braedcrumb Pattern
← Previous message | No next message

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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On
>>> Behalf Of
>>> >> > Robert Fentress
>>> >> > Sent: 01 August 2018 15:45
>>> >> > To: WebAIM Discussion List < = EMAIL ADDRESS 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>