VladPolskiy/leaflet
1
0
Fork 0
mirror of https://github.com/Leaflet/Leaflet.git synced 2025-07-21 23:26:12 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

docs: add accessibility section to plugins guide (#7277)

Browse Source 
* docs: add accessibility section

* docs: update links to accessibility resources

* docs: update accessible content description

* docs: accessibility section formatting fix

* docs: add link to "Using ARIA"

* General update to the accessibility section
This commit is contained in:
Robert Linder
2022-02-08 13:22:19 +01:00
committed by GitHub
parent 178925b3c2
commit 0b8ce652ba
1 changed files with 36 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
PLUGIN-GUIDE.md
View File

@ -15,9 +15,11 @@ This guide lists a number of best practices for publishing a Leaflet plugin that
- [File Structure](#file-structure)
- [Code Conventions](#code-conventions)
- [Plugin API](#plugin-api)
3. [Publishing on NPM](#publishing-on-npm)
4. [Module Loaders](#module-loaders)
5. [Adding to the plugins list](#adding-to-the-plugins-list)
3. [Content Accessibility](#content-accessibility)
- [Accessibility Testing](#accessibility-testing)
4. [Publishing on NPM](#publishing-on-npm)
5. [Module Loaders](#module-loaders)
6. [Adding to the plugins list](#adding-to-the-plugins-list)
## Presentation
@ -130,6 +132,37 @@ marker.myPlugin('bla', {
And most importantly, keep it simple. Leaflet is all about *simplicity*.
## Content Accessibility
Make sure your content is accessible to users from all walks of life.
Some users can only navigate web content using a keyboard,
or must rely on their screen reader to be able to convey the visual information.
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
Tools for automated testing can help you discover common accessibility issues:
- [Lighthouse](https://developers.google.com/web/tools/lighthouse/)
- [axe](https://www.deque.com/axe/)
- [WAVE](https://wave.webaim.org/)
- [Accessibility Insights](https://accessibilityinsights.io/)
- [webhint](https://webhint.io/)
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.
## 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.