Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.0]Breadcrumbs are now more accessible #24113

Merged
merged 3 commits into from
Mar 15, 2019

Conversation

hardik-codes
Copy link
Contributor

@hardik-codes hardik-codes commented Mar 7, 2019

Summary of Changes

Added aria-current to modules/mod_breadcrumbs/tmpl/default.php

Testing Instructions

Apply the patch and check the generated code of breadcrumbs module

Documentation Changes Required

None

@anuragteapot
Copy link
Contributor

@hardik-codes Please provide testing instructions and image if possible.

@brianteeman
Copy link
Contributor

@Anu1601CS apply patch. check generated code of breadcrumbs module.

@chmst
Copy link
Contributor

chmst commented Mar 7, 2019

I have tested this item ✅ successfully on 34d63f3

I have tested this item successfully. As much as I see, a possible vaue could be "page", but should be the same effect for assisitive technologies.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/24113.

@anuragteapot
Copy link
Contributor

@brianteeman We know how to test. Instructions only for new students who want to test :)

@chmst
Copy link
Contributor

chmst commented Mar 7, 2019

@zwiastunsw if you prefer the aria-current="page", @hardik-codes can change it.

@brianteeman
Copy link
Contributor

Comment by LÉONIE WATSONJANUARY 26TH 2017, 8:44AM

I don’t think there are hard rules for which token to use. I’ve used “location” in the breadcrumb example, but “page” would also be ok.
I chose to use “location” because that’s the purpose of a breadcrumb trail, and using “page” wouldn’t convey that as well as “page”. But it’s entirely subjective!

https://tink.uk/using-the-aria-current-attribute/

@zwiastunsw
Copy link
Contributor

zwiastunsw commented Mar 7, 2019

I know the opinion of L. Watson and I fully agree with her. The value "true" is also correct here, although it is better to use a "page" or "location".
Much more important to me is whether the current item is a link.
If it is not a link, the aria-current attribute improves accessibility in an unnoticeable way. The screen reader user will only hear this information if he listens to the page. If the last track element is not a link, it does not gain focus during tabulation, which means that the screen reader user will not hear this information. Therefore, if it is not a link, the aria-current attribute is optional (see: WAI-ARIA Authoring Practices 1.1 - Breadcrumb.

@hardik-codes
Copy link
Contributor Author

@hardik-codes Please provide testing instructions and image if possible.

@Anu1601CS I've updated the testing instructions as per @brianteeman guidelines

@chmst
Copy link
Contributor

chmst commented Mar 8, 2019

@zwiastunsw as I have commented before, the last link in a breadcrumb never is a link but a text. Always.

Here joomla/accessibility#51

you wrote

Let's consider whether this item should have an aria-current attribute?

In my opinion yes. Regardless of whether it will be a link or not. Because the user of the screen reader may receive additional important information. It will hear information that the visually impaired user can read from the screen. This is good for accessibility.

So now we need a decision: Do we use the attribute in joomla or not?

@zwiastunsw
Copy link
Contributor

Here is an example of how a screen reader announces a breadcrumb when the last item is a link:

Breadcrumb navigation landmark
list with 4 items
Home link
Products link
Computers link
Laptops link current page

If the last item is not a link, the screen reader skips it during tabulation. The cursor moves to the next item on the page. The user hears only:

Breadcrumb navigation landmark
list with 4 items
Home link
Products link
Computers link

Note: The screen reader announces that there are 4 items, but communicates only three items.
In addition: When the next interactive element on the page is a link, the screen reader will read it as if it belonged to the breadcrumb. A blind user may think that this is another element of the breadcrumb.

That is why I believe that this should be a link. But this does not mean that it is just the right solution. It is a question of preference. I do not know of studies that would show which solution blind people prefer.

If I had to decide, the last element would be made by a link.

@brianteeman
Copy link
Contributor

Having a link to the same page makes no sense

Unlikely that the next link would be announced as being part of the breadcrumb list because the links should be enclosed in a different region

@zwiastunsw
Copy link
Contributor

zwiastunsw commented Mar 8, 2019

Having a link to the same page makes no sense

You have the right to think this way. But that's just your opinion. In the navigation menu we have links to the current page. We even have special CSS classes for them - current, active. Doesn't it also make sense?

I would like to emphasise once again: I do not think that my opinion is merely the right one. We have different patterns on the web.

The W3C in the WAI-ARIA Practices document presents a breadcrumb design pattern in which the last element is a link. Doesn't make sense?
Scott O'Hara has a link in its solution as the last element. Doesn't make sense? He argues for its solution:

Some other breadcrumb patterns remove the <a> element, or at least the href from the link. These examples retain the a href for current link, as without it, people using a screen reader and navigating by links, or via focusable content with the tab key would not come across the currently active link.

@zwiastunsw
Copy link
Contributor

zwiastunsw commented Mar 8, 2019

Still regarding the value of the aria-current attribute.

  • the value true is set by default when not specified.
  • the value page indicates the current page in the link set
  • the value location indicates the current highlighted image in the chart.

The screen reader announces accordingly: "current" || "current page" || "location".

Definitely, it is best to use the value page.

See: WAI-ARIA 1.2 aria-current (state).

@softforge
Copy link
Contributor

I have tested this item ✅ successfully on 34d63f3


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/24113.

@ghost
Copy link

ghost commented Mar 8, 2019

Status "Ready To Commit".

@joomla-cms-bot joomla-cms-bot added the RTC This Pull Request is Ready To Commit label Mar 8, 2019
@wilsonge wilsonge merged commit 4c8e7ff into joomla:4.0-dev Mar 15, 2019
@joomla-cms-bot joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label Mar 15, 2019
@wilsonge
Copy link
Contributor

Changed to the value of page and merged

@wilsonge wilsonge added this to the Joomla 4.0 milestone Mar 15, 2019
@zwiastunsw
Copy link
Contributor

thanks @wilsonge

@hardik-codes hardik-codes deleted the breadcrumbAccessibility branch April 18, 2019 05:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants