Accessibility guidelines
When it comes to accessibility, extensions should follow the same guidelines as websites. However, extensions have unique features that deserve consideration when designing for accessibility. Here is a breakdown of extension features and how they should be used to make an extension accessible.
There is more information on design and accessibility in thePhoton Design System andAccessibility and Mozilla section on MDN.
| UI feature | Guidelines |
|---|---|
Keyboard shortcuts provide an easy way to activate extension features. To improve accessibility, add keyboard shortcuts for:
Users can modify an extension’s keyboard shortcuts to suit their needs. However, users cannot add shortcuts, which is why it’s best to add as many as practical. | |
To account for the active theme, providetoolbar buttons icons for themes with light and dark text. Follow the Photon Design System guidelines onIconography. Use different images to convey state, such as toggled or active. Don’t use colored icons or color changes to indicate state changes as these may not be visible to all users. Always include a text title, so the button details can be read out by a screen reader. The button’s title should be updated to reflect:
Add a shortcut to the button’s action, using the special shortcut | |
The markup in the popup should followstandard web accessibility guidelines. | |
The same guidelines as toolbar buttons should be followed. Add a shortcut to the button’s action, using the special shortcut | |
The markup in the popup should followstandard web accessibility guidelines. | |
Context menu items provide an accessible way for users to discover extension features associated with elements in a webpage. Therefore, where possible, add extension features to their relevant context menus. | |
The markup in the sidebar should followstandard web accessibility guidelines. Add a keyboard shortcut to open a sidebar, using the special shortcut | |
The markup in the options page should followstandard web accessibility guidelines. | |
The markup in the extension page should followstandard web accessibility guidelines. | |
Provide notifications for events that happen in the background or are not otherwise notified in the UI. Be sparing with notifications but take care not to minimize them at the expense of accessibility. | |
Add suggestions as per the guide, there are no additional accessibility considerations for extensions. | |
The markup in the sidebar should followstandard web accessibility guidelines. Offering a keyboard shortcut to open a devtools panel is recommended. |
Tags: development extensions ui user-interface ux webextensions
Contributors: rebloor
Last update: rebloor
Up Next
Develop
Onboard, upboard, offboard users
Develop
User experience best practices
Develop