diff --git a/website/docs/guides/accessibility/01-accessible-content.mdx b/website/docs/guides/accessibility/01-accessible-content.mdx new file mode 100644 index 00000000..52e7c049 --- /dev/null +++ b/website/docs/guides/accessibility/01-accessible-content.mdx @@ -0,0 +1,17 @@ +--- +title: Accessible content +description: Guidelines for text, images, and video. +id: accessible-content +tags: [accessibility, screen reader] +draft: true +--- + +:::warning Work in progress +This guide will cover the absolute basics of accessible content. + +- Image descriptions ("alt text") +- Captions for videos +- Video descriptions +- Readability (text accessibility) +::: + diff --git a/website/docs/guides/accessibility/02-cognitive-load.mdx b/website/docs/guides/accessibility/02-cognitive-load.mdx new file mode 100644 index 00000000..e552e9d5 --- /dev/null +++ b/website/docs/guides/accessibility/02-cognitive-load.mdx @@ -0,0 +1,15 @@ +--- +title: Cognitive load +description: Designing around the constraints of our brain power. +tags: [accessibility, cognitive load] +draft: true +--- + +:::warning Work in progress +This guide will give a high-level overview of what cognitive load is and provide some tips for using it as a design constraint. + +- Designing around working memory +- Reducing extraneous cognitive load - this should cover the concept of germane/extraneous cognitive load +- Just in time - how "just in time" design helps reduce cognitive load +::: + diff --git a/website/docs/guides/accessibility/03-managing-focus.mdx b/website/docs/guides/accessibility/03-managing-focus.mdx new file mode 100644 index 00000000..77ef2e0a --- /dev/null +++ b/website/docs/guides/accessibility/03-managing-focus.mdx @@ -0,0 +1,16 @@ +--- +title: Managing focus +description: How to think about keyboard interactions +tags: [accessibility, focus] +draft: true +--- + +:::warning Work in progress +This guide will cover focus management and keyboard interactions more generally. + +- The purpose of the focus indicator, as well as how NDS has designed it. +- What can we focus? - clarification that only interactive elements can/should be focused. Principles for thinking about this. +- Who uses focus? - focus is used by everyone but required by some. +- Focus order - how to think about designing the focus order/layout of your page. +::: + diff --git a/website/docs/guides/accessibility/04-dynamic-content.mdx b/website/docs/guides/accessibility/04-dynamic-content.mdx new file mode 100644 index 00000000..d7785535 --- /dev/null +++ b/website/docs/guides/accessibility/04-dynamic-content.mdx @@ -0,0 +1,15 @@ +--- +title: Managing dynamic content +description: Principles and tips for ensuring that dynamic content is accessible. +tags: [accessibility, screen reader] +draft: true +--- + +:::warning Work in progress +This guide will cover how to design content that changes on the page. + +- How screen reader users experience content changes +- Principles: notify users about changes, don't move focus, and only change one thing at a time + - Gestalt principles? +::: +