build-an-accessible-extension.md

layout	title	permalink	published	topic	tags	contributors	last_updated_by	date
sidebar	Build an accessible extension	/documentation/develop/build-an-accessible-extension/	true	Develop	Development Extensions UI User Interface UX Web Extensions	rebloor	rebloor	2019-05-01 02:08:50 -0700

{% capture page_hero_banner_content %}

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 the Photon Design System and Accessibility and Mozilla section on MDN.

{% endcapture %} {% include modules/page-hero.html content=page_hero_banner_content cta1_label="" cta1_url="" cta2_label="" cta2_url="" %}

UI feature	Guidelines
Keyboard shortcuts (commands)	Keyboard shortcuts provide an easy way to activate extension features. To improve accessibility, add keyboard shortcuts for: extension UI elements, such as toolbar and address bar buttons. all of an extension’s features, however, where this is impractical provide shortcuts for commonly used extension features. 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.
Toolbar button (browser action)	To account for the active theme, provide toolbar buttons icons for themes with light and dark text. Follow the Photon Design System guidelines on Iconography. 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: the extension status. the content of text badges displayed over the button. Add a shortcut to the button’s action, using the special shortcut option _execute_browser_action.
Toolbar button with a popup	The markup in the popup should follow standard web accessibility guidelines.
Address bar button (page action)	The same guidelines as toolbar buttons should be followed. Add a shortcut to the button’s action, using the special shortcut option _execute_page_action.
Address bar button with a popup	The markup in the popup should follow standard web accessibility guidelines.
Context menu item	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.
Sidebar	The markup in the sidebar should follow standard web accessibility guidelines. Add a keyboard shortcut to open a sidebar, using the special shortcut option _execute_sidebar_action.
Options page	The markup in the options page should follow standard web accessibility guidelines.
Extension page	The markup in the extension page should follow standard web accessibility guidelines.
Notification	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.
Address bar suggestion	Add suggestions as per the guide, there are no additional accessibility considerations for extensions.
Developer tools panel	The markup in the sidebar should follow standard web accessibility guidelines. Offering a keyboard shortcut to open a devtools panel is recommended.

{%- include page-meta-data.html -%}

{%- include up-next.html -%}