Adds accessibility notes to breadcrumbs #23684
Conversation
andresgalante
force-pushed
the
breadcrumbs-a11y
branch
from
774d72d
to
70aa414
Compare
docs/4.0/components/breadcrumb.md
Outdated
| @@ -32,3 +32,22 @@ Similar to our navigation components, breadcrumbs work fine with or without the | |||
| <span class="breadcrumb-item active">Bootstrap</span> | |||
| </nav> | |||
| {% endexample %} | |||
|
|
|||
|
|
|||
| ## Regarding accessibility | |||
There was a problem hiding this comment.
This would be the only heading on the page; can we change it to ## Accessibility for brevity? And then also add an ## Overview or ## Example above line 8?
docs/4.0/components/breadcrumb.md
Outdated
|
|
||
| ## Regarding accessibility | ||
|
|
||
| If you’re using breadcrumbs to provide a navigation, be sure to add a `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element. |
There was a problem hiding this comment.
Should we be doing this in our examples?
There was a problem hiding this comment.
I think that if we can deliver accessible snippets from bootstrap we will be doing a huge dent to help people with disabilities.
So even though the other examples will render correctly, I think we should deliver just one example that follows an accessible pattern.
I'll change this PR and send a new option
docs/4.0/components/breadcrumb.md
Outdated
|
|
||
| Also apply an `aria-current="page"` to the last `<a>` of the set to indicate that it represents the current page. | ||
|
|
||
| More information on [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#breadcrumb). |
There was a problem hiding this comment.
Feel like the above three lines should be a single paragraph vs three separate lines.
andresgalante
force-pushed
the
breadcrumbs-a11y
branch
from
70aa414
to
f0f8b85
Compare
|
Hi @mdo As I wrote on the comment above, I think that the more accessibility we can deliver built into bootstrap components the better the web will be. What do you think? |
andresgalante
force-pushed
the
breadcrumbs-a11y
branch
from
f0f8b85
to
f5c0d58
Compare
docs/4.0/components/breadcrumb.md
Outdated
|
|
||
| ## Accessibility | ||
|
|
||
| Since breadcrumbs provide a navigation, be sure to add a `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element. Also apply an `aria-current="page"` to the last item of the set to indicate that it represents the current page. |
There was a problem hiding this comment.
I'd soften the language from "be sure to add" to something more like "it's a good idea to add". As it's up to the author to assign a label (i.e. "breadcrumb" isn't a mandated value, just a suggestion), I'd further change it to something like "it's a good idea to add a meaningful label such as aria-label="Breadcrumb".
andresgalante
force-pushed
the
breadcrumbs-a11y
branch
from
f5c0d58
to
f797b77
Compare
|
Hey @patrickhlauke, that makes a lot of sense, thanks for the review. I've also changed the second phrase. Can you please take another look at it? |
docs/4.0/components/breadcrumb.md
Outdated
|
|
||
|
|
||
|
|
||
| More information on [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#breadcrumb). |
There was a problem hiding this comment.
sorry, one final change request (missed it first time around): possibly reword to "For more information, see the WAI-ARIA Authoring Practices for the breadcrumb pattern." (and maybe remove two of the preceding line breaks, to keep it nice and tight)
There was a problem hiding this comment.
@patrickhlauke Nothing to be sorry about, I'll update it now. I am not an english native speaker, so any help on wording is always welcome. I'll update the PR now
andresgalante
force-pushed
the
breadcrumbs-a11y
branch
from
f797b77
to
a32e7b7
Compare
|
Hi @patrickhlauke the change is done, let me know if I am missing anything else, |
andresgalante
force-pushed
the
breadcrumbs-a11y
branch
from
a32e7b7
to
346f60c
Compare
|
All good for me, thanks :) |
This PR adds accessibility remarks on breadcrumbs following WAI-ARIA design pattern:
https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html
What do you think?