docs(components): Standardize approach to accessibility docs via design guidelines. (#4963)

edonehoo · andrew-ronaldson · web-flow · commit b57b734287ed · 2026-04-15T10:43:06.000-03:00
* docs(components): Standardize approach to accessibility docs via design guidelines.

* Updates for consistency, plus a few additional typos and tweaks.

---------

Co-authored-by: Andrew Ronaldson &lt;aronalds@redhat.com&gt;
diff --git a/packages/documentation-site/patternfly-docs/content/components/about-modal/about-modal.md b/packages/documentation-site/patternfly-docs/content/components/about-modal/about-modal.md
@@ -31,3 +31,6 @@ About modals are clicked into through a users interaction with a button, link, o
 Provide access to an about modal using a help icon in the application masthead. Clicking the help icon will launch a dropdown menu. The help menu should always include an option labeled "About" that launches the about modal.
 
 <img src="./img/about-dropdown.png" alt="About modal dropdown" />
+
+## Accessibility
+For information regarding accessibility, visit the [about modal accessibility](/components/about-modal/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/action-list/action-list.md b/packages/documentation-site/patternfly-docs/content/components/action-list/action-list.md
@@ -36,4 +36,4 @@ In this example, an action list is used for the actions within a toolbar. The ac
 </div>
 
 ## Accessibility
-For information regarding accessibility, visit the [action list accessibility tab](/components/action-list/accessibility). 
+For information regarding accessibility, visit the [action list accessibility](/components/action-list/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/application-launcher/application-launcher.md b/packages/documentation-site/patternfly-docs/content/components/application-launcher/application-launcher.md
@@ -34,4 +34,4 @@ For longer lists, you can optionally add the ability to search the list and favo
 </div>
 
 ## Accessibility
-For information regarding accessibility, visit the [application launcher accessibility](/components/menus/application-launcher/accessibility) tab. 
+For information regarding accessibility, visit the [application launcher accessibility](/components/menus/application-launcher/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/avatar/avatar.md b/packages/documentation-site/patternfly-docs/content/components/avatar/avatar.md
@@ -57,4 +57,4 @@ There are 4 size variations available to use for different scenarios:
 
 
 ## Accessibility
-For information regarding accessibility, visit the [avatar accessibility](/components/avatar/accessibility) tab. 
+For information regarding accessibility, visit the [avatar accessibility](/components/avatar/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/backdrop/backdrop.md b/packages/documentation-site/patternfly-docs/content/components/backdrop/backdrop.md
diff --git a/packages/documentation-site/patternfly-docs/content/components/background-image/background-image.md b/packages/documentation-site/patternfly-docs/content/components/background-image/background-image.md
diff --git a/packages/documentation-site/patternfly-docs/content/components/badge/badge.md b/packages/documentation-site/patternfly-docs/content/components/badge/badge.md
@@ -11,4 +11,4 @@ They are often found in filter toggles to indicate the number of selections that
 [select list documentation](/components/menus/select/design-guidelines#checkbox-select) for more examples.
 
 ## Accessibility
-For information regarding accessibility, visit the [badge accessibility](/components/badge/accessibility) tab. 
+For information regarding accessibility, visit the [badge accessibility](/components/badge/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/banner/banner.md b/packages/documentation-site/patternfly-docs/content/components/banner/banner.md
@@ -80,6 +80,6 @@ All banners should be a solid bar spanning the width of either the full page or
  
    <img src="./img/placement-2.png" alt="Example of banner placement below above the main content area of the page" width="1500" />
 
-## Accessibility 
+## Accessibility
 
-For information regarding accessibility, visit the [banner accessibility tab](/components/banner/accessibility).
+For information regarding accessibility, visit the [banner accessibility](/components/banner/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/brand/brand.md b/packages/documentation-site/patternfly-docs/content/components/brand/brand.md
diff --git a/packages/documentation-site/patternfly-docs/content/components/breadcrumb/breadcrumb.md b/packages/documentation-site/patternfly-docs/content/components/breadcrumb/breadcrumb.md
@@ -26,4 +26,4 @@ Breadcrumbs should be placed underneath the masthead, at the top of the page. Th
 </div>
 
 ## Accessibility
-For information regarding accessibility, visit the [breadcrumb accessibility](/components/breadcrumb/accessibility) tab. 
+For information regarding accessibility, visit the [breadcrumb accessibility](/components/breadcrumb/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/button/button.md b/packages/documentation-site/patternfly-docs/content/components/button/button.md
@@ -329,4 +329,4 @@ Use specific, action-focused labels that match what the user will see when they
 
 ## Accessibility
 
-For information regarding accessibility, visit the [button accessibility page](/components/button/accessibility).
+For information regarding accessibility, visit the [button accessibility](/components/button/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/calendar-month/calendar-month.md b/packages/documentation-site/patternfly-docs/content/components/calendar-month/calendar-month.md
@@ -21,5 +21,5 @@ import '../components.css';
 6. **Disabled state**
 7. **Previous/future date**: Utilizes subtle text colors for days outside of the selected month. 
 
-## Accessibility 
+## Accessibility
 For information regarding accessibility, visit the [calendar month accessibility](/components/date-and-time/calendar-month/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/card/card.md b/packages/documentation-site/patternfly-docs/content/components/card/card.md
@@ -181,4 +181,4 @@ PatternFly supports three types of cards:
  
 ## Accessibility
  
-For information regarding accessibility, visit the [card accessibility page](/components/card/accessibility).
+For information regarding accessibility, visit the [card accessibility](/components/card/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md b/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md
@@ -62,3 +62,6 @@ The main difference between a switch and a checkbox is that a switch changes an
     <div class="ws-docs-content-img">
     ![Example 3 of do's and don'ts for using a checkbox or a switch.](./img/CB-vs-switch-3.svg)
     </div>
+
+## Accessibility
+For information regarding accessibility, visit the [checkbox accessibility](/components/forms/checkbox/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/chip/chip.md b/packages/documentation-site/patternfly-docs/content/components/chip/chip.md
@@ -26,4 +26,4 @@ Chip groups are useful to express complex filters to a data set, for example.
 
 
 ## Accessibility
-For information regarding accessibility, visit the [chip accessibility](/components/chip/accessibility) tab. 
+For information regarding accessibility, visit the [chip accessibility](/components/chip/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/clipboard-copy/clipboard-copy.md b/packages/documentation-site/patternfly-docs/content/components/clipboard-copy/clipboard-copy.md
@@ -81,4 +81,7 @@ An inline compact clipboard copy can include 1 or 2 action buttons next to it. T
 
 <div class="ws-docs-content-img">
 ![Example of an inline clipboard copy component with two actions.](./img/clipboard-copy-inline-compact-2.svg)
-</div>
+</div>
+
+## Accessibility
+For information regarding accessibility, visit the [clipboard copy accessibility](/components/clipboard-copy/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/code-editor/code-editor.md b/packages/documentation-site/patternfly-docs/content/components/code-editor/code-editor.md
@@ -71,5 +71,5 @@ Use the read-only state of the code editor when you only want to display large b
 
 The border of the code editor will turn gray to indicate that it is read-only. The user can still highlight text in the editor, but won’t be able to edit. Adding actions is optional and should be determined by use case.
 
-## Accessibility 
-For information regarding accessibility, visit the [code editor accessibility tab](/components/code-editor/accessibility). 
+## Accessibility
+For information regarding accessibility, visit the [code editor accessibility](/components/code-editor/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/components-data.json b/packages/documentation-site/patternfly-docs/content/components/components-data.json
@@ -201,7 +201,7 @@
   },
   "menu-toggle": {
     "illustration": "./img/component-illustrations/menu-toggle.png",
-    "summary": "A <b>menu toggle</b> is a selectable control that opens and closes a menu."
+    "summary": "A <b>menu toggle</b> is a selectable control that opens and closes a <Link to='/components/menus/dropdown'>dropdown</Link>, <Link to='/components.menus/select'>select</Link>, or <Link to='/components/menus/menu'>menu</Link> component."
   },
   "menu": {
     "illustration": "./img/component-illustrations/menu.png",
@@ -321,7 +321,7 @@
   },
   "text-area": {
     "illustration": "./img/component-illustrations/text-area.png",
-    "summary": "A <b>text area</b> allows users to enter a longer paragraph of text."
+    "summary": "Most commonly used in  <Link to='/components/forms/form'>forms</Link>, a <b>text area</b> allows users to enter a longer paragraph of text."
   },
   "text-input-group": {
     "illustration": "./img/component-illustrations/text-input-group.png",
diff --git a/packages/documentation-site/patternfly-docs/content/components/context-selector/context-selector.md b/packages/documentation-site/patternfly-docs/content/components/context-selector/context-selector.md
@@ -83,4 +83,7 @@ It is recommended that a page-level context selector be placed at the top of the
 
 <div class="ws-docs-content-img">
 ![Context selector placed within the page content, above breadcrumbs.](./img/page-context-selector.svg)
-</div>
+</div>
+
+## Accessibility
+For information regarding accessibility, visit the [context selector accessibility](/components/menus/context-selector/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/expandable-section/expandable-section.md b/packages/documentation-site/patternfly-docs/content/components/expandable-section/expandable-section.md
@@ -58,4 +58,6 @@ We recommend using dynamic toggle text for an expandable section, which will upd
 ![Example of an expandable section in a documentation page.](./img/exp-sect-docs-page.svg)
 </div>
 
-For more information regarding accessibility, visit the [expandable section accessibility tab](/components/expandable-section/accessibility).
+## Accessibility
+
+For more information regarding accessibility, visit the [expandable section accessibility](/components/expandable-section/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/helper-text/helper-text.md b/packages/documentation-site/patternfly-docs/content/components/helper-text/helper-text.md
@@ -37,5 +37,5 @@ For information regarding other forms of on-screen help, see [popovers](https://
 * Can be written in complete sentences or as a statement
 * Use helper text for information critical to a user completing a task, such as password requirements, character requirements, invalid text alerts, etc. 
 
-## Accessibility 
-For information regarding accessibility, visit the [helper text accessibility](/components/helper-text/accessibility) tab. 
+## Accessibility
+For information regarding accessibility, visit the [helper text accessibility](/components/helper-text/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/jump-link/jump-link.md b/packages/documentation-site/patternfly-docs/content/components/jump-link/jump-link.md
@@ -71,5 +71,5 @@ We recommended placing jump links on the left side of the content and remaining
 ![Example of jump links placed on the right of the page.](./img/jump-links-placement-right.svg)
 </div>
 
-## Accessibility 
+## Accessibility
 For information regarding accessibility, visit the [jump links accessibility](/components/jump-links/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/label/label.md b/packages/documentation-site/patternfly-docs/content/components/label/label.md
@@ -258,5 +258,6 @@ When a user selects the **Add label** button, it opens up a modal, where they ca
 </div>
 
 Once the new label is created, it cannot be edited. Users will need to add a new label if they want to make changes.
+
 ## Accessibility
-For information regarding accessibility, visit the [labels accessibility](/components/label/accessibility) tab.
+For information regarding accessibility, visit the [label accessibility](/components/label/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/menu-toggle/menu-toggle.md b/packages/documentation-site/patternfly-docs/content/components/menu-toggle/menu-toggle.md
diff --git a/packages/documentation-site/patternfly-docs/content/components/menu/menu.md b/packages/documentation-site/patternfly-docs/content/components/menu/menu.md
@@ -174,3 +174,6 @@ When creating menu item labels, keep in mind the following guidelines:
 * Options should reflect the result a user should expect. For example, a list or sorting options might include the items: *Alphabetical*, *Oldest first*, *Newest first*, and *Numeric*.
 
 * Descriptive text added to a menu item should be short. Two lines or less is recommended.
+
+## Accessibility
+For information regarding accessibility, visit the [menu accessibility](/components/menus/menu/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/modal/modal.md b/packages/documentation-site/patternfly-docs/content/components/modal/modal.md
@@ -194,3 +194,6 @@ Icons are optional in modal dialogs. Use or omit them as your use case requires.
 | <span style="color: rgb(240, 171, 0)" aria-label="warning" role="img"> <i class="fas fa-exclamation-triangle" /> </span> | **Warning:** Cautions or warns the user of a permanent action, or that information will be deleted upon action completion | Add to confirmation dialogs or passive dialogs to indicate a higher level of urgency and importance.|
 | <span style="color: rgb(201, 25, 11)" aria-label="critical warning" role="img"> <i class="fas fa-exclamation-circle" /> </span> | **Critical Warning:** Indicates that an error has occured  | Add to error dialogs. |
 | <span style="color: rgb(43, 154, 243)" aria-label="acknowledgement" role="img"> <i class="fas fa-info-circle" /> </span> | **Acknowledgement:** Informs the user of an action or result  | Add to confirmation or passive dialogs to indicate a lower level of urgency. |
+
+## Accessibility
+For information regarding accessibility, visit the [modal accessibility](/components/modal/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/navigation/navigation.md b/packages/documentation-site/patternfly-docs/content/components/navigation/navigation.md
@@ -171,4 +171,7 @@ Secondary horizontal navigation can also be used with primary horizontal navigat
 
 <div class="ws-docs-content-img">
 ![Example of horizontal primary and secondary navigation.](./img/nav-secondary-horizontal.svg)
-</div>
+</div>
+
+## Accessibility
+For information regarding accessibility, visit the [navigation accessibility](/components/navigation/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/number input/number-input.md b/packages/documentation-site/patternfly-docs/content/components/number input/number-input.md
@@ -26,15 +26,15 @@ import '../components.css';
 ### When not to use
 * The numeric value range is infinite.
 * The numeric value can be either a fractional or whole number.
-* The numeric value required is not part of a range, or is arbitrary. In this use case, use an <a href="https://v4-archive.patternfly.org/v4/components/input-group/">input group</a> instead.
+* The numeric value required is not part of a range, or is arbitrary. In this use case, use an [input group](/components/input-group) instead.
 * There is not enough space in the UI to account for the interaction between the input field and the buttons.
 
 ### Best practices
 * Display a default numeric value in the input field that users can modify by typing directly into the input field or scale using the increase or decrease buttons.
 * Keep labels concise and specific to effectively communicate what value the user should enter into the input field.
 * Determine an increment size relative to your specific value range. Scale your increment size to accommodate for the types of values users will input in context.
 For example: If your range is from 0-10, have increments of 1, but if your range is from 0-100, have increments of 10.
-* Include unit symbols to the right of the text input and increase button, depending on your use case. Always use a unit’s standard abbreviation or symbol. For a list of recommended symbols, see our <a href="https://v4-archive.patternfly.org/v4/content-design/units-and-symbols#writing-units-of-measure">Units and symbols page</a>.
+* Include unit symbols to the right of the text input and increase button, depending on your use case. Always use a unit’s standard abbreviation or symbol. For a list of recommended symbols, see our [units and symbols guidance](/content-design/grammar/units-and-symbols).
 
 <div class="ws-docs-content-img">
 ![Number input states](./img/number_input_states.svg)
@@ -62,6 +62,6 @@ When adding thresholds to a number input, be sure to inform users with text to m
 Consider the following guidance to ensure that your number input is <a href="https://www.section508.gov/">508 compliant</a>:
 
 * Use clear and descriptive labels for each button and fields. Specific language makes it easier for users with assistive technology to understand the required value.
-* Include error validation messages to guide users who enter values incorrectly. For more information about writing effective error messages, see our <a href="https://v4-archive.patternfly.org/v4/content-design/error-messages">UX writing style guide</a>.
+* Include error validation messages to guide users who enter values incorrectly. For more information about writing effective error messages, see the [error message writing guide](/content-design/writing-guides/error-messages).
 
-For more in-depth accessibility guidance, see the <a href="https://v4-archive.patternfly.org/v4/components/accordion/design-guidelines/#accessibility">PatternFly accessibility guide</a>.
+For more in-depth accessibility guidance, see the [PatternFly accessibility guide](/accessibility/overview).
diff --git a/packages/documentation-site/patternfly-docs/content/components/page/page.md b/packages/documentation-site/patternfly-docs/content/components/page/page.md
@@ -40,3 +40,5 @@ PatternFly includes a flexible layout system for defining pages. Page layouts ar
 ### Page sections
 Page sections allow you to define areas on a page to group content. The header, body, and footer on a page are examples of page sections. Page sections have 24px padding on left and right edges or no padding to allow the contents to extend to the edge of a page. At screen sizes smaller than 1200px, the left/right padding is reduced to 16px to create a tighter layout. Page sections can also be made sticky such that they will remain visible at the top or bottom of the viewport when the page scrolls. This is useful for creating sticky headers, footers, or other elements.
 
+## Accessibility
+For information regarding accessibility, visit the [page accessibility](/components/page/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/progress-stepper/progress-stepper.md b/packages/documentation-site/patternfly-docs/content/components/progress-stepper/progress-stepper.md
@@ -151,4 +151,4 @@ For **complete** steps, write your progress stepper title in past tense. Use thi
 </div>
 
 ## Accessibility
-For information regarding accessibility, visit the progress stepper [accessibility tab](/components/progress-stepper/accessibility).
+For information regarding accessibility, visit the [progress stepper accessibility](/components/progress-stepper/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/progress/progress.md b/packages/documentation-site/patternfly-docs/content/components/progress/progress.md
@@ -225,4 +225,7 @@ For **complete** statuses, write your progress bar title in past tense. Use this
 
 </div>
 
-Progress bars should only use content in their title and progress value. Never write additional content inside the progress track.
+Progress bars should only use content in their title and progress value. Never write additional content inside the progress track.
+
+## Accessibility
+For information regarding accessibility, visit the [progress accessibility](/components/progress/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/radio/radio.md b/packages/documentation-site/patternfly-docs/content/components/radio/radio.md
@@ -30,3 +30,6 @@ Radio buttons allow users to select **1 item** from a list of options.
 ### Labeling and alignment
 
 Radio button labels fall to the right of the radio button control. You can use headings to label a group of radio buttons. The placement of headings will depend on the layout of other content in the form or on the page you’re designing. For more information on how to arrange radio buttons, see the [forms design guidelines](/components/forms/form/design-guidelines#data-input-arrangement).
+
+## Accessibility
+For information regarding accessibility, visit the [radio accessibility](/components/forms/radio/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/sidebar/sidebar.md b/packages/documentation-site/patternfly-docs/content/components/sidebar/sidebar.md
@@ -8,4 +8,7 @@ Sidebars orient a panel box and a content box on a page. The panel and content c
 
 Sidebars can contain jumplinks and vertical tabs that provide easy access to different sections within a panel. However, they are also frequently used for context-sensitive content, frequently changed properties, and information regarding functionality. 
 
-Sidebars can be sticky, so that they are constantly visible as a user scrolls through a page. They are also responsive, so the panel will display on top of content in mobile view, and beside the content in desktop view.
+Sidebars can be sticky, so that they are constantly visible as a user scrolls through a page. They are also responsive, so the panel will display on top of content in mobile view, and beside the content in desktop view.
+
+## Accessibility
+For information regarding accessibility, visit the [sidebar accessibility](/components/sidebar/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/skeleton/skeleton.md b/packages/documentation-site/patternfly-docs/content/components/skeleton/skeleton.md
@@ -24,4 +24,4 @@ Use a skeleton when:
 - It is likely it will fail or show an empty state while waiting for actions to complete.
 
 ## Accessibility
-For information regarding accessibility, visit the [skeleton accessibility](/components/skeleton/accessibility) tab. 
+For information regarding accessibility, visit the [skeleton accessibility](/components/skeleton/accessibility) tab.
diff --git a/packages/documentation-site/patternfly-docs/content/components/skip-to-content/skip-to-content.md b/packages/documentation-site/patternfly-docs/content/components/skip-to-content/skip-to-content.md
diff --git a/packages/documentation-site/patternfly-docs/content/components/switch/switch.md b/packages/documentation-site/patternfly-docs/content/components/switch/switch.md
diff --git a/packages/documentation-site/patternfly-docs/content/components/tabs/tabs.md b/packages/documentation-site/patternfly-docs/content/components/tabs/tabs.md
diff --git a/packages/documentation-site/patternfly-docs/content/components/text-area/text-area.md b/packages/documentation-site/patternfly-docs/content/components/text-area/text-area.md
diff --git a/packages/documentation-site/patternfly-docs/content/components/title/title.md b/packages/documentation-site/patternfly-docs/content/components/title/title.md
diff --git a/packages/documentation-site/patternfly-docs/content/components/tree-view/tree-view.md b/packages/documentation-site/patternfly-docs/content/components/tree-view/tree-view.md

Original file line number	Diff line number	Diff line change
`@@ -57,4 +57,4 @@ There are 4 size variations available to use for different scenarios:`
`57`	`57`
`58`	`58`
`59`	`59`	`## Accessibility`
`60`		`-For information regarding accessibility, visit the [avatar accessibility](/components/avatar/accessibility) tab.`
	`60`	`+For information regarding accessibility, visit the [avatar accessibility](/components/avatar/accessibility) tab.`