DOC-2621 - Accessibility page improvements

modules/ROOT/pages/accessibility.adoc

@@ -2,6 +2,11 @@
 :navtitle: Accessibility
 :description_short: Configure the accessibility of TinyMCE.
 :description: Configure the accessibility of TinyMCE.
+:keywords: accessibility, keyboard navigation, screen reader, a11y
+
+This page describes configuration options that affect how {productname} supports keyboard users and screen readers. For guidance on using the editor with the keyboard, see the xref:accessibility.adoc#how-to-use-the-editor[How to use the editor] section that follows.
+
+include::partial$configuration/accessibility-keyboard-navigation.adoc[]
 
 include::partial$configuration/a11y_advanced_options.adoc[]
 

modules/ROOT/partials/configuration/accessibility-keyboard-navigation.adoc

@@ -0,0 +1,41 @@
+[[how-to-use-the-editor]]
+== How to use the editor
+
+{productname} supports full keyboard navigation. Users can access the menu bar, toolbars, and contextual toolbars without using a mouse.
+
+=== Menus and toolbars
+
+The editor provides two main ways to access formatting and editing features:
+
+* **Menu bar**: Use the menu bar when the desired command is known. Menus group related actions and can be faster to navigate for experienced users.
+* **Toolbars**: Use the main toolbar for frequently used actions. Toolbar buttons are visible by default and provide quick access to common formatting options.
+* **Contextual toolbars**: Some actions are available only from contextual toolbars that appear when the cursor is on specific content, such as images, links, or tables.
+
+[TIP]
+====
+When a feature appears only in a contextual toolbar (for example, editing alternative text for an image), use the keyboard shortcut to focus the contextual toolbar. See the table below.
+====
+
+=== Keyboard shortcuts for editor navigation
+
+[cols="1,2,2",options="header"]
+|===
+|Action |Windows or Linux |macOS
+|Focus the menu bar |Alt+F9 |⌥+F9
+|Focus the toolbar |Alt+F10 |⌥+F10
+|Focus the element path (footer) |Alt+F11 |⌥+F11
+|Focus notifications |Alt+F12 |⌥+F12
+|Focus the contextual toolbar |Ctrl+F9 |Ctrl+F9
+|Open the Help dialog |Alt+0 |⌥+0
+|===
+
+The contextual toolbar appears when the cursor is on content that has context-specific actions, such as an image or a link. For example, to edit alternative text for an image using only the keyboard:
+
+. Place the cursor on the image.
+. Press Ctrl+F9 (Windows, Linux, or macOS) to focus the contextual toolbar.
+. Use the arrow keys to move to the desired button (for example, *Image options* or *Alternative description*).
+. Press Enter or Space to activate the button.
+
+=== Screen readers
+
+{productname} works with common screen readers, including VoiceOver (macOS and iOS), JAWS, and NVDA. The xref:help.adoc[Help] plugin provides a Keyboard Navigation tab that documents the full keyboard navigation model. When the Help plugin is loaded, the shortcut to open the Help dialog (Alt+0 or ⌥+0) appears in the status bar by default.

modules/ROOT/partials/configuration/help_accessibility.adoc

@@ -1,5 +1,5 @@
 [[help_accessibility]]
-== `help_accessibility`
+== `+help_accessibility+`
 
 When the xref:help.adoc[Help] plugin is loaded, the {productname} editor displays the keyboard shortcut for accessing the Help dialog in the {productname} status bar by default.
 
@@ -16,7 +16,7 @@ The `help_accessibility` option allows for this display to be turned off.
 [source,js]
 ----
 tinymce.init({
-  selector: "textarea",  // change this value according to your html
+  selector: "textarea",  // change this value according to your HTML
   plugins: "help",
   help_accessibility: false,
 });
@@ -31,7 +31,7 @@ It is not necessary, but may be useful, to explicitly set the option to `true`.
 [source,js]
 ----
 tinymce.init({
-  selector: "textarea",  // change this value according to your html
+  selector: "textarea",  // change this value according to your HTML
   plugins: "help",
   help_accessibility: true,
 });

modules/ROOT/partials/configuration/iframe_aria_text.adoc

@@ -19,7 +19,7 @@ The `+title+` attribute is read by screen-readers to help users identify the edi
 [source,js]
 ----
 tinymce.init({
-  selector: 'textarea',  // change this value according to your html
+  selector: 'textarea',  // change this value according to your HTML
   iframe_aria_text: 'Text Editor'
 });
 ----