Can the Breadcrumb be more accessible?

[zwiastunsw]

The breadcrumb generated in Joomla4 basically does not cause problems of accessibility.
The set of links is structured using an ordered list. This is a good choice because the ol tag is appropriate for presenting the hierarchical structure of the breadcrumb (the order of elements in the breadcrumb is important).

The code for the breadcrumb has been supplemented by a nav tag with the attributes aria-label="[module name]" and role="navigation" (See: [4.0][a11y] Add landmark to breadcrumbs #23685.)

Nav tag defines the breadcrumb area as a landmark, more precise navigation area. The aria-label attribute provides an accessible name for the landmark. The use of the aria-label attribute is appropriate, because there can be more than one landmark of this type on the page.

The role="navigation" attribute defines the same property as the nav tag. Since the nav tag has an implicitly entered navigation role, adding this role is redundant. However, this role has been added because Joomla has chosen to support IE11 (IE11 does not support new HTML5 tags, but supports ARIA attributes).

What else can be improved?

Add aria-current attribute

The aria-current attribute is used inside a set of related elements. The screen reader announces its value (e.g. Current page). The attribute can also be used as a selector to define the display style of the current position in the item set. If the element representing the current page is not a link, aria-current is optional.

Let's consider whether it should be a link? Would that be good for accessibility?

In my opinion, it should be a link. Just like in the menu, the active item is a styled link.
When the screen reader user navigates only between links, he will hear that the last item is a link and that it indicates the current page. If it is not a link, the screen reader user will hear the name of the last element of the breadcrumb only if he listens to the entire page.

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.

Remove option Text separator

The Text Separator option allows the user to define a custom visual separators between breadcrumbs items. If the user does not define his own character, he default separator defined via css will be used.

When the user adds his own text separator, e.g. a slash, the screen reader will announce it. To prevent the screen reader from announcing visual separators between links, they should be added via CSS. Of course, we can hide these elements using the aria-hidden attribute, but this requires additional HTML code, which is not currently available.

We know that users sometimes have strange ideas. According to ATAG requirements, we should prevent the creation of inaccessible content and warn users when accessibility is at risk.

If we leave the possibility to define our own visual separator, we have to add an additional code or warnings for the administrator. If we remove this option, we will simplify the code, simplify the configuration of the module (number of options) and avoid the situation that the user will deteriorate accessibility.

What do you think about it? What is your opinion?
If you agree with me, don't wait - start working. Prepare and report PR.

Resources

• WAI-ARIA Authoring Practices 1.1 - 3.4. Breadcrumb
• Breadcrumb design pattern example
• Accessible Breadcrumb Navigation Pattern by Scott O'Hara
• Using the aria-current attribute by L. Watson

[chmst]

In J4.0, the separator is already removed

[hardik-codes]

Working on it.

[hardik-codes]

please test joomla/joomla-cms#24113