-
Notifications
You must be signed in to change notification settings - Fork 56
Docs accessibility issues
Julien Déramond edited this page Dec 12, 2023
·
16 revisions
On main
, pa11y-ci is configured to ignore a few things.
Here's a comprehensive list of ignored rules and elements, to discuss:
-
Orange brand: The
color-contrast
rule is ignored, since designers should already check the color accessibility of every component before releasing it. Furthermore this rule seems to raise many false positive and according to our a11y expert, it seems easier to check manually if there is no regression manually rather than automatically check. -
iframe
is flagged since it raises an error by default.
Show more
Errors in http://localhost:9001/docs/5.2/helpers/ratio/:
• Frames should be tested with axe-core (https://dequeuniversity.com/rules/axe/4.5/frame-tested?application=axeAPI)
(html > body > div:nth-child(6) > main > div:nth-child(3) > div:nth-child(7) > div:nth-child(1) > div > iframe)
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen=""></iframe>
-
#text-decoration + p + div a.text-decoration-none
is flagged since it raises an error because we present this class on a link.
Show more
Errors in http://localhost:9001/docs/5.2/utilities/text/:
• Links must be distinguishable without relying on color (https://dequeuniversity.com/rules/axe/4.5/link-in-text-block?application=axeAPI)
(html > body > div:nth-child(6) > main > div:nth-child(3) > div:nth-child(40) > div:nth-child(1) > a)
<a href="#" class="text-decoration-none">This link has its text decorati...</a>
-
.accordion-collapse
is flagged since it raises an error since we use anaria-labelledby
on a<div>
withoutrole
.
Show more
This should be removed depending on https://github.com/twbs/bootstrap/issues/37591 results.
-
#offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar
are flagged since we use anaria-labelledby
on a<div>
withoutrole
.
Show more
These should be removed once https://github.com/twbs/bootstrap/discussions/37571 is resolved.
Errors in http://localhost:9001/docs/5.2/utilities/text/:
• Links must be distinguishable without relying on color (https://dequeuniversity.com/rules/axe/4.5/link-in-text-block?application=axeAPI)
(html > body > div:nth-child(6) > main > div:nth-child(3) > div:nth-child(40) > div:nth-child(1) > a)
<a href="#" class="text-decoration-none">This link has its text decorati...</a>
-
TODO for
.overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive
-
fieldset.star-rating[disabled]
is flagged because of a pa11y error (see a11y explanation)
Show more
Errors in http://localhost:9001/docs/5.3/forms/checks-radios/:
• ARIA hidden element must not contain focusable elements
(https://dequeuniversity.com/rules/axe/4.2/aria-hidden-focus?application=axeAPI)
(html > body > div:nth-child(6) > main > div:nth-child(3) >
div:nth-child(65) > div:nth-child(1) > form > fieldset)
<fieldset class="star-rating" disabled="" aria-hidden="true"> <legend
class="visually-hi...</fieldset>
To maybe fine-tune our criteria, pa11y's wiki has a comprehensive list of ignorable rules.