diff --git a/apps/site/src/content/design-system/foundation/font/accessibility/notes-on-accessibility/content.mdoc b/apps/site/src/content/design-system/foundation/font/accessibility/notes-on-accessibility/content.mdoc new file mode 100644 index 000000000..f3fd365a4 --- /dev/null +++ b/apps/site/src/content/design-system/foundation/font/accessibility/notes-on-accessibility/content.mdoc @@ -0,0 +1,17 @@ +All components comply with WCAG 2.1 AA guidelines and Success Criteria. These fall under the [four principles of accessibility](/design-system/accessibility/design-system-accessibility) – Perceivable, Operable, Understandable and Robust. Below are some specific ways in which this component follows these principles: + +### Perceivable + +Do not use 300 (light) on text sizes below 18px or your text may fall out of an accessible colour contrast range. + +### Operable + +The Design System components have been coded to be navigable using a keyboard and other assistive technologies. WCAG compliance recommends being aware of the time it takes for people to complete tasks and to not automatically move focus. Animation should be controlled and simple so as not to cause seizures, and it’s important to provide the ability to perform the same task in multiple ways where possible. These rules have been followed where navigation and interaction is included in Design System components or patterns. + +### Understandable + +Be careful with the use of ALL CAPS, it can be difficult for users to scan large amounts of ALL CAPS text. In some cases screen readers will announce ALL CAPS as ‘shouting’, and some small words, like AND, GO or THE may be announced as acronyms. + +### Robust + +All Design System components have been coded so they can be clearly announced, understood and navigated using all modern assistive technologies. diff --git a/apps/site/src/content/design-system/foundation/font/index.yaml b/apps/site/src/content/design-system/foundation/font/index.yaml index 8799111e7..17999cff6 100644 --- a/apps/site/src/content/design-system/foundation/font/index.yaml +++ b/apps/site/src/content/design-system/foundation/font/index.yaml @@ -22,6 +22,9 @@ design: name: Dos and don’ts slug: dos-and-donts accessibility: + - title: + name: Notes on accessibility + slug: notes-on-accessibility - title: name: Accessibility features slug: accessibility-features