Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add accessibility section to plugins guide #7277

Merged
merged 6 commits into from
Feb 8, 2022
Merged

docs: add accessibility section to plugins guide #7277

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
50919bc
docs: add accessibility section
Malvoz Sep 15, 2020
1e67aed
docs: update links to accessibility resources
Malvoz Sep 16, 2020
026575b
docs: update accessible content description
Malvoz Sep 16, 2020
17887d0
docs: accessibility section formatting fix
Malvoz Sep 19, 2020
05acaf7
docs: add link to "Using ARIA"
Malvoz Jan 14, 2021
6470dda
General update to the accessibility section
Malvoz Nov 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 36 additions & 3 deletions PLUGIN-GUIDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.
Expand Down