Improve the "Include the current page as a segment in the breadcrumb" option

Created on 19 December 2024, 3 days ago

Problem/Motivation

With the default option Include the current page as a segment in the breadcrumb ticked and not having Applies to administration pages unticked, the last segment on the breadcrumb is the current page. That setup has currently a few flaws:

  • Currently you are unable to distinguish which segments are links and which segment is plain text or more specifically, is the last segment a link or plain text. As a sighted used without hovering over the last segment and or exploring the context of the entire page you are unable to determine that.
  • The current page is currently not programmatically identified. If you are stepping through the breadcrumb in the aural interface with a screen reader the current page is not identifiable even with the Include the current page as a segment in the breadcrumb option ticked. breadcrumb.mp4 illustrates two problems, if you first just tab through the breadcrumb, all segments except account settings are tabable, while if you step through the aural interface with VO-arrow left and right it is not announced what the current page is, you are only able to assume based on the differing behavior between tabbing and the VO-arrow navigation, that the current segment might be account settings. Aside that it has to be noted that the separators are focusable and are announced when the voiceover cursor is being used, which should not happen - a detail that is mentioned in the following article as well https://github.com/scottaohara/a11y_breadcrumbs?tab=readme-ov-file (I will open up a follow up issue for core tomorrow, since that problem applies to core as well)

Steps to reproduce

Proposed resolution

I would suggest to follow the lead on https://www.w3.org/WAI/WCAG21/Techniques/general/G65 . The only detail worth to discuss might be, should example 1 or example 2 be followed?

Example 1 would be the approach easy breadcrumb currently is following. that would require for one to add an underlined styling to that link items that contain a link and adding an aria-current="page" attribute to the last link item that contains the plain text for the current page.

Example 2 would be slightly different, that way all segments would get underlined or the styling easy breadcrumb is using for the segement could be kept - meaning without any underlines. for the last link item the plain text gets wrapped into a link item, the href points to the current page and an aria-current="page" should be added.

We've discussed the topic in the a11y office hour last month (attendees aside me were @mgifford, @itmaybejj, and @the_g_bomb). the groups preference back then leaned rather towards example 2, cuz that way the segment for the current page would be tabable and it might have advantages in regards of sharing and testing of the current pages link.

📌 Task
Status

Active

Version

2.0

Component

Other

Created by

🇩🇪Germany rkoller Nürnberg, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024