Ticket #12904 (closed Bug: fixed)

Opened 4 years ago

Last modified 4 years ago

Breadcrumb separator / delimiter needs to be meaningful with screen readers

Reported by: rmattb Owned by: rmattb
Priority: minor Milestone: 4.2
Component: Templates/CSS Version: 4.2
Keywords: accessibility Cc:

Description (last modified by rmattb) (diff)

The current breadcrumb separator / delimiter character of


is read by major screen readers with no clear indication of the start or stop between each breadcrumb.

  • VoiceOver: very slight pause
  • JAWS: no extra pause
  • NVDA: no pause, very fast

Note that changes of this need to be made in 4 (four) places in


due to separate code for the first and then subsequent breadcrumbs, and due to handling of left-to-right and right-to-left languages.

Change History

comment:1 Changed 4 years ago by rmattb

An example fix is at  https://weblion.psu.edu/trac/weblion/changeset/17554/weblion/plonetheme.psuaccessiblesunburst/trunk/plonetheme/psuaccessiblesunburst

based on recommendations from "Page navigation" at  http://webaim.org/articles/siteredesign/#decisions

but this could use some discussion on the semantic meaning and translation of the breadcrumb separator / delimiter character. Plone's hierarchical folder structure is in concert with WebAim's recommendation of the meaning of the greater than character.

comment:2 Changed 4 years ago by rmattb

  • Component changed from Unknown to Templates/CSS
  • Milestone changed from 4.x to 4.2

comment:3 Changed 4 years ago by rmattb

  • Description modified (diff)

comment:4 Changed 4 years ago by rmattb

We discussed the meaning and tested screen reader voicing of these possible separators:

Home / Welcome to Plone [English:(JAWS: "slash", VO: "slash", NVDA: "slash")]

Home . Welcome to Plone [English:(JAWS: medium pause, VO: long pause, NVDA: "dot")]

Home > Welcome to Plone [English:(JAWS: "greater", VO: no pause, NVDA: no pause)]

Home : Welcome to Plone [English:(JAWS: "colon", VO: short pause, NVDA: long pause)]

Home | Welcome to Plone [English:(JAWS: "verti-cal bar", VO: "verti-cal line", NVDA: no pause)]

Version 5, edited 4 years ago by rmattb (previous) (next) (diff)

comment:5 Changed 4 years ago by bslash

After extensive discussion, we decided on using the slash, both for RTL and LTR languages. The machinery for RTL-checking is left in place to make adjustments easy.

The slash works best across various screenreaders, in the languages we could test, and is also recognized by Google and other search engines as a breadcrumb separator. This means the search results from a Plone site will be presented in a more accessible way on searchengines as well.

To be internally consistent, the same change has to be made to the new Search form, since it displays breadcrumb-separators as well.

comment:6 Changed 4 years ago by bslash

  • Status changed from new to closed
  • Resolution set to fixed
Note: See TracTickets for help on using tickets.