From 2600e05361e18b57d95978f0a691c7c7d0d39f07 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Tue, 29 Jan 2019 23:49:46 -0800 Subject: [PATCH] Docs: Add accessbility specific page (#13169) * Docs: Add accessbility specific page Adds an additional page to the developer handbook on accessibility in particular the landmark regions. Fixes #3217 * Add navigationRegions link --- .../developers/accessibility.md | 17 +++++++++++++++++ docs/manifest.json | 6 ++++++ docs/toc.json | 1 + 3 files changed, 24 insertions(+) create mode 100644 docs/designers-developers/developers/accessibility.md diff --git a/docs/designers-developers/developers/accessibility.md b/docs/designers-developers/developers/accessibility.md new file mode 100644 index 00000000000000..ab6c0d0066b1dc --- /dev/null +++ b/docs/designers-developers/developers/accessibility.md @@ -0,0 +1,17 @@ +# Accessibility + +Accessibility documentation for developers working on the Gutenberg Project. + +For more information on accessibility and WordPress see the [Make WordPress Accessibility Handbook](https://make.wordpress.org/accessibility/handbook/) and the [Accessibility Team section](https://make.wordpress.org/accessibility/). + +## Landmark Regions + +It is a best practice to include ALL content on the page in landmarks, so that screen reader users who rely on them to navigate from section to section do not lose track of content. + +For setting up navigation between different regions, see the [navigateRegions package](/packages/components/src/higher-order/navigate-regions/README.md) for additional documentation. + +Read more regarding landmark design from W3C: + +- [General Principles of Landmark Design](https://www.w3.org/TR/wai-aria-practices-1.1/#general-principles-of-landmark-design) +- [ARIA Landmarks Example](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/) +- [HTML5 elements that by default define ARIA landmarks](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html) diff --git a/docs/manifest.json b/docs/manifest.json index e82a59211c3923..35964c417ab5ec 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -101,6 +101,12 @@ "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/internationalization.md", "parent": "developers" }, + { + "title": "Accessibility", + "slug": "accessibility", + "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/accessibility.md", + "parent": "developers" + }, { "title": "Data Module Reference", "slug": "data", diff --git a/docs/toc.json b/docs/toc.json index cdb3fa096507b6..4e06b65d552ce7 100644 --- a/docs/toc.json +++ b/docs/toc.json @@ -18,6 +18,7 @@ {"docs/designers-developers/developers/filters/autocomplete-filters.md": []} ]}, {"docs/designers-developers/developers/internationalization.md": []}, + {"docs/designers-developers/developers/accessibility.md": []}, {"docs/designers-developers/developers/data/README.md": "{{data}}"}, {"docs/designers-developers/developers/packages.md": "{{packages}}"}, {"packages/components/README.md": "{{components}}"},