From 2f192b438342127467e9b1ddf91fecf0ed8cdb2c Mon Sep 17 00:00:00 2001 From: Robert Linder Date: Wed, 9 Mar 2022 16:15:32 +0100 Subject: [PATCH] Plugins accessibility: add beginner-friendly docs (#8047) --- PLUGIN-GUIDE.md | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/PLUGIN-GUIDE.md b/PLUGIN-GUIDE.md index efb6c5d7d94..fa8a6654ac6 100644 --- a/PLUGIN-GUIDE.md +++ b/PLUGIN-GUIDE.md @@ -17,6 +17,7 @@ This guide lists a number of best practices for publishing a Leaflet plugin that - [Plugin API](#plugin-api) 3. [Content Accessibility](#content-accessibility) - [Accessibility Testing](#accessibility-testing) + - [Learn about web accessibility](#learn-about-web-accessibility) 4. [Publishing on NPM](#publishing-on-npm) 5. [Module Loaders](#module-loaders) 6. [Adding to the plugins list](#adding-to-the-plugins-list) @@ -141,16 +142,10 @@ Thus it's important to ensure components are keyboard-friendly, and non-text content (such as icon fonts and images) either have a text alternative or are hidden from screen readers if they're purely decorative. -Learn more about web accessibility: - -- [WAI (Web Accessibility Initiative): Accessibility Fundamentals Overview](https://www.w3.org/WAI/fundamentals/) -- [ARIA in HTML (Accessible Rich Internet Applications)](https://www.w3.org/TR/html-aria/) -- [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/) -- [Using ARIA](https://www.w3.org/TR/using-aria/) -- [WCAG (Web Content Accessibility Guidelines)](https://www.w3.org/TR/WCAG/) - ### Accessibility Testing +#### Automated testing + Tools for automated testing can help you discover common accessibility issues: - [Lighthouse](https://developers.google.com/web/tools/lighthouse/) @@ -159,10 +154,29 @@ Tools for automated testing can help you discover common accessibility issues: - [Accessibility Insights](https://accessibilityinsights.io/) - [webhint](https://webhint.io/) +#### Manual testing + It is highly recommended that you test your components manually using only your keyboard, as well as using a screen reader such as Narrator, NVDA, VoiceOver, or JAWS. +### Learn about web accessibility + +Beginner-friendly documentation: + +- [What is accessibility?](https://web.dev/what-is-accessibility/) +- [Make your site keyboard accessible](https://web.dev/accessible/#make-your-site-keyboard-accessible) +- [Understand semantics and basic screen reader support](https://web.dev/accessible/#understand-semantics-and-basic-screen-reader-support) +- More guides at [MDN web docs: Accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility) + +Authoritative documentation: + +- [WAI (Web Accessibility Initiative): Accessibility Fundamentals Overview](https://www.w3.org/WAI/fundamentals/) +- [ARIA in HTML (Accessible Rich Internet Applications)](https://www.w3.org/TR/html-aria/) +- [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/) +- [Using ARIA](https://www.w3.org/TR/using-aria/) +- [WCAG (Web Content Accessibility Guidelines)](https://www.w3.org/TR/WCAG/) + ## Publishing on NPM NPM (Node Packaged Modules) is a package manager and code repository for JavaScript. Publishing your module on NPM allows other developers to quickly find and install your plugin as well as any other plugins it depends on.