diff --git a/docs/.vuepress/components/Journey.vue b/docs/.vuepress/components/Journey.vue
index c4d0c9b48..930bf0fcc 100644
--- a/docs/.vuepress/components/Journey.vue
+++ b/docs/.vuepress/components/Journey.vue
@@ -2,7 +2,7 @@
     <ol class="journey theme-default-content-override">
         <li v-for="(segment, i) in segments" :key="i" class="step">
             {{ ' ' }}
-            <span class="step-label">{{ segment }}</span><span v-if="i < (segments.length - 1)" class="step-arrow" aria-hidden="true">&rarr;</span>
+            <span :class="{ 'step-label': true, 'step-label--is-user-defined': segment.isDynamic }">{{ segment.label }}</span><span v-if="i < (segments.length - 1)" class="step-arrow" aria-hidden="true">&rarr;</span>
         </li>
     </ol>
 </template>
@@ -14,7 +14,23 @@ export default {
   },
   computed: {
     segments() {
-        return this.path.split(',').map((s) => s.trim());
+      let arr = this.path.split(',')
+        .map((s) => s.trim())
+        .map(function(s) {
+          if (s.indexOf('*') === 0) {
+            return {
+                label: s.substring(1),
+                isDynamic: true,
+            };
+          }
+
+          return {
+            label: s,
+            isDynamic: false,
+          };
+        });
+
+      return arr;
     }
   }
 };
@@ -39,6 +55,10 @@ export default {
     font-weight: bold;
     padding: 2px 7px 1px;
     white-space: nowrap;
+
+    &--is-user-defined {
+        border-style: dashed;
+    }
 }
 
 .step-arrow {
diff --git a/docs/.vuepress/sets/craft-cms.js b/docs/.vuepress/sets/craft-cms.js
index c1d48d2a2..4dc352189 100644
--- a/docs/.vuepress/sets/craft-cms.js
+++ b/docs/.vuepress/sets/craft-cms.js
@@ -243,6 +243,7 @@ module.exports = {
             "development/eager-loading",
             "development/image-transforms",
             "development/forms",
+            "development/accessibility",
             "development/graphql",
             "development/collections",
           ]
diff --git a/docs/.vuepress/theme/global-components/Badge.vue b/docs/.vuepress/theme/global-components/Badge.vue
index d246675aa..48300aaa2 100644
--- a/docs/.vuepress/theme/global-components/Badge.vue
+++ b/docs/.vuepress/theme/global-components/Badge.vue
@@ -55,6 +55,15 @@ export default {
     background-color: #e7c000;
   }
 
+  &.default {
+    @apply bg-transparent leading-none h-auto;
+
+    border-width: 1px;
+    border-color: var(--border-color);
+    color: var(--sidebar-link-color);
+    padding: 4px calc(4px - 0.1em) 4px 5px;
+  }
+
   /* Custom Badge Types */
 
   &.verb {
diff --git a/docs/.vuepress/theme/global-components/InfoHud.vue b/docs/.vuepress/theme/global-components/InfoHud.vue
index 1050ba02b..29906f2ca 100644
--- a/docs/.vuepress/theme/global-components/InfoHud.vue
+++ b/docs/.vuepress/theme/global-components/InfoHud.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="info-hud">
     <v-popover placement="right" :click="handleClick">
-      <button>
+      <button :title="activateLabel">
         <svg class="info-circle" viewBox="0 0 512 512">
           <path
             d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
@@ -30,6 +30,12 @@ export default {
       e.preventDefault();
     },
   },
+  props: {
+    activateLabel: {
+      type: String,
+      default: 'Open',
+    },
+  },
 };
 </script>
 
diff --git a/docs/.vuepress/theme/global-components/Term.vue b/docs/.vuepress/theme/global-components/Term.vue
index 389913e2f..764d310ac 100644
--- a/docs/.vuepress/theme/global-components/Term.vue
+++ b/docs/.vuepress/theme/global-components/Term.vue
@@ -9,23 +9,25 @@
             :title="`${label} in the Glossary`"
             v-text="label"></a>
 
-        <InfoHud>
+        <InfoHud :activateLabel="triggerLabel">
             <template v-if="loaded">
                 <h3 class="glossary-term-heading" v-text="this.term.title"></h3>
                 <div class="glossary-term-content theme-default-content" v-html="this.term.summaryHtml"></div>
 
-                <a :href="this.term.url" target="_blank" class="glossary-term-more">
-                    <span class="glossary-term-more-label">View in the glossary</span>
-                    <span class="glossary-term-more-arrow">&rarr;</span>
-                </a>
-
-                <div v-if="this.term.docsLinks.length" class="glossary-term-docs-links">
-                    <h4 class="glossary-term-heading">In the documentation…</h4>
-                    <ul class="glossary-term-docs-links-list">
-                        <li v-for="(link, i) in this.term.docsLinks" v-bind:key="i" class="glossary-term-docs-link">
-                            <a :href="link.url">{{ link.title }}</a>
-                        </li>
-                    </ul>
+                <div class="glossary-term-nav">
+                    <a :href="this.term.url" target="_blank" class="glossary-term-more">
+                        <span class="glossary-term-more-label">View in the glossary</span>
+                        <span class="glossary-term-more-arrow">&rarr;</span>
+                    </a>
+    
+                    <div v-if="this.term.docsLinks.length" class="glossary-term-docs-links">
+                        <h4 class="glossary-term-heading">In the documentation…</h4>
+                        <ul class="glossary-term-docs-links-list">
+                            <li v-for="(link, i) in this.term.docsLinks" v-bind:key="i" class="glossary-term-docs-link">
+                                <a :href="link.url">{{ link.title }}</a>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </template>
             <template v-else>
@@ -55,6 +57,10 @@
     padding: 0;
 }
 
+.glossary-term-nav {
+    @apply mt-2;
+}
+
 .glossary-term-more {}
 
 .glossary-term-more-label {
@@ -115,7 +121,10 @@ export default {
         },
         apiUrl() {
             return `${CRAFTCOM_BASE_URL}/api/glossary/${this.slug}`;
-        }
+        },
+        triggerLabel() {
+            return `Open definition for “${this.label}”`;
+        },
     },
     mounted() {},
     data() {
diff --git a/docs/5.x/development/accessibility.md b/docs/5.x/development/accessibility.md
new file mode 100644
index 000000000..3c4c47140
--- /dev/null
+++ b/docs/5.x/development/accessibility.md
@@ -0,0 +1,335 @@
+---
+description: Craft includes all the tools you need to create accessible experiences for authors and front-end users.
+---
+
+# Accessibility
+
+Websites and applications are used by people (and machines!) with a wide variety of capabilities.
+Craft gives you a powerful suite of tools to help make your projects <Term slug="accessibility" label="accessible" /> to everyone.
+
+<!-- more -->
+
+Let’s begin by looking at some key authoring features.
+
+## Control panel
+
+Craft’s [control panel](../system/control-panel.md#accessibility) is [designed and built to be accessible](https://craftcms.com/accessibility), out-of-the-box.
+In addition to built-in interfaces, the content tools you configure for authors are backed by components that we [regularly audit](https://craftcms.com/accessibility/reports) for conformance.
+
+### Image editor
+
+The built-in image editor features a number of keyboard-accessible adjustments. <Since ver="5.9.0" feature="A keyboard-accessible image editor" />
+
+From the right sidebar on an [asset](../reference/element-types/assets.md)’s edit screen, find the **Edit image** button.
+A modal will open, with tabs for [**Rotate**](#rotation) and [**Crop**](#cropping).
+
+::: tip
+If you can’t find the **Edit image** button, the asset may not be transformable on the current system.
+This may be due to the file type (i.e. `PDF`), or your [image driver](../requirements.md).
+:::
+
+#### Rotation
+
+Images can be rotated 90&deg; clockwise (**Rotate Right**) or counter-clockwise (**Rotate Left**), flipped vertically and horizontally, or “straightened” in increments of 1&deg; using the **Rotate** slider.
+
+Use the **Focal Point** button to add a position control to the image.
+You can nudge the focal point horizontally or vertically; the value is stored as a proportional coordinate pair, with decimal values between `0` and `1`.
+The focal point is used to keep subjects within a transformed image—for example, vertical head-shots attached to staff profiles 
+
+::: tip
+Some asset filesystem types ([AWS S3](plugin:aws-s3), in particular) can automatically detect subjects and populate the **Focal Point** attributes.
+Combined with [transforms](image-transforms.md), this can help keep subjects in-frame, when assets are used in multiple contexts.
+:::
+
+## Media
+
+When marked up appropriately, text the web is inherently accessible.
+The same cannot be said for visual media like images, video, and icons; without explicit descriptions or context clues, unsighted users may miss essential content.
+
+### Alternative text
+
+Every asset in Craft has (at minimum) a **Title**, which is generated from its filename on upload.
+You can supplement this with the [native **Alternative Text** field](../reference/element-types/assets.md#alt-text) by visiting <Journey path="Settings, Assets, Volumes, *Volume Name" /> and dragging it into the field layout.
+
+Craft uses this field’s value when rendering asset thumbnails in the control panel, and when outputting an image in a Twig template:
+
+::: code
+```twig Twig
+{{ myAsset.getImg() }}
+```
+```html Result
+<img
+  src="https://mydomain.com/uploads/images/screenshot.png"
+  width="1280"
+  height="800"
+  alt="Screenshot of Craft’s asset volume settings page, showing the ">
+```
+:::
+
+For more control, you can construct `img` tags yourself.
+The `alt` attribute can come from anywhere, or be defined via a series of fallbacks:
+
+```twig
+{% set thumb = result.articleThumbnail.one() %}
+{{ tag('img', {
+  class: 'article-thumbnail',
+  src: thumb.getUrl(),
+  alt: result.thumbnailDescription ?: thumb.alt,
+}) }}
+```
+
+This example checks a local `thumbnailDescription` [custom field](../system/fields.md) on a `result` entry, and defaults to the `alt` text attached directly to the asset.
+
+<Block label="Decorative Images">
+
+Keep in mind that not _every_ use of an image needs alternative text!
+This might be a perfectly acceptable way to handle icons attached to [categories](../reference/element-types/categories.md) or [tags](../reference/element-types/tags.md):
+
+```twig
+{# Decorative or “presentational” icon: #}
+{{ tag('img', {
+  class: 'icon icon--decorative',
+  src: myAsset.getUrl(),
+  height: myAsset.getHeight(),
+  width: myAsset.getWidth(),
+  alt: '',
+}) }}
+```
+
+The [W3C `alt` Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) is a great resource for deciding what an appropriate alternative text should be.
+
+</Block>
+
+An asset’s `title` is often _not_ the correct source for descriptions—especially when a file is [uploaded directly to an assets field](../reference/field-types/assets.md):
+
+::: code
+``` File
+# Screenshot:
+screenshot_2025-12-31_11-59-59.png
+
+# Photo from digital camera:
+IMG_4567.jpg
+```
+``` Title
+# Screenshot:
+Screenshot 2025 12 31 11 59 59
+
+# Photo from digital camera:
+IMG 4567
+```
+:::
+
+For this reason, Craft _does not_ attempt to repair a missing `alt` attribute by falling back to the title in the absence of explicit alternative text. Generic or irrelevant alt text is also a barrier for screen reader users, and one that can be difficult to identify without a manual accessibility audit. Instead, we leave the `alt` attribute off entirely so the image can be flagged by automated accessibility tests.
+Below, we cover [a few patterns](#alt-text-overrides) that make alternative text easier to maintain.
+
+#### Rich Text
+
+Inserting an image into a rich text editor may not automatically populate `alt` attributes.
+
+- **[Redactor](plugin:redactor)** — The editor has mislabled this as the image’s **Title**. Select an inserted image and pick **Edit** to open a modal.
+- **[CKEditor](plugin:ckeditor)** — Select an inserted image and pick the **Change image text alternative** button to add a description.
+
+Both plugins also support captions, which convert the image into `<figure>` and `<figcaption>` elements.
+
+### Video and captioning
+
+Craft also uses the native `alt` attribute for transcripts on video and audio.
+Transcripts are shown when previewing media in the control panel.
+
+There is currently no built-in support for time-based transcripts or closed captioning (in the control panel or front-end), but you are free to implement them via custom fields:
+
+```twig
+<video id="player" src="{{ asset.getUrl() }}">
+
+{# Assume `chapters` is a table field: #}
+<ul>
+  {% for chapter in asset.chapters %}
+    {% set ts = chapter.timestamp | integer %}
+    <li>
+      <button data-timestamp="{{ ts }}" title="Seek to {{ ts }} seconds">
+        {{ '%d:%02d' | format(ts // 60, ts % 60) }}
+      </button>
+      {{ chapter.description }}
+    </li>
+  {% endfor %}
+</ul>
+
+<script>
+  const $video = document.getElementById('player');
+  const $chapters = document.querySelectorAll('[data-timestamp]');
+
+  $chapters.forEach(function($chapter) {
+    $chapter.addEventListener('click', function(e) {
+      $video.currentTime = parseFloat($chapter.dataset.timestamp);
+    });
+  });
+</script>
+```
+
+Highlighting or announcing the currently-active chapter or timestamp requires additional scripting.
+
+### Reference tags
+
+The [reference tag](../system/reference-tags.md) parser will call magic “getter” methods, so you can get a complete `<img>` element using a syntax like this:
+
+```
+{asset:1234:img}
+```
+
+### Markdown
+
+Craft’s Markdown parser supports [image tags](https://daringfireball.net/projects/markdown/syntax#img):
+
+```md
+![My alt text](/path/to/image.jpg)
+```
+
+You may include a hard-coded URL, or use a [reference tag](#reference-tags) to ensure it remains up-to-date.
+
+## Recipes
+
+### `alt` text overrides
+
+An image may need different descriptions based on its usage.
+For example, if you were working with an artist collective, you may have a library of members’ work, with practical or evergreen descriptions… but when an author recycles one of those images for a news post, that description may be confusing.
+
+You have two options for applying local description overrides:
+
+1. **Add a plain text field to the same field layout as your assets field.**  
+    When an author populates this field, use that text instead of the asset’s `alt` attribute:
+
+    ```twig
+    {% set image = entry.myFeatureImage.one() %}
+    {% set description = entry.myFeatureImageDescription ?: image.alt %}
+
+    {{ tag('img', {
+      src: image.getUrl(),
+      alt: description,
+    }) }}
+    ```
+
+1. **Componentize descriptions with a content block.**
+    If you wish to implement the same logic on a number of pages, it may make sense to encapsulate it in a [content block field](../reference/field-types/content-block.md):
+
+    ![Screenshot of an entry edit screen, showing a content block field with nested image and description fields.](../images/accessibility-recipe-image-preview-block.png)
+
+    The content block field can then be accessed as `entry.imageWithDescription`, and the “override” logic is standardized wherever you include it (rather than via novel field handles in each situation):
+
+    ::: code
+    ```twig entry.twig
+    {# Include this anywhere that uses the `imageWithDescription` content block field: #}
+    {{ include('_partials/a11y-image', {
+      ctx: entry.imageWithDescription,
+    }) }}
+    ```
+    ```twig a11y-image.twig
+    {% set image = ctx.image.one() %}
+    {% set description = ctx.description ?: image.alt }}
+
+    {{ tag('img', {
+      src: image.getUrl(),
+      alt: description,
+    }) }}
+    ```
+    :::
+
+    In this example, `ally-image.twig` doesn’t know (or care) where it was included from—everything it needs to resolve a proper description is available in the passed `ctx` variable, via consistent field handles.
+
+    ::: warning
+    Content block fields are single-instance, meaning they can only appear in a field layout _once_.
+    However, they _can_ be given new handles, be used in any number of field layouts, and be repeated inside nested entries Matrix field.
+    :::
+
+### Accessible previews
+
+You can show authors a final representation of an image (with the resolved alt text) using a **Template** UI [field layout element](../system/fields.md#ui-elements):
+
+![Screenshot of an entry edit screen, showing a special UI field layout element that renders a preview of an attached image and its resolved accessible description.](../images/accessibility-recipe-image-preview.png)
+
+The template might look something like this:
+
+```twig
+{% set image = element.featureImage.one() %}
+{% if image %}
+    {% set hasGlobalDescription = image.alt is not empty %}
+    {% set hasCustomDescription = element.featureImageDescription is not empty %}
+    {% set description = element.featureImageDescription ?: image.alt %}
+
+    <div class="pane">
+        <h2>Feature Image Preview</h2>
+        <img src="{{ image.getUrl() }}" alt="{{ description }}">
+
+        {% if hasCustomDescription %}
+            {# Use `del` and `ins` when both are present: #}
+            {% if hasGlobalDescription %}
+                <del>{{ image.alt }}</del>
+                <ins>{{ element.featureImageDescription }}</ins>
+            {% else %}
+                <p>{{ element.featureImageDescription }}</p>
+            {% endif %}
+        {% else if hasGlobalDescription %}
+            {# Just surface the original text: #}
+            <p>{{ image.alt }}</p>
+        {% else %}
+          {# Uh oh! #}
+          <p class="error">No accessible description is available for this image. Please add one to this article (using the **Feature Image Description** field, above), or set a default one on the image itself.</p>
+        {% endif %}
+    </div>
+{% endif %}
+```
+
+This is essentially a more verbose implementation of the fallback logic discussed in the [alternative text section](#alternative-text).
+
+::: tip
+You can do the same thing within the content block-based override!
+:::
+
+### Jump links and labels
+
+Many accessibility attributes (like `aria-describedby` and `aria-controls`) require absolute, unique identifiers.
+Suppose you allow authors to create tabbed “tour” interfaces, within a page builder—
+tab names may collide if they are based on content (`tab.label | handle`) or a sequence (`tab-#{loop.index0}`).
+
+For content with `id`s or `uid`s, you may have enough to reliably connect pieces of an interface.
+Everything else (like rows in a [table field](../reference/field-types/table.md)) will require generating temporary identifiers:
+
+```twig
+{% set tabMap = collect([]) %}
+
+{# Loop over once to output tabs: #}
+{% for tab in tabs %}
+  {# Create a temporary ID and add it to the map: #}
+  {% set id = "pane-#{random()}" %}
+  {% do tabMap.set(id, tab) %}
+
+  <button
+    id="{{ id }}-tab"
+    role="tab"
+    aria-controls="{{ id }}">
+    {{ tab.label }}
+  </button>
+{% endfor %}
+
+{# ... #}
+
+{# Loop over the decorated `tabMap` to output the controlled elements: #}
+{% for id, tab in tabMap %}
+  <div id="{{ id }}" role="tabpanel" aria-labelledby="{{ id }}-tab">
+    {# ... #}
+  </div>
+{% endfor %}
+```
+
+This will create identifiers that look something like `pane-63570161`.
+Note that we’re creating a two-way binding between the `tab` and `tabpanel`:
+
+- The `tab` has an `aria-controls` attribute containing the raw identifier, and an `id` attribute with the identifier and a suffix.
+- The `tabpanel` has an `id` attribute containing the raw identifier and an `aria-labelledby` attribute, with the identifier and a `-tab` suffix.
+
+## Testing and auditing
+
+The best time to start auditing your front-end for accessibility is during development.
+
+As you build out your templates, tools like Deque’s [Axe DevTools for Web](https://www.deque.com/axe/devtools/web-accessibility) can flag concrete violations and help you prioritize remediation.
+
+To monitor the accessibility of content and quickly identify issues that crop up after launch, consider using a tool like [Accessible Web](https://accessibleweb.com/)’s [automated scanning tool](https://accessibleweb.com/ramp-web-accessibility-tools/accessibility-monitoring/).
diff --git a/docs/5.x/images/accessibility-jump-link-example.png b/docs/5.x/images/accessibility-jump-link-example.png
new file mode 100644
index 000000000..511d6f291
Binary files /dev/null and b/docs/5.x/images/accessibility-jump-link-example.png differ
diff --git a/docs/5.x/images/accessibility-recipe-image-preview-block.png b/docs/5.x/images/accessibility-recipe-image-preview-block.png
new file mode 100644
index 000000000..f8072dfa4
Binary files /dev/null and b/docs/5.x/images/accessibility-recipe-image-preview-block.png differ
diff --git a/docs/5.x/images/accessibility-recipe-image-preview.png b/docs/5.x/images/accessibility-recipe-image-preview.png
new file mode 100644
index 000000000..da7606314
Binary files /dev/null and b/docs/5.x/images/accessibility-recipe-image-preview.png differ
diff --git a/docs/5.x/images/accessibility-status-shapes.png b/docs/5.x/images/accessibility-status-shapes.png
new file mode 100644
index 000000000..28030151e
Binary files /dev/null and b/docs/5.x/images/accessibility-status-shapes.png differ
diff --git a/docs/5.x/images/accessibility-validation-errors.png b/docs/5.x/images/accessibility-validation-errors.png
new file mode 100644
index 000000000..3fc1ee1fe
Binary files /dev/null and b/docs/5.x/images/accessibility-validation-errors.png differ
diff --git a/docs/5.x/reference/element-types/addresses.md b/docs/5.x/reference/element-types/addresses.md
index b605467b0..fc7b59783 100644
--- a/docs/5.x/reference/element-types/addresses.md
+++ b/docs/5.x/reference/element-types/addresses.md
@@ -403,12 +403,9 @@ return [
 
 ::: tip
 The next few snippets may be a bit dense—numbered comments are peppered throughout, corresponding to items in the **Guide** section just below it.
+They also assume you have a layout template functionally equivalent to the [models and validation](../../development/forms.md#models-and-validation) example.
 :::
 
-#### Scaffolding
-
-The following templates assume you have a layout functionally equivalent to the [models and validation](../../development/forms.md#models-and-validation) example.
-
 ### Listing Addresses
 
 Let’s display the current user’s address book on their account “dashboard.”
diff --git a/docs/5.x/reference/element-types/assets.md b/docs/5.x/reference/element-types/assets.md
index 3b48bfe53..e255013a9 100644
--- a/docs/5.x/reference/element-types/assets.md
+++ b/docs/5.x/reference/element-types/assets.md
@@ -96,18 +96,22 @@ Asset field layouts can include the native **Alternative Text** <Poi label="1" t
 <img src="../../images/assets-field-layout.png" alt="The field layout designer for an asset element. The content pane includes a Title field and an Alternative Text field."/>
 </BrowserShot>
 
-A native `alt` attribute is provided to standardize the inclusion of assistive text on `img` elements that Craft generates—especially in the control panel. Alt text is also added when outputting an image with `asset.getImg()` in Twig. You can always render `img` elements yourself, using any [custom field](../../system/fields.md) values, attributes, or combination thereof. 
+A native `alt` attribute is provided to standardize the inclusion of assistive text on `img` elements that Craft generates—especially in the control panel. Alt text is also added when outputting an image with `asset.getImg()` in Twig. You can always render `img` elements yourself, using any [custom field](../../system/fields.md) values, attributes, or combination thereof.
 
 We strongly recommend adding the native attribute to your volumes’ field layouts; alt text is a critical interface for many users, and essential for anyone using assistive technology in the control panel. Well-considered image descriptions (and titles!) have the added benefit of making search and discovery of previously-uploaded images much easier. The WCAG [advises against](https://www.w3.org/TR/2015/REC-ATAG20-20150924/Overview.html#gl_b23) automatically repairing alt text with “generic or irrelevant strings,” including the name of the file (which asset titles are generated from), so Craft omits the `alt` attribute when using `asset.getImg()` if no explicit text is available.
 
 **Alternative Text** is also displayed as a “transcript” beneath video previews, in the control panel.
 
+<See path="../../development/accessibility.md" label="Authoring alternative text" description="Learn more about setting up a smart alternative text authoring experience." />
+
 ::: tip
 Do you have existing `alt` text stored in a different field? You can migrate it to the native attribute with the [`resave/assets` command](../cli.md#resave):
 
 ```bash
 php craft resave/assets --set alt --to myAltTextField --if-empty
 ```
+
+After running this command in your live environment, replace any usages in your templates, remove the field from your volumes’ field layouts, and deploy the changes.
 :::
 
 ### Generated Fields <Since ver="5.8.0" feature="Generated fields on asset volumes" />
diff --git a/docs/5.x/reference/field-types/multi-select.md b/docs/5.x/reference/field-types/multi-select.md
index f0170b37d..bb6b9b583 100644
--- a/docs/5.x/reference/field-types/multi-select.md
+++ b/docs/5.x/reference/field-types/multi-select.md
@@ -36,7 +36,8 @@ Multi-select fields have the following settings:
 
 ## Development
 
-The order in which options are selected is _not_ preserved, and . If you wish to order the selections, consider using one of the [relational](README.md#references) fields.
+The order in which options are selected is _not_ preserved.
+If the order of selections is important, consider using one of the [relational](README.md#references) fields.
 
 ### Working with Multi-select Field Data
 
@@ -167,7 +168,7 @@ If you have a front-end element form (such as an [entry form](kb:entry-form)) th
       value: option.value,
       text: option.label,
       selected: selected,
-    })}}
+    }) }}
   {% endfor %}
 </select>
 ```
diff --git a/docs/5.x/system/control-panel.md b/docs/5.x/system/control-panel.md
index 4ed470fef..960210f5b 100644
--- a/docs/5.x/system/control-panel.md
+++ b/docs/5.x/system/control-panel.md
@@ -43,19 +43,36 @@ Craft also has multiple [editions](../editions.md), some of which give you acces
 <img src="../images/control-panel-tour-screen.png" alt="A representative screen from the Craft control panel">
 </BrowserShot>
 
-Let’s take a quick spin around a typical control panel _screen_:
-- On the left edge is the _main navigation_ <Poi label="1" target="tour" id="navigation" />. At the top of this bar, your system name and icon are displayed. Below, each [main section](#main-sections) of the control panel you have access to is linked, and the current one is highlighted. Click the **Toggle sidebar** button to collapse it and make more room for the page content.
-- At the top, the _global header_ <Poi label="2" target="tour" id="globalHeader" /> contains breadcrumbs (when working with nested content or settings), actions for the current screen, and the user menu.
-- The current screen’s _main container_ takes up the remainder of the horizontal space, and will scroll if the content is tall enough. Within this region, you’ll find some combination of the following features:
-    - A _header_ <Poi label="3" target="tour" id="header" />, displaying a title and controls for the current screen;
-    - A _sub-menu_ at the left edge (not pictured), listing siblings of the current screen;
-    - A _content container_ <Poi label="4" target="tour" id="content" /> for the screen’s primary content (usually set off from the background on a lighter color);
-    - _Tabs_, splitting the screen’s content or settings into logical groups (not pictured);
-    - A _details_ <Poi label="5" target="tour" id="details" /> pane at the right edge, with metadata and controls specific to the type of content being viewed;
+Let’s take a quick spin around a typical control panel screen.
+
+Global sidebar <Poi label="1" target="tour" id="navigation" />
+:   Contains the system name and icon, followed by the _primary navigation_.
+    Each of the control panel’s [main sections](#main-sections) is linked, when configured (and your user has the related [permission](user-management.md#permissions)).
+    Pick the **Toggle sidebar** button to collapse it and make more room for the page content.
+
+    Some items in the primary navigation contain nested links.
+    Those lists are automatically expanded based on the current screen’s URI, or when you pick the **Open subnavigation** toggle.
+
+Global header <Poi label="2" target="tour" id="globalHeader" />
+:   Contains _breadcrumbs_ (when working with nested content or settings), actions for the current screen, and the user menu.
+
+Main container
+:   The page’s main region typically contains editable content or settings, as well as secondary navigation and a sidebar.
+    - A _header_ <Poi label="3" target="tour" id="header" /> displays the page’s title and actions for the current screen.
+        - On element edit screens, a _recent activity_ region holds information about any other users that may be viewing or editing that element.
+    - _Secondary navigation_ contains links to adjacent pages (like other [utilities](#utilities), element [sources](elements.md#sources), or related settings). Like the global menu menu’s content tends to be stable between the linked pages, but it may not be present when viewing more deeply-nested resources.
+    - The _content_ <Poi label="4" target="tour" id="content" /> area’s structure and substance can vary dramatically between areas of the control panel.
+        - _Tabs_ may split the screen’s content or settings into logical groups (not pictured). The selected tab is appended to the current URL as a hash.
+        - When present, the nested _sidebar_ <Poi label="5" target="tour" id="details" /> is a mix of editable and read-only metadata.
 
 You will see these same page components crop up in other screens—and even in [slideouts](#slideouts)!
 
-#### Main Sections
+::: tip
+The control panel includes [skip links](#skip-links) to a number of landmarks present in the current screen.
+Use the **Disable autofocus** [accessibility preference](#user-preferences) to prevent search inputs or other UI from being focused when navigating.
+:::
+
+### Main Sections
 
 You may not see (or need) all these sections in your _main navigation_. They’ll appear only when Craft determines that they’ll be useful to the logged-in user—for example, _Categories_ is hidden until you’ve configured at least one [Category Group](../reference/element-types/categories.md#category-groups).
 
@@ -73,7 +90,7 @@ Section | Description
 [Plugin Store](#plugin-store) | Browse, install, and purchase Craft and plugin licenses from the official Plugin Store.
 …and more! | Some plugins provide their own control panel screens; others may only have a pane in the [Settings](#settings) section.
 
-#### Announcements
+### Announcements
 
 Keep an eye on the _global header_ for a <Icon kind="gift" /> gift icon—Craft and any installed plugins may send notifications about new features to all control panel users, when updates are applied.
 
@@ -124,7 +141,8 @@ Keep in mind that any user marked as an “Admin” implicitly has access to _al
 
 #### Disabling Utilities
 
-You can disable a utility for all users with the [`disabledUtilities` config setting](config5:disabledUtilities). Refer to each [utility class](repo:craftcms/cms/tree/5.x/src/utilities)’s `id()` method for their handles—including those provided by plugins.
+You can disable a utility for all users with the [`disabledUtilities` config setting](config5:disabledUtilities).
+Refer to each [utility class](repo:craftcms/cms/tree/5.x/src/utilities)’s `id()` method for their handles (including those provided by plugins), or inspect its URL in the control panel—the handle is the last segment (i.e. `system-messages` in `/admin/utilities/system-messages`).
 
 ### Settings
 
@@ -257,3 +275,105 @@ 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
+
+The control panel is designed and built with <Term slug="accessibility" label="accessibility" /> principles in mind.
+We target AA conformance with [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and publish progress our website’s [accessibility portal](https://craftcms.com/accessibility).
+
+<See path="../development/accessibility.md" />
+
+### Navigating the control panel
+
+[Skip links](#skip-links) and [landmarks](#landmarks) have been incorporated throughout the control panel to make navigation via keyboard and screen reader more straightforward.
+
+#### Skip Links
+
+Global skip links are found at the beginning of each control panel screen.
+
+![A link to 'Skip to main section' with a visible focus ring](../images/accessibility-jump-link-example.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:** <Since ver="5.7.0" /> Skips to the sub-navigation container. 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:** <Since ver="5.7.0" /> Skips to the primary content pane on the page.
+- **Skip to right sidebar:** <Since ver="5.7.0" /> Skips to the details container, which includes page metadata.
+
+::: tip
+The accessible names for the “left” and “right” sidebars respect your user’s language setting, and will flip when using a right-to-left script.
+:::
+
+Only links that point to a region used in the current screen are exposed in this list.
+In addition to global skip links, other parts of the control panel may include local skip links.
+For example, element index pages contain a **Skip to footer** link within the content region that jumps to pagination and bulk actions in the “footer” toolbar.
+
+When saving an element, success and failure states are announced via a live region, and an error summary is added to the top of the content region:
+
+![Screenshot of the error summary at the top of an element edit screen, with jump links to each field with problems.](../images/accessibility-validation-errors.png)
+
+Each of the validation messages link to the field that they apply to.
+Jumping to an error may switch to a different tab in the field layout than is currently selected.
+
+#### Landmarks
+
+Special regions of the control panel are designated using [roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/landmark_role). These include:
+
+- **`main`** — This landmark contains the bulk of the page content.
+- **`nav`** — Depending on the page, there may be several navigation landmarks, including:
+  - **Primary navigation** — Links for the primary sections of the control panel, like **Dashboard**, **Entries**, **Settings**, and so on. Available on most screens.
+  - **Breadcrumb navigation** — Links to each parent, owner, and relevant organizational component (like a section or static route). Available only when working with [structures](../reference/element-types/entries.md#structures), [nested elements](../system/elements.md#nested-elements), or settings.
+  - **Secondary navigation** — Located inside the `main` landmark, the secondary navigation’s accessible name will change based on where you are in the control panel and what the links within it represent. For example, in the **My Account** screen, it is called _Account_; on the **Entries** or **Assets** element index it is called _Sources_.
+- **`status`** — A live region where [flashes](../development/forms.md#flashes) and other dynamic messages are injected.
+
+::: tip
+See the [tour](#tour) section on this page for more information on each of these sections.
+:::
+
+Some screens (like the login page, errors, and post-[update](../update.md) prompts) have a single, generic content container, and don’t include labeled content or navigation regions.
+
+### User Preferences
+
+The control panel can be customized to match your needs by visiting <Journey path="My Account, Preferences" />.
+Settings are split into three groups, and are stored on your user, so your experience will be consistent across all sessions.
+
+::: warning
+Your preferences are _not_ applied to the login screen or other off-session pages, but your developer can use the <config5:accessibilityDefaults> setting to apply defaults.
+:::
+
+Display Settings
+
+:   These settings are concerned with the appearance of the control panel UI.
+
+    - **Use shapes to represent statuses:** Statuses are always represented by colorized “badges,” and—in some cases—icons. Enable this setting to use shapes for otherwise indistinguishable states.
+    - **Underline links:** This setting adds underlines to all links inside the control panel.
+
+    ![The appearance of statuses in Craft, when the “use shapes to represent statuses” setting is enabled.](../images/accessibility-status-shapes.png)
+
+General Settings
+
+:   - **Disable autofocus:** Some inputs inside the control panel use the `autofocus` attribute, so keyboard focus may move unexpectedly; these include search inputs on element index pages, and the first input on Edit screens or inside of slideouts. Enabling this setting will prevent this autofocus behavior.
+
+Notification Settings
+
+:   Both **Duration** and **Position** of notification “toasts” can be configured.
+
+    - **Notification Duration**: By default, toasts are shown for _five seconds_ before disappearing. You can shorten this timer to _two seconds_, extend it to _ten seconds_, or have them remain _indefinitely_ (allowing the user to close them manually).
+    - **Notification Position**: Toasts appear at the bottom-left corner of the screen, by default. This setting allows you to customize which corner of the screen they are placed.
+
+Slideout Position
+
+:   Slideout position can be changed to show on the left- or right-hand side of the screen.
+
+::: tip
+Notification and slideout preferences are stored in a script-agnostic way, so they will behave naturally if you switch between <abbr title="left-to-right">LTR</abbr> and <abbr title="right-to-left">RTL</abbr> languages.
+:::
+
+### Alternative Text
+
+Craft provides a native [**Alternative Text** field](../reference/element-types/assets.md#alt-text) for [assets](../reference/element-types/assets.md).
+In addition to simplifying how images are output in your [front-end templates](../development/templates.md), this provides a known source for image descriptions, when their thumbnails are displayed in the control panel.
+
+<See path="../development/accessibility.md" hash="alt-text" label="Handling alt text" description="Learn how to set up sensible alternative text authoring tools." />