diff --git a/site/content/docs/0.0/getting-started/accessibility.md b/site/content/docs/0.0/getting-started/accessibility.md index 0f4e64ced0..9d4264f477 100644 --- a/site/content/docs/0.0/getting-started/accessibility.md +++ b/site/content/docs/0.0/getting-started/accessibility.md @@ -8,4 +8,100 @@ aliases: toc: true --- -{{< callout-soon "page" >}} +OUDS Web provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box. + +## Overview and limitations + +The overall accessibility of any project built with OUDS Web 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 OUDS Web 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 + +OUDS Web's styling and layout can be applied to a wide range of markup structures. This documentation aims to provide developers with best practice examples to demonstrate the use of OUDS Web itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed. + +### Interactive components + +OUDS Web's interactive components are designed to work for touch, mouse, and keyboard users. Through the use of relevant [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers). + +Because OUDS Web's components are purposely designed to be fairly generic, authors may need to include further ARIA roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation. + + + +### Visually hidden content + +Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the `.visually-hidden` class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users. + + + +For visually hidden interactive controls, such as traditional "skip" links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.** + +```html +Skip to main content +``` + +### Reduced motion + +OUDS Web 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 OUDS Web will be disabled, and meaningful animations will be slowed down. + +On browsers that support `prefers-reduced-motion`, and where the user has *not* explicitly signaled that they'd prefer reduced motion (i.e. where `prefers-reduced-motion: no-preference`), OUDS Web enables smooth scrolling using the `scroll-behavior` property. + +### Focus visibility + +OUDS Web includes [WICG's `:focus-visible` polyfill](https://github.com/WICG/focus-visible) to ensure an enhanced focus visibility for keyboard users while shutting down focus styles on active state. + +{{< scss-docs name="focus-visibility" file="scss/_reboot.scss" >}} + +OUDS Web provides `focus-visible()` mixin to ensure a proper visible focus state: + +{{< scss-docs name="focus-visible" file="scss/mixins/_focus.scss" >}} + +This visible focus state is defined by an outer outline and an inner box shadow. Colors are switched in a dark context. Here are the basic variables that define this visible focus: + +{{< scss-docs name="focus-visible-variables" file="scss/_variables.scss" >}} + + + + + +### Minimum target size + +OUDS Web provides `target-size()` mixin to ensure a minimum target size, adding a centered pseudo-element with a minimum size —defaulting to `44px` to pass [WCAG 2.1 "Target Size" Success Criterion (2.5.5)](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)— alongside a few arguments to fit specific needs (e.g. different width and height, using `::after` instead of `::before`, etc.). + +{{< scss-docs name="target-size" file="scss/mixins/_target-size.scss" >}} + +### Maximum line length + +When writing a paragraph, it is commonly admitted that a line should have 80 characters as a maximum. This phenomenon is carefully explained in the [C20 technique: Using relative measurements to set column widths](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C20). + + + +## Additional resources + +- [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/) +- [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/) +- [Orange accessibility guidelines](http://a11y-guidelines.orange.com/) +- [Introduction to Web Accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/) +- [`:focus-visible` on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index c3b91f1e4b..57e1f0fe3b 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -21,7 +21,6 @@ - title: Vite draft: true - title: Accessibility - draft: true - title: RFS draft: true - title: RTL