search

civictheme / uikit

UI atomic component-based library with Storybook integration
https://uikit.civictheme.io/
GNU General Public License v2.0
6 stars 5 forks source link

WCAG 4.1.3 AA: JAWS includes breadcrumb separator in list item count (Issue A4) #354

Open CJE001 opened 1 month ago

CJE001 commented 1 month ago

Summary

Via Vision Australia assessment: August 2024

Note: DTA have a 90 day remediation period to address the identified issues within the audit, all issues must be resolved to obtain WCAG 2.2 certification for digital.gov.au

Steps to reproduce

Example: DSS Criterion 3 | digital.gov.au (https://www.digital.gov.au/policy/digital-experience/digital-service-standard/criterion-3)

When navigating the site using the JAWS screen reader, the decorative listitem separator (chevron) in the breadcrumb navigation is included in the total listitem count. For example, on the DSS Criterion 3 page, the breadcrumb includes 5 pages, however, the list is exposed as "List with 9 items".

This is occurring as the chevron has been added via its own < li > element.

Picture4

Observed outcome

<ul class="ct-item-list ct-item-list--horizontal ct-item-list--regular ct-item-list--no-gap ct-breadcrumb__links hide-xxs show-m-flex">
<li class="ct-item-list__item">
<a class="ct-link ct-theme-dark ct-breadcrumb__links__link" href="/">
Home
</a>
</li>
<li class="ct-item-list__item">
<svg class="ct-icon ct-breadcrumb__links__separator" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
…</svg>
</li>
<li class="ct-item-list__item">
<a class="ct-link ct-theme-dark ct-breadcrumb__links__link" href="/policy">
Policy
</a>
</li>
<li class="ct-item-list__item">
<svg class="ct-icon ct-breadcrumb__links__separator" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
…</svg>
</li>

Why this matters

JAWS users may be confused when the number of navigable listitems within the list does not match the number exposed by their screen reader.

Expected outcome

Move the element to the end of each link in the code, within the same

  • element. Delete the additional
  • elements. The element should also have the focusable="false" attribute added to ensure it is not in the focus order for older browsers.

    Code example 

    <li class="ct-item-list__item">
<a class="ct-link ct-theme-dark ct-breadcrumb__links__link" href="/">
Home
</a>
<svg class="ct-icon ct-breadcrumb__links__separator" aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
…
</svg>
</li>
    • fionamorrison23 commented 1 month ago

    Hi @CJE001 would you be able to provide the priority here as you have done on other tickets? Thanks.