Context
Tried it first in this PR in my forked version of Bootstrap among other things — All check have passed.
There are still several TODO topics to tackle in https://github.com/twbs/bootstrap/pull/29315.
The target of this PR would be main-xmr-pa11y-ci.
I chose here to focus on having a green pa11y-ci job by hiding all elements reported as issues; it would help us to track the new issues that will be merged into main while trying to fix the current ones.
Indeed, pa11y-ci is a bit unstable at the moment and it becomes easier to check regression if you know that the job can be green (everything is OK) instead of having to analyze the red one that can be a regression or a crash...
I was thinking of the following process:
Fix existing issues
-
Done here Hide all the errors reported by pa11y-ci to have a green job.
- For each
hideElements rule, analyze it, define if it is a real issue and fill the table below with the analysis in the last column.
- If the issue can be fixed, open a PR and write its reference in the table below.
- When the issue is fixed / merged, remove the
hideElements rule.
Handle new issues
After each rebase of the main-xmr-pa11y-ci, the pa11y-ci job would be executed by GitHub CI. If we observe new issues in the artifact: we should write a new hideElements rule and add a new line in the table below.
Pa11y issues tracker
Total without any hideElements: 568 errors
Legend
-
⏹ Analysis must be done
-
⌛ Work In Progress — A PR is probably being reviewed
-
✅ Analysis done — Keep the
hideElements rule
-
✔ Analysis done — Removed the
hideElements rule
Missing submit button in Algolia search form
|
✅ |
| Error |
This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard. Submit buttons are INPUT elements with type attribute "submit" or "image", or BUTTON elements with type "submit" or omitted/invalid |
| First detected in |
/docs/5.1/about/overview |
| Path |
(html > body > nav > div > form) |
| HTML element |
<form class="bd-search position-relative me-auto"> <span class="algolia-aut...</form> |
hideElements rule |
.bd-search |
| Errors removed |
99 |
| Analysis |
Algolia doesn't provide a type="submit" HTML element associated to the form so we probably cannot do anything about it and must keep this rule. |
Insufficient contrast for text muted in the footer
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.45:1. Recommendation: change background to #fafbfc. |
| First detected in |
/docs/5.1/about/overview/ |
| Path |
(html > body > footer > div > div > div:nth-child(1) > ul > li:nth-child(1)) |
| HTML element |
<li class="mb-2">Designed and built with all the...</li> |
hideElements rule |
footer > div > div > div:nth-child(1) > ul > li |
| Errors removed |
306 |
| Analysis |
TODO |
Insufficient contrast for "Bootstrap" in the footer
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.27:1. Recommendation: change background to #fff. |
| First detected in |
/docs/5.1/examples/blog/ |
| Path |
(html > body > footer > p:nth-child(1) > a:nth-child(1)) |
| HTML element |
<a href="https://getbootstrap.com/">Bootstrap</a> |
hideElements rule |
footer > p > a |
| Errors removed |
6 |
| Analysis |
TODO |
Insufficient contrast for green text with gray background
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change background to #feffff. |
| First detected in |
/docs/5.1/about/brand/ |
| Path |
(html > body > div:nth-child(4) > main > div:nth-child(3) > div:nth-child(9) > div:nth-child(1) > strong) |
| HTML element |
<strong class="text-success">Correct</strong> |
hideElements rule |
div:nth-child(4) > main > div:nth-child(3) > div:nth-child(9) > div > strong |
| Errors removed |
3 |
| Analysis |
TODO |
Insufficient contrast for warning outline buttons on white background
|
✅ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 1.63:1. Recommendation: change text colour to #967100. |
| First detected in |
/docs/5.1/components/buttons |
| Path |
(html > body > div:nth-child(4) > main > div:nth-child(3) > div:nth-child(17) > button:nth-child(5)) (but also number 6 and 7) |
| HTML element |
<button type="button" class="btn btn-outline-warning">Warning</button> |
hideElements rule |
button.btn.btn-outline-warning, button.btn.btn-outline-info, button.btn.btn-outline-light |
| Errors removed |
12 |
| Analysis |
A message is already displayed in the documentation to explain that Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
|
Insufficient contrast for outline search button in Examples > Carousel
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.4:1. Recommendation: change background to #010509.
|
| First detected in |
/docs/5.1/examples/carousel/ |
| Path |
(#navbarCollapse > form > button) |
| HTML element |
<button class="btn btn-outline-success" type="submit">Search</button> |
hideElements rule |
nav.navbar-dark.bg-dark button.btn.btn-outline-success |
| Errors removed |
6 |
| Analysis |
TODO |
Insufficient contrast for gray text with light gray background in Examples > Cheatsheet
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.45:1. Recommendation: change background to #fafbfc. |
| First detected in |
/docs/5.1/examples/cheatsheet/ |
| Path |
(html > body > aside > h2) |
| HTML element |
<h2 class="h6 pt-4 pb-3 mb-4 border-bottom">On this page</h2> |
hideElements rule |
aside > h2 |
| Errors removed |
2 |
| Analysis |
TODO |
Missing legend element in fieldset in Examples > Cheatsheet
|
⏹ |
| Error |
Fieldset does not contain a legend element. All fieldsets should contain a legend element that describes a description of the field group. |
| First detected in |
/docs/5.1/examples/cheatsheet/ |
| Path |
(#disabled-forms > div:nth-child(2) > div > form > fieldset) |
| HTML element |
<fieldset disabled="" aria-label="Disabled fieldset example"> <div class="mb-3">...</fieldset> |
hideElements rule |
fieldset *:not(legend) doesn't seem to work so #disabled-forms > div:nth-child(2) > div > form > fieldset
|
| Errors removed |
2 |
| Analysis |
TODO |
Missing submit button in Example > Cheatsheet > Floating labels
|
⏹ |
| Error |
This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard. Submit buttons are INPUT elements with type attribute "submit" or "image", or BUTTON elements with type "submit" or omitted/invalid. |
| First detected in |
/docs/5.1/examples/cheatsheet/ |
| Path |
(#floating-labels > div:nth-child(2) > div > form) |
| HTML element |
<form> <div class="form-flo...</form> |
hideElements rule |
form:not(:has(> [type=submit])) doesn't work so #floating-labels > div:nth-child(2) > div > form
|
| Errors removed |
2 |
| Analysis |
TODO |
Insufficient contrast for nav pills used in Examples > Cheatsheet > Scrollspy
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.27:1. Recommendation: change background to #fff. |
| First detected in |
/docs/5.1/examples/cheatsheet/ |
| Path |
(#navbar-example2 > ul > li:nth-child(2) > a) |
| HTML element |
<a class="nav-link" href="#scrollspyHeading2">Second</a> |
hideElements rule |
.navbar.navbar-light > .nav.nav-pills > li > a.nav-link |
| Errors removed |
6 |
| Analysis |
Linked to another error in Components > Scrollspy |
Insufficient contrast for green texts in Examples > Checkout
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change background to #feffff. |
| First detected in |
/docs/5.1/examples/checkout/ |
| Path |
(html > body > div > main > div:nth-child(2) > div:nth-child(1) > ul > li:nth-child(4) > div > h6) |
| HTML element |
<h6 class="my-0">Promo code</h6> |
hideElements rule |
.bg-light > .text-success |
| Errors removed |
6 |
| Analysis |
TODO |
Insufficient contrast for disabled dropdown item in Components > Dropdowns
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.07:1. Recommendation: change text colour to #6f777f. |
| First detected in |
/docs/5.1/components/dropdowns/ |
| Path |
(html > body > div:nth-child(4) > main > div:nth-child(3) > div:nth-child(79) > ul > li:nth-child(2) > a) |
| HTML element |
<a class="dropdown-item disabled">Disabled link</a> |
hideElements rule |
ul.dropdown-menu > li > a.dropdown-item.disabled |
| Errors removed |
1 |
| Analysis |
TODO |
Insufficient color contrast for light links with light background in Helpers > Colored Links
|
✅ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 1.63:1. Recommendation: change text colour to #967100 |
| First detected in |
/docs/5.1/helpers/colored-links/ |
| Path |
(html > body > div:nth-child(4) > main > div:nth-child(2) > div:nth-child(2) > a:nth-child(5)) |
| HTML element |
<a href="#" class="link-warning">Warning link</a> (same thing for link-info and link-light) (see outline buttons) |
hideElements rule |
a.link-warning, a.link-info, a.link-light |
| Errors removed |
3 |
| Analysis |
A message is already displayed in the documentation mentioning that Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
|
Insufficient contrast for search button with green outline in Components > Navbar
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change background to #feffff. |
| First detected in |
/docs/5.1/components/navbar/ |
| Path |
(#navbarSupportedContent > form > button) |
| HTML element |
<button class="btn btn-outline-success" type="submit">Search</button> (same for btn-outline-secondary and btn-outline-primary) |
hideElements rule |
nav.navbar.navbar-light.bg-light .btn.btn-outline-success, nav.navbar.navbar-light.bg-light .btn.btn-outline-secondary, nav.navbar.navbar-light .btn.btn-outline-primary |
| Errors removed |
10 |
| Analysis |
TODO |
Duplicate "constructor" id in Components / List Group
|
✅ |
| Error |
Duplicate id attribute value "constructor" found on the web page. |
| First detected in |
/docs/5.1/components/list-group/ |
| Path |
(#constructor) |
| HTML element |
<h4 id="constructor">constructor<a class="anchorjs-l...</h4> (I chose one to hide) |
hideElements rule |
h4#constructor |
| Errors removed |
2 |
| Analysis |
Not sure to understand why but it is related to the "constructor" string even if we only declare this id once in <h4 id="constructor"> via #### constructor. Changing the id removes the error but we don't want to change the title just for that. |
Insufficient contrast for text muted with light background in Examples > List Groups
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.45:1. Recommendation: change background to #fafbfc. |
| First detected in |
/docs/5.1/examples/list-groups/ |
| Path |
(html > body > div:nth-child(6) > label:nth-child(4) > span > small) |
| HTML element |
<small class="d-block text-muted"> <svg class="bi me-1" w...</small> |
hideElements rule |
label.bg-light .text-muted |
| Errors removed |
1 |
| Analysis |
TODO |
Insufficient contrast for nav pills used in Components > Scrollspy
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.27:1. Recommendation: change background to #fff. |
| First detected in |
/docs/5.1/components/scrollspy |
| Path |
(#navbar-example3 > nav > nav:nth-child(2) > a:nth-child(1)) |
| HTML element |
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a> |
hideElements rule |
nav.navbar-light.bg-light nav.nav.nav-pills > a.nav-link |
| Errors removed |
6 |
| Analysis |
Linked to another error in Examples > Scrollspy |
Insufficient contrast for text muted with light background in Examples > Dashboard
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.45:1. Recommendation: change background to #fafbfc. |
| First detected in |
/docs/5.1/examples/dashboard/ |
| Path |
(#sidebarMenu > div > h6 > span) |
| HTML element |
<span>Saved reports</span> |
hideElements rule |
.sidebar.bg-light .text-muted |
| Errors removed |
2 |
| Analysis |
TODO |
Missing submit button in Forms > Floating Labels
|
⏹ |
| Error |
This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard. Submit buttons are INPUT elements with type attribute "submit" or "image", or BUTTON elements with type "submit" or omitted/invalid. |
| First detected in |
/docs/5.1/forms/floating-labels/ |
| Path |
(html > body > div:nth-child(4) > main > div:nth-child(3) > div:nth-child(7) > form) |
| HTML element |
<form class="form-floating"> <input type="email" class="f...</form> |
hideElements rule |
form.form-floating |
| Errors removed |
2 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.45:1. Recommendation: change background to #fafbfc. |
| First detected in |
/docs/5.1/examples/jumbotron/ |
| Path |
(html > body > main > div > div:nth-child(3) > div:nth-child(2) > div > button) |
| HTML element |
<button class="btn btn-outline-secondary" type="button">Example button</button> |
hideElements rule |
.bg-light .btn.btn-outline-secondary |
| Errors removed |
2 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard. Submit buttons are INPUT elements with type attribute "submit" or "image", or BUTTON elements with type "submit" or omitted/invalid. |
| First detected in |
/docs/5.1/examples/navbars/ |
| Path |
(#navbarsExample02 > form) and other ids |
| HTML element |
<form> <input class="form-c...</form> |
hideElements rule |
div[id^=navbarsExample] > form |
| Errors removed |
10 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
Anchor element found with a valid href attribute, but no link content has been supplied. |
| First detected in |
/docs/5.1/examples/headers/ |
| Path |
(html > body > main > div:nth-child(6) > header > a) |
| HTML element |
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none"> <svg class="bi me-2" w...</a> |
hideElements rule |
main > header > div > div > a, main > div > header > a, main header > div > div > div > a |
| Errors removed |
5 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This textinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined. /// This form field should be labelled in some way. Use the label element (either with a "for" attribute or wrapped around the form field), or "title", "aria-label" or "aria-labelledby" attributes as appropriate. |
| First detected in |
/docs/5.1/examples/checkout/ |
| Path |
(html > body > div > main > div:nth-child(2) > div:nth-child(1) > form > div > input) |
| HTML element |
<input type="text" class="form-control" placeholder="Promo code"> |
hideElements rule |
input.form-control[placeholder='Promo code'], input.form-control[placeholder='رمز ترويجي'] |
| Errors removed |
4 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.45:1. Recommendation: change background to #fafbfc. |
| First detected in |
/docs/5.1/examples/checkout |
| Path |
(html > body > div > main > div:nth-child(2) > div:nth-child(2) > form > div:nth-child(1) > div:nth-child(4) > label > span) |
| HTML element |
<span class="text-muted">(Optional)</span> |
hideElements rule |
.bg-light form small.text-muted, .bg-light form span.text-muted |
| Errors removed |
6 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.45:1. Recommendation: change background to #fafbfc. |
| First detected in |
/docs/5.1/examples/checkout/ |
| Path |
(html > body > div > footer > p) |
| HTML element |
<p class="mb-1">© 2017–2021 Company Name</p> |
hideElements rule |
.bg-light footer.text-muted > p |
| Errors removed |
2 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.27:1. Recommendation: change background to #fff. |
| First detected in |
/docs/5.1/examples/checkout |
| Path |
(html > body > div > footer > ul > li:nth-child(1) > a) |
| HTML element |
<a href="#">Privacy</a> |
hideElements rule |
.bg-light footer > ul > li > a |
| Errors removed |
6 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard. Submit buttons are INPUT elements with type attribute "submit" or "image", or BUTTON elements with type "submit" or omitted/invalid. |
| First detected in |
/docs/5.1/examples/dropdowns |
| Path |
(#dropdownFilter > div:nth-child(1) > form) |
| HTML element |
<form class="p-2 mb-2 bg-light border-bottom"> <input type="search" cla...</form> |
hideElements rule |
#dropdownFilter > div > form |
| Errors removed |
4 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This button element does not have a name available to an accessibility API. Valid names are: title undefined, element content, aria-label undefined, aria-labelledby undefined. |
| First detected in |
/docs/5.1/examples/dropdowns |
| Path |
(#dropdownCalendar > div > div > div:nth-child(1) > button:nth-child(1)) |
| HTML element |
<button class="btn cal-btn" type="button"> <svg class="bi" widt...</button> and other elements of #dropdownCalendar
|
hideElements rule |
#dropdownCalendar > div > div > div > select, #dropdownCalendar > div > div > div > button |
| Errors removed |
4 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
Anchor element found with a valid href attribute, but no link content has been supplied. |
| First detected in |
/docs/5.1/examples/footers |
| Path |
(html > body > div:nth-child(2) > footer > a) and different combination of <a> in footers |
| HTML element |
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> <svg class="bi me-2" wid...</a> |
hideElements rule |
footer > p + a[href='/'], footer > div > a[href='/'], footer ul > li > a[href='#'] |
| Errors removed |
9 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard. Submit buttons are INPUT elements with type attribute "submit" or "image", or BUTTON elements with type "submit" or omitted/invalid. |
| First detected in |
/docs/5.1/examples/footers |
| Path |
(html > body > div:nth-child(10) > footer > div:nth-child(1) > div:nth-child(4) > form) |
| HTML element |
<form> <h5>Subscribe to our...</form> |
hideElements rule |
div:nth-child(10) > footer > div:nth-child(1) > div:nth-child(4) > form |
| Errors removed |
1 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 1.63:1. Recommendation: change text colour to #967100. |
| First detected in |
/docs/5.1/examples/grid |
| Path |
(html > body > main > div:nth-child(1) > p:nth-child(25)) |
| HTML element |
<p class="text-warning"> No grid classes are nece...</p> |
hideElements rule |
p.text-warning |
| Errors removed |
1 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.29:1. Recommendation: change text colour to #fff. |
| First detected in |
/docs/5.1/examples/headers/ |
| Path |
(html > body > main > header:nth-child(8) > div > div > ul > li:nth-child(1) > a) |
| HTML element |
<a href="#" class="nav-link px-2 text-secondary">Home</a> |
hideElements rule |
header div.bg-dark a.text-secondary, header.bg-dark a.text-secondary |
| Errors removed |
2 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard. Submit buttons are INPUT elements with type attribute "submit" or "image", or BUTTON elements with type "submit" or omitted/invalid. |
| First detected in |
/docs/5.1/examples/headers/ |
| Path |
(html > body > main > header:nth-child(8) > div > div > form) and other header examples as well |
| HTML element |
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> <input type="search"...</form> |
hideElements rule |
header:nth-child(8) > div > div form, header:nth-child(10) > div > div form, header:nth-child(12) > div > div form, header:nth-child(16) > div form, header:nth-child(18) > div > div form |
| Errors removed |
5 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.45:1. Recommendation: change background to #fafbfc. |
| First detected in |
/docs/5.1/examples/heroes/ |
| Path |
(html > body > main > div:nth-child(8) > div > div:nth-child(2) > form > small) |
| HTML element |
<small class="text-muted">By clicking Sign up, you agree ...</small> |
hideElements rule |
form.bg-light small.text-muted |
| Errors removed |
1 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.29:1. Recommendation: change text colour to #fff. |
| First detected in |
/docs/5.1/examples/heroes/ |
| Path |
(html > body > main > div:nth-child(12) > div > div > p) |
| HTML element |
<p class="fs-5 mb-4">Quickly design and customize re...</p> |
hideElements rule |
div.bg-dark.text-secondary p |
| Errors removed |
1 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.27:1. Recommendation: change background to #fff. |
| First detected in |
/docs/5.1/examples/navbars/ |
| Path |
(html > body > main > div:nth-child(12) > div > div > div > p:nth-child(2) > code) |
| HTML element |
<code>.container</code> |
hideElements rule |
.bg-light code |
| Errors removed |
6 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.27:1. Recommendation: change background to #fff. |
| First detected in |
/docs/5.1/exampless/navbars |
| Path |
(html > body > main > div:nth-child(12) > div > div > div > p:nth-child(2) > a:nth-child(2)) |
| HTML element |
<a href="/docs/5.1/examples/navbar-static/">top</a> |
hideElements rule |
.bg-light a |
| Errors removed |
10 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.45:1. Recommendation: change background to #fafbfc. |
| First detected in |
/docs/5.1/examples/sticky-footer |
| Path |
(html > body > footer > div > span) |
| HTML element |
<span class="text-muted">Place sticky footer content her...</span> |
hideElements rule |
footer.bg-light span.text-muted |
| Errors removed |
2 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard. Submit buttons are INPUT elements with type attribute "submit" or "image", or BUTTON elements with type "submit" or omitted/invalid. |
| First detected in |
/docs/5.1/components/navbar |
| Path |
(html > body > div:nth-child(4) > main > div:nth-child(3) > div:nth-child(55) > nav > form) and another form + button |
| HTML element |
<form class="container-fluid"> <div class="input-group"> ...</form> |
hideElements rule |
main > div:nth-child(3) > div:nth-child(55) > nav > form, main > div:nth-child(3) > div:nth-child(59) > nav > form, main > div:nth-child(3) > div:nth-child(133) > nav > div > button |
| Errors removed |
3 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.27:1. Recommendation: change text colour to #fff. |
| First detected in |
/docs/5.1/utilities/opacity |
| Path |
(html > body > div:nth-child(4) > main > div:nth-child(2) > div:nth-child(3) > div:nth-child(1)) but concerns the 4 examples |
| HTML element |
<div class="opacity-100 p-3 m-2 bg-primary text-light fw-bold rounded">100%</div> |
hideElements rule |
.opacity-100.bg-primary.text-light, .opacity-75.bg-primary.text-light, .opacity-50.bg-primary.text-light, .opacity-25.bg-primary.text-light |
| Errors removed |
4 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
Not all th elements in this table have a scope attribute. These cells should contain a scope attribute to identify their association with td elements |
| First detected in |
/docs/5.1/examples/pricing |
| Path |
(html > body > div > main > div:nth-child(3) > table) |
| HTML element |
``` |
hideElements rule |
main > div:nth-child(3) > table.table.text-center |
| Errors removed |
1 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation: change background to #fbfbfb. |
| First detected in |
/docs/5.1/examples/sign-in |
| Path |
(html > body > main > form > p) |
| HTML element |
<p class="mt-5 mb-3 text-muted">© 2017–2021</p> |
hideElements rule |
body > main > form > p.text-muted |
| Errors removed |
1 |
| Analysis |
TODO |
TODO: Add a title
|
⏹ |
| Error |
This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard. Submit buttons are INPUT elements with type attribute "submit" or "image", or BUTTON elements with type "submit" or omitted/invalid. |
| First detected in |
/docs/5.1/components/toasts/ |
| Path |
(html > body > div:nth-child(4) > main > div:nth-child(3) > div:nth-child(49) > form) |
| HTML element |
<form> <div class="mb-3"> <labe...</form> |
hideElements rule |
main > div:nth-child(3) > div:nth-child(49) > form |
| Errors removed |
1 |
| Analysis |
TODO |