diff --git a/docs/5.x/images/skip-links.png b/docs/5.x/images/skip-links.png new file mode 100644 index 000000000..b587ca982 Binary files /dev/null and b/docs/5.x/images/skip-links.png differ diff --git a/docs/5.x/system/control-panel.md b/docs/5.x/system/control-panel.md index 4ed470fef..ad2964291 100644 --- a/docs/5.x/system/control-panel.md +++ b/docs/5.x/system/control-panel.md @@ -257,3 +257,39 @@ In some situations, dragging can be combined with [group selections](#group-sele ### Search Craft has a powerful [search](searching.md) system that complements the [condition builder](elements.md#filters-and-columns) on every element index. + +## Accessibility + +### Navigation + +Skip links and landmarks have been incorporated throughout the control panel to make keyboard and screen reader navigation more straightforward. + +#### Skip Links +Global skip links are found at the beginning of each control panel screen. + +![A link to 'Skip to main section' has visible focus at the beginning of the Dashboard page](../images/skip-links.png) + +These include: +- **Skip to main section:** Skips to the `main` container. This container includes the page header, which contains the page title and controls for the current screen. +- **Skip to left sidebar:** Skips to the sub-navigation container (when using an LTR orientation). For example: + - On element index pages, this moves keyboard focus to the "Sources" menu. + - On account pages, this moves keyboard focus to the "Account" navigation. +- **Skip to content:** Skips to the primary content pane on the page. +- **Skip to right sidebar:** Skips to the details container (when using an LTR orientation), which includes page metadata. + +In addition to global skip links, other parts of the control panel may include skip links. For example: +- On element index pages, a **Skip to footer** link allows you to skip to the pagination and actions in the footer bar + +#### Landmarks + +### Alternative Text + +Image and video assets can have alternative text populate in the control panel when they use the Alternative Text native field. + +### User Preferences + +#### Session Limits + +#### Underlines + +#### Status Icons