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?
"
Solved! Go to Solution.
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.
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:
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
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.