nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Calcite based site failing Accessibility Checker

LefterisKoumis

I developed a site using Calcite Design System but a lot if its elements are failing the test for accessibility. It seems that the accessibility checker can't recognize any of the aria keywords that used in calcite tags.

For example, I get an error: "Text not included in an ARIA landmark" and it refers to the line :

<calcite-block open heading="Postmile Tools" style="height:1110px">

It was recommended by the checker to use the aria-label.

I did so but it does not recognize it.

<calcite-block open heading="Postmile Tools" aria-label="Postmile tools" style="height:1110px">

Ideas?

Find more posts tagged with

Accepted answers

KittyHurley

The browser extension could be the issue. As a browser and extensions interact, new unrelated errors can be introduced, in particular as browsers and/or extensions update. Extensions can also conflict with other extensions generating unrelated errors. While we don't use or support the use of the Siteimprove extension, we recommend assistive technologies such as NVDA, JAWS, and VoiceOver and the use of axe as an extension for Chrome, Firefox, and Edge.

In checking the website provided with a few assistive technologies, NVDA and JAWS, we are able to navigate, access, and experience the site as-expected. In using axe, we don't receive errors pertaining to calcite-block.

All comments

KittyHurley

Hi @LefterisKoumis,

By default calcite-block adds in collapse/expand as the "aria-label". The "intl-expand" and "intl-collapse" attributes can also be used to enter a custom string to change the collapse and expand defaults.

Could you provide additional details into the accessibility testing that is generating the error?

Some questions to guide us through:

Are you using assistive technologies for the test? If so, could you name the specific technology, such as JAWS, NVDA, Voiceover, Dragon, etc.?
Provide a Codepen sample of the code that is being tested and not passing?

LefterisKoumis

My department uses the Chrome extension Siteimprove Accessibility Checker which is available at: https://chrome.google.com/webstore/detail/siteimprove-accessibility/djcglbmbegflehmbfleechkjhmedcopn?hl=en.

Furthermore, the department's criteria of meeting accessibility requirements is by complying with the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA criteria.

I don't use codepen but you can see the script by viewing the page source at: view-source:https://svctenvims.dot.ca.gov/pm_tools/index.html

KittyHurley

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.