Calcite based site failing Accessibility Checker

446
3
Jump to solution
04-27-2022 09:26 AM
LefterisKoumis
Occasional Contributor III

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?

"

0 Kudos
1 Solution

Accepted Solutions
KittyHurley
Esri Contributor

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.

 

View solution in original post

0 Kudos
3 Replies
KittyHurley
Esri Contributor

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:

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

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

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 

0 Kudos
KittyHurley
Esri Contributor

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.

 

0 Kudos