E-mail List Archives

Search E-mail List Archives for

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

From: allyssa jessicon
Date: Mon, Dec 09 2019 3:34AM
Subject: Breadcumb nav same page accessibility
No previous message | Next message →

Hi all,
Its been a long time since i have this doubt, is this really an
accessibility issue to not have a same page link in a breadcrumb same
page [ last page will be the same page as always]

From: Mark Magennis
Date: Mon, Dec 09 2019 4:52AM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

Hi Allyssa,

Do you mean in a breadcrumb trail Grandparent/Parent/This Page, should "this page" be a link or just plain text?

If that's the question, then I would say plain text. I don't see a need for it to be a link. So the coding could be (with full hrefs and CSS for visual dividers):

<nav aria-label="breadcrumb trail">
<ol>
<li><a href="#">Grandparent</a></li>
<li><a href="#">Parent</a></li>
<li aria-current="page">This page</li>
</ol>
</nav>

The use of aria-current is not essential but useful.

Incidentally, I've always hated using aria-label="breadcrumb trail" for the whole thing because it's developer jargon and I imagine most users have no idea what it means. But I haven't been able to think of anything much better. Suggestions welcome.

Mark

Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist

From: Samuel Hobson
Date: Mon, Dec 09 2019 3:13PM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

It had never occurred to me to make a breadcrumb an <ol> before, I've just realised. Otherwise, the below has been the exact pattern I've used also. (Would love to know your thinking around using <ol> vs <ul>!)

And I too welcome something better as a label. But I also wonder, if this pattern is in wide use, and the label 'breadcrumb' is already associated with a certain expectation, how much leeway do we actually have to remove that word? 🙂

Get Outlook for Android<https://aka.ms/ghei36>
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Mark Magennis < = EMAIL ADDRESS REMOVED = >
Sent: Monday, December 9, 2019 9:52:27 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] [EXTERNAL] Breadcumb nav same page accessibility

Hi Allyssa,

Do you mean in a breadcrumb trail Grandparent/Parent/This Page, should "this page" be a link or just plain text?

If that's the question, then I would say plain text. I don't see a need for it to be a link. So the coding could be (with full hrefs and CSS for visual dividers):

<nav aria-label="breadcrumb trail">
<ol>
<li><a href="#">Grandparent</a></li>
<li><a href="#">Parent</a></li>
<li aria-current="page">This page</li>
</ol>
</nav>

The use of aria-current is not essential but useful.

Incidentally, I've always hated using aria-label="breadcrumb trail" for the whole thing because it's developer jargon and I imagine most users have no idea what it means. But I haven't been able to think of anything much better. Suggestions welcome.

Mark

Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist

From: glen walker
Date: Mon, Dec 09 2019 5:24PM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

Whether you use ol/ul shouldn't matter because you're going to turn off the
styling so that you don't get numbers or bullet points. The important
semantic info is that you hear there's a list. There's marginally more of
a reason to use ol because the breadcrumb does have an order.

The word "breadcrumb" has been around for over 200 years ever since Hansel
and Gretel. That doesn't mean everyone knows what it is, but it's
certainly not a new term.

From: Mark Magennis
Date: Wed, Dec 11 2019 6:38AM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

From: James Nurthen
Date: Wed, Dec 11 2019 10:21AM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

On Mon, Dec 9, 2019 at 4:24 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:

> Whether you use ol/ul shouldn't matter because you're going to turn off the
> styling so that you don't get numbers or bullet points. The important
> semantic info is that you hear there's a list. There's marginally more of
> a reason to use ol because the breadcrumb does have an order.
>
>
Except with Safari/VO you will not hear it is a list - so don't worry if in
testing on these platforms a list is not communicated.

I will also note there is a breadcrumb pattern in the ARIA authoring
practices at
https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html

Regards,
James

From: glen walker
Date: Wed, Dec 11 2019 11:08AM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

If you turn off list styling, then yes, Safari/VO chooses not to convey the
semantics of the list, which I personally feel is wrong. It's still a list
even if I don't have bullet points. I believe there is some CSS magic you
can do to still have VO read it as a list even with bullet points off.
Scott O'Hara has a blog regarding that -
https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html


On Wed, Dec 11, 2019 at 10:22 AM James Nurthen < = EMAIL ADDRESS REMOVED = > wrote:

> On Mon, Dec 9, 2019 at 4:24 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Whether you use ol/ul shouldn't matter because you're going to turn off
> the
> > styling so that you don't get numbers or bullet points. The important
> > semantic info is that you hear there's a list. There's marginally more
> of
> > a reason to use ol because the breadcrumb does have an order.
> >
> >
> Except with Safari/VO you will not hear it is a list - so don't worry if in
> testing on these platforms a list is not communicated.
>
> I will also note there is a breadcrumb pattern in the ARIA authoring
> practices at
> https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html
>
> Regards,
> James
> > > > >

From: James Nurthen
Date: Wed, Dec 11 2019 11:36AM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

Not CSS, you need to add ARIA to force the list role.
Scott's blog does cover it well.

Just wanted to make sure that folks understand that when testing.

On Wed, Dec 11, 2019 at 10:08 AM glen walker < = EMAIL ADDRESS REMOVED = > wrote:

> If you turn off list styling, then yes, Safari/VO chooses not to convey the
> semantics of the list, which I personally feel is wrong. It's still a list
> even if I don't have bullet points. I believe there is some CSS magic you
> can do to still have VO read it as a list even with bullet points off.
> Scott O'Hara has a blog regarding that -
> https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
>
>
> On Wed, Dec 11, 2019 at 10:22 AM James Nurthen < = EMAIL ADDRESS REMOVED = > wrote:
>
> > On Mon, Dec 9, 2019 at 4:24 PM glen walker < = EMAIL ADDRESS REMOVED = >
> wrote:
> >
> > > Whether you use ol/ul shouldn't matter because you're going to turn off
> > the
> > > styling so that you don't get numbers or bullet points. The important
> > > semantic info is that you hear there's a list. There's marginally more
> > of
> > > a reason to use ol because the breadcrumb does have an order.
> > >
> > >
> > Except with Safari/VO you will not hear it is a list - so don't worry if
> in
> > testing on these platforms a list is not communicated.
> >
> > I will also note there is a breadcrumb pattern in the ARIA authoring
> > practices at
> > https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html
> >
> > Regards,
> > James
> > > > > > > > > >
> > > > >

From: glen walker
Date: Wed, Dec 11 2019 12:05PM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

Yes, I mis-typed the wrong acronym. ARIA not CSS. Thanks for catching
that. But if you read the blog, you'll get it.

On Wed, Dec 11, 2019 at 11:37 AM James Nurthen < = EMAIL ADDRESS REMOVED = > wrote:

> Not CSS, you need to add ARIA to force the list role.
> Scott's blog does cover it well.
>
> Just wanted to make sure that folks understand that when testing.
>
>

From: Ramshif Richu
Date: Fri, Dec 13 2019 1:12AM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

is it a WCAG violation to not have the current page as a plain text?
what if the current page in the breadcrumb nav is a link which has no
current role added to it?

On 12/10/19, Samuel Hobson < = EMAIL ADDRESS REMOVED = > wrote:
> It had never occurred to me to make a breadcrumb an <ol> before, I've just
> realised. Otherwise, the below has been the exact pattern I've used also.
> (Would love to know your thinking around using <ol> vs <ul>!)
>
> And I too welcome something better as a label. But I also wonder, if this
> pattern is in wide use, and the label 'breadcrumb' is already associated
> with a certain expectation, how much leeway do we actually have to remove
> that word? 🙂
>
> Get Outlook for Android<https://aka.ms/ghei36>
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Mark
> Magennis < = EMAIL ADDRESS REMOVED = >
> Sent: Monday, December 9, 2019 9:52:27 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] [EXTERNAL] Breadcumb nav same page accessibility
>
> Hi Allyssa,
>
> Do you mean in a breadcrumb trail Grandparent/Parent/This Page, should "this
> page" be a link or just plain text?
>
> If that's the question, then I would say plain text. I don't see a need for
> it to be a link. So the coding could be (with full hrefs and CSS for visual
> dividers):
>
> <nav aria-label="breadcrumb trail">
> <ol>
> <li><a href="#">Grandparent</a></li>
> <li><a href="#">Parent</a></li>
> <li aria-current="page">This page</li>
> </ol>
> </nav>
>
> The use of aria-current is not essential but useful.
>
> Incidentally, I've always hated using aria-label="breadcrumb trail" for the
> whole thing because it's developer jargon and I imagine most users have no
> idea what it means. But I haven't been able to think of anything much
> better. Suggestions welcome.
>
> Mark
>
> Mark Magennis
> Skillsoft | mobile: +353 87 60 60 162
> Accessibility Specialist
>
>
>

From: allyssa jessicon
Date: Fri, Dec 13 2019 1:27AM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

+1 @ = EMAIL ADDRESS REMOVED =

On 12/13/19, Ramshif Richu < = EMAIL ADDRESS REMOVED = > wrote:
> is it a WCAG violation to not have the current page as a plain text?
> what if the current page in the breadcrumb nav is a link which has no
> current role added to it?
>
> On 12/10/19, Samuel Hobson < = EMAIL ADDRESS REMOVED = > wrote:
>> It had never occurred to me to make a breadcrumb an <ol> before, I've just
>> realised. Otherwise, the below has been the exact pattern I've used also.
>> (Would love to know your thinking around using <ol> vs <ul>!)
>>
>> And I too welcome something better as a label. But I also wonder, if this
>> pattern is in wide use, and the label 'breadcrumb' is already associated
>> with a certain expectation, how much leeway do we actually have to remove
>> that word? 🙂
>>
>> Get Outlook for Android<https://aka.ms/ghei36>
>> >> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of
>> Mark
>> Magennis < = EMAIL ADDRESS REMOVED = >
>> Sent: Monday, December 9, 2019 9:52:27 PM
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> Subject: Re: [WebAIM] [EXTERNAL] Breadcumb nav same page accessibility
>>
>> Hi Allyssa,
>>
>> Do you mean in a breadcrumb trail Grandparent/Parent/This Page, should
>> "this
>> page" be a link or just plain text?
>>
>> If that's the question, then I would say plain text. I don't see a need
>> for
>> it to be a link. So the coding could be (with full hrefs and CSS for
>> visual
>> dividers):
>>
>> <nav aria-label="breadcrumb trail">
>> <ol>
>> <li><a href="#">Grandparent</a></li>
>> <li><a href="#">Parent</a></li>
>> <li aria-current="page">This page</li>
>> </ol>
>> </nav>
>>
>> The use of aria-current is not essential but useful.
>>
>> Incidentally, I've always hated using aria-label="breadcrumb trail" for
>> the
>> whole thing because it's developer jargon and I imagine most users have no
>> idea what it means. But I haven't been able to think of anything much
>> better. Suggestions welcome.
>>
>> Mark
>>
>> Mark Magennis
>> Skillsoft | mobile: +353 87 60 60 162
>> Accessibility Specialist
>>
>>
>>

From: glen walker
Date: Fri, Dec 13 2019 8:06AM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

No to first question, Yes to second question.

No:
WCAG does not address breadcrumbs specifically. You can use the authoring
practice as a best practice (
https://www.w3.org/TR/wai-aria-practices/#breadcrumb) and it states:

- The *link *to the current page has aria-current
<https://www.w3.org/TR/wai-aria-1.1/#aria-current> set to page. If the
element representing the current page is not a link, aria-current is
optional.

But the authoring practice is just a guideline and not a requirement.

Yes:
If every element in the breadcrumb list were a link, including the current
page, then I would mark it a failure of 4.1.2 if the current page link did
not indicate it were the current page because its state ("value" of "name,
role value") were not announced.

On Fri, Dec 13, 2019 at 1:13 AM Ramshif Richu < = EMAIL ADDRESS REMOVED = > wrote:

> is it a WCAG violation to not have the current page as a plain text?
> what if the current page in the breadcrumb nav is a link which has no
> current role added to it?
>
>

From: Jared Smith
Date: Fri, Dec 13 2019 4:03PM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

> If every element in the breadcrumb list were a link, including the current
> page, then I would mark it a failure of 4.1.2 if the current page link did
> not indicate it were the current page because its state ("value" of "name,
> role value") were not announced.

While I wouldn't have a link in the breadcrumbs to the existing page,
I disagree that if such a link existed that it would be a WCAG failure
for it to not have aria-current. I don't believe this is inline with
what 4.1.2 requires.

Thanks,

Jared

From: glen walker
Date: Fri, Dec 13 2019 6:22PM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

4.1.2 says the state or value of the element must be presented. If the
link is for the current page, I consider that a state. I'm fine if others
don't think that.

If there were a visual indicator that the current page in the breadcrumb
list looks different than all the other elements in the breadcrumb list,
that would also indicate a failure (and I'd use 4.1.2). You have a visual
presentation of a state that looks different than the state of all the
other elements. You don't necessarily have to use aria-current to indicate
the state, but that's one implementation.

The WebAIM site does something similar. In the breadcrumb list, there's a
hidden "you are here" span. I kind of expected that text to be associated
with the last element in the breadcrumb (as an alternative to using
aria-current) but it's actually the first piece of text in the breadcrumb
list. Not sure if that was intentional.


On Fri, Dec 13, 2019 at 4:04 PM Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:

> > If every element in the breadcrumb list were a link, including the
> current
> > page, then I would mark it a failure of 4.1.2 if the current page link
> did
> > not indicate it were the current page because its state ("value" of
> "name,
> > role value") were not announced.
>
> While I wouldn't have a link in the breadcrumbs to the existing page,
> I disagree that if such a link existed that it would be a WCAG failure
> for it to not have aria-current. I don't believe this is inline with
> what 4.1.2 requires.
>
> Thanks,
>
> Jared
> > > > >

From: Jared Smith
Date: Sat, Dec 14 2019 7:48PM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

glen walker wrote:
>
> 4.1.2 says the state or value of the element must be presented.

Not exactly. It does indicate that "For all user interface
components... states, properties, and values *that can be set by the
user* can be programmatically set". The current state (as in
aria-current) of the last element in a breadcrumb list cannot be set
by the user, and if not a link (as is optimal), it wouldn't be a "user
interface component" anyway. I don't see how this would be in scope
for this success criterion. In reality, it's hardly worth debating
over something so trivial to the end user experience.

Thanks,

Jared

From: Patrick H. Lauke
Date: Sun, Dec 15 2019 2:41AM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

On 15/12/2019 02:48, Jared Smith wrote:
> glen walker wrote:
>>
>> 4.1.2 says the state or value of the element must be presented.
>
> Not exactly. It does indicate that "For all user interface
> components... states, properties, and values *that can be set by the
> user* can be programmatically set".

While I agree with the very strict reading, in practice though 4.1.2 has
historically also been used to cover things such as "if a control is
disabled, it should convey the fact that it's disabled programmatically"
and similar. Arguably, the "disabled-ness" of a control is not "set by
the user". So 4.1.2 in practice is commonly used in a more general
"things convey their state" way.

Just another one of those "WCAG is sometimes worded in a slightly
unfortunate way" scenarios :)

P
--
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: glen walker
Date: Sun, Dec 15 2019 5:45PM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | Next message →

For me, it comes down to whether you are styling things differently for the
last breadcrumb item. If so, then whatever is different about that last
element should also be conveyed to other users. Whether that's through
aria-current or visually-hidden text or whatever. And whether you cite the
issue as 4.1.2 or something else doesn't matter to me as long as the
problem gets fixed. I can't say whether marking the last element in a
breadcrumb is a trivial issue for all users but if the designer/developer
decided to make it different, tell all users about it.

If all the elements look the same (all links), then sighted users can
easily see it's the last item in the list. Screen reader users will
usually hear "list of X items" (if the breadcrumb is contained in a list)
but not all screen readers will say it's the Nth item in the list so the
user would have to mentally track where they are in the list if they want
to know how far down the breadcrumb list they are. Having the last item
with aria-current is a nice "end of the line" indicator.

From: allyssa jessicon
Date: Wed, Dec 18 2019 2:34AM
Subject: Re: [EXTERNAL] Breadcumb nav same page accessibility
← Previous message | No next message

Appreciate your help. thank you

On 12/16/19, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> For me, it comes down to whether you are styling things differently for the
> last breadcrumb item. If so, then whatever is different about that last
> element should also be conveyed to other users. Whether that's through
> aria-current or visually-hidden text or whatever. And whether you cite the
> issue as 4.1.2 or something else doesn't matter to me as long as the
> problem gets fixed. I can't say whether marking the last element in a
> breadcrumb is a trivial issue for all users but if the designer/developer
> decided to make it different, tell all users about it.
>
> If all the elements look the same (all links), then sighted users can
> easily see it's the last item in the list. Screen reader users will
> usually hear "list of X items" (if the breadcrumb is contained in a list)
> but not all screen readers will say it's the Nth item in the list so the
> user would have to mentally track where they are in the list if they want
> to know how far down the breadcrumb list they are. Having the last item
> with aria-current is a nice "end of the line" indicator.
> > > > >