Movatterモバイル変換


[0]ホーム

URL:


Extension Workshop

Submit or Manage Extensions
UI featureGuidelines

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, 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:

  • the extension status.
  • the content of text badges displayed over the button.

Add a shortcut to the button’s action, using the special shortcutoption _execute_browser_action.

Toolbar button with a popup

The markup in the popup should followstandard 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 shortcutoption _execute_page_action.

Address bar button with a popup

The markup in the popup should followstandard 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 followstandard web accessibility guidelines.

Add a keyboard shortcut to open a sidebar, using the special shortcutoption _execute_sidebar_action.

Options page

The markup in the options page should followstandard web accessibility guidelines.

Extension page

The markup in the extension page should followstandard 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 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:  

Up Next

Develop

Onboard, upboard, offboard users

Develop

User experience best practices

Develop

Differences between desktop and Android extensions
Documentation Topics

Connect With Us

Twitter

For developers:
@mozamo

For end users:
@rockyourfirefox

More

Matrix

Community forum

Extensions Developer Newsletter

Stay up-to-date on news and events for Firefox extension developers.

Thanks! Please check your inbox to confirm your subscription.

If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.


[8]
ページ先頭

©2009-2025 Movatter.jp