Search code examples
accessibilitybreadcrumbsscreen-readers

Breadcrumbs: Abbreviated but still accessible

mockup

Above you se a typical breadcrumb. Sometimes there are to many steps in that breadcrumb, so we have to shorten it by replacing some of the steps in the middle and display three dots instead

mockup

When a user clicks on the three dots, the entire breadcrumb is visible.

How would you handle the accessibility issues here?

We would like to show all the steps to our screen reader users so those users can tab trough the entire breadcrumb whiteout ever knowing about those dots.

All other users will only be able to see those tree dots.

We can accomplish this in a few ways:

  1. Use display:none but this will hide the hidden content for all users, including screen readers

  2. We can use the class.sr-only (since we're using Bootstrap) or something similar on those hidden links so only users with screen readers will se the hidden parts of the breadcrumb. This will work, but it will remove the hidden parts breadcrumbs from the tab order.

  3. We can stick to #2 above and add taborder="0" to those hidden links in the breadcrumb, but then we also have to add taborder="0" to every single interaktive element on the entire site and that is NOT an option. :-)

Are there any other ways to include the hidden links in the tab order?

(Sure, one can discuss the UX aspect of abbreviating a breadcrumb, but that's perhaps another topic.)

Solution

  • (Sure, one can discuss the UX aspect of abbreviating a breadcrumb another topic.)

    This is perfectly the topic.

    Blind person are normal people who like simple things. If you think your breadcrumb is too long, give them the same functionalities :

     <button aria-label="view full breadcrumb">...</button>

    Breadcrumbs have not been invented for blind people. They are part of one technique in a WCAG AAA guideline which implies that : it's not mandatory, and that it concerns everybody.

    If you include hidden links in the tab and speech order, you are sure that your website won't be accessible.

    A near-blind person using a screenreader in support of his eyes won't be able to view a link on the screen while it's announced by the screenreader.

    A person using a keyboard only system will focus an invisible link which will remove the predictability of the focus order.

    Note that for 2/ and 3/ the sr-only does not remove the elements from the tabindex, so this will work as you would expect