From d72e911b3f8bf71fb0a32ff1077c0b36c98291af Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 30 Nov 2021 00:33:30 +0000 Subject: [PATCH] Update links to CCA, MQ5 prefers-reduced-motion, evergreen WCAG urls, more resources Manual backport of https://github.com/twbs/bootstrap/pull/33797 --- .../docs/4.6/getting-started/accessibility.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/site/content/docs/4.6/getting-started/accessibility.md b/site/content/docs/4.6/getting-started/accessibility.md index e8fe841267ed..a65d5345b989 100644 --- a/site/content/docs/4.6/getting-started/accessibility.md +++ b/site/content/docs/4.6/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.0](https://www.w3.org/TR/WCAG20/) (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.1](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 -Most colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—lead to *insufficient* color contrast (below the recommended [WCAG 2.0 color contrast ratio of 4.5:1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)) when used against a light background. Authors will need to manually modify/extend these default colors to ensure adequate color contrast ratios. +Most colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—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)) when used against a light background. Authors will need to manually modify/extend these default colors to ensure adequate color contrast ratios. ### Visually hidden content @@ -45,13 +45,15 @@ For visually hidden interactive controls, such as traditional "skip" links, `.sr ### Reduced motion -Bootstrap includes support for the [`prefers-reduced-motion` media feature](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down. +Bootstrap includes support for the [`prefers-reduced-motion` media feature](https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down. ## Additional resources -- [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG20/) +- [Web Content Accessibility Guidelines (WCAG) 2.1](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/) -- [Colour Contrast Analyser (CCA)](https://developer.paciellogroup.com/resources/contrastanalyser/) +- [Color Contrast Analyser (CCA)](https://www.tpgi.com/color-contrast-checker/) - ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer) +- [Microsoft Accessibility Insights](https://accessibilityinsights.io/) +- [Deque Axe testing tools](https://www.deque.com/axe/) \ No newline at end of file