From 3083596e87146c1c5a61de7238cb69e1dab5ae8b Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 7 Aug 2024 12:11:06 +0200 Subject: [PATCH] Docs: update WCAG links and references (#40703) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Julien Déramond --- .github/CONTRIBUTING.md | 2 +- scss/_functions.scss | 2 +- scss/_variables.scss | 4 ++-- scss/mixins/_visually-hidden.scss | 2 +- site/content/docs/5.3/components/carousel.md | 2 +- site/content/docs/5.3/getting-started/accessibility.md | 6 +++--- site/content/docs/5.3/migration.md | 2 +- 7 files changed, 10 insertions(+), 10 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index d18210b281..1c9caae3f3 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -221,7 +221,7 @@ includes code changes) and under the terms of the [Adhere to the Code Guide.](https://codeguide.co/#css) -- When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG20/#visual-audio-contrast). +- When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG/#distinguishable). - Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/) for more details. ### JS diff --git a/scss/_functions.scss b/scss/_functions.scss index 90296586b3..e04b5c61b3 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -177,7 +177,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05)); } -// Return WCAG2.1 relative luminance +// Return WCAG2.2 relative luminance // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio @function luminance($color) { diff --git a/scss/_variables.scss b/scss/_variables.scss index cfe25b528f..9db91c73a1 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -67,8 +67,8 @@ $colors: ( ) !default; // scss-docs-end colors-map -// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. -// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast +// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.2 are 3, 4.5 and 7. +// See https://www.w3.org/TR/WCAG/#contrast-minimum $min-contrast-ratio: 4.5 !default; // Customize the light and dark text colors for use in our color contrast function. diff --git a/scss/mixins/_visually-hidden.scss b/scss/mixins/_visually-hidden.scss index 082aeec957..388916ccf6 100644 --- a/scss/mixins/_visually-hidden.scss +++ b/scss/mixins/_visually-hidden.scss @@ -24,7 +24,7 @@ // Use to only display content when it's focused, or one of its child elements is focused // (i.e. when focus is within the element/container that the class was applied to) // -// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 +// Useful for "Skip to main content" links; see https://www.w3.org/WAI/WCAG22/Techniques/general/G1.html @mixin visually-hidden-focusable() { &:not(:focus):not(:focus-within) { diff --git a/site/content/docs/5.3/components/carousel.md b/site/content/docs/5.3/components/carousel.md index 422f0aaecd..5c2f1b6a1f 100644 --- a/site/content/docs/5.3/components/carousel.md +++ b/site/content/docs/5.3/components/carousel.md @@ -165,7 +165,7 @@ You can make your carousels autoplay on page load by setting the `ride` option t {{< callout info >}} For accessibility reasons, we recommend avoiding the use of autoplaying carousels. If your page does include an autoplaying carousel, we recommend providing an additional button or control to explicitly pause/stop the carousel. -See [WCAG 2.1 Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/TR/WCAG21/#pause-stop-hide). +See [WCAG 2.2 Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/TR/WCAG/#pause-stop-hide). {{< /callout >}} {{< example >}} diff --git a/site/content/docs/5.3/getting-started/accessibility.md b/site/content/docs/5.3/getting-started/accessibility.md index e9f1cb3165..d9c410544a 100644 --- a/site/content/docs/5.3/getting-started/accessibility.md +++ b/site/content/docs/5.3/getting-started/accessibility.md @@ -10,7 +10,7 @@ Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, ## Overview and limitations -The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill [WCAG 2.1](https://www.w3.org/TR/WCAG/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements. +The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill [WCAG 2.2](https://www.w3.org/TR/WCAG/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements. ### Structural markup @@ -24,7 +24,7 @@ Because Bootstrap's components are purposely designed to be fairly generic, auth ### Color contrast -Some combinations of colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.1 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and the [WCAG 2.1 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast)), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios. +Some combinations of colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.2 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and the [WCAG 2.2 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast)), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios. ### Visually hidden content @@ -51,7 +51,7 @@ On browsers that support `prefers-reduced-motion`, and where the user has *not* ## Additional resources -- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG/) +- [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG/) - [The A11Y Project](https://www.a11yproject.com/) - [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility) - [Tenon.io Accessibility Checker](https://tenon.io/) diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index d839f7681e..9fbe4a377f 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -431,7 +431,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - Added new tints and shades for every color, providing nine separate colors for each base color, as new Sass variables. -- Improved color contrast. Bumped color contrast ratio from 3:1 to 4.5:1 and updated blue, green, cyan, and pink colors to ensure WCAG 2.1 AA contrast. Also changed our color contrast color from `$gray-900` to `$black`. +- Improved color contrast. Bumped color contrast ratio from 3:1 to 4.5:1 and updated blue, green, cyan, and pink colors to ensure WCAG 2.2 AA contrast. Also changed our color contrast color from `$gray-900` to `$black`. - To support our color system, we've added new custom `tint-color()` and `shade-color()` functions to mix our colors appropriately.