From 3867e186cea4aaf9aed00f04932eecd1f2c7c46a Mon Sep 17 00:00:00 2001 From: Erin Donehoo Date: Thu, 7 Dec 2023 10:44:43 -0500 Subject: [PATCH] Content updates. --- .../accessibility-development.md | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-development.md b/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-development.md index 31722b48e1..6dc5ed85c9 100644 --- a/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-development.md +++ b/packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-development.md @@ -73,6 +73,23 @@ There are 2 main categories of accessible icons: For **non-interactive icons**, include `.pf-v5-screen-reader` text near the icon. Depending on the component, this text might not be a direct sibling to the icon element. +For example, in the alert component, the icon label text is adjacent to the message: + + ``` + { +
+ +
+

+ {{#> screen-reader}}Success:{{/screen-reader}} Success alert title +

+
+
+ } + ``` + #### Images All images should have alt text so that assistive technology can provide an image description. When an image contains words that are important to understanding the content, the alt text should include those words. This allows the alt text to communicate the same message as the image itself. @@ -81,8 +98,6 @@ All images should have alt text so that assistive technology can provide an imag The exception to this practice is when images are primarily for presentation purposes and are not essential pieces of content. To signify that an image should be skipped by a screen reader, set the value of the alt attribute to an empty string: `alt=””`. -For example, in the alert component, the icon label text is adjacent to the message. This way, when `role="alert"` is added to `.pf-v5-c-alert__body` for dynamically displayed alerts, the type of message is announced along with the message text. - #### Trapping focus The recommended interaction pattern for components like the modal or popover is to trap focus within the component's modal element when it becomes visible. @@ -103,7 +118,7 @@ When `tabIndex` is added, you should either add `role='region'` and an `aria-lab Some screen reader users navigate page elements via an element list or rotor menu, and the default label for these scrollable elements will be driven by whatever text content exists inside the container. This generated label may not be suitable to describe the region's purpose, and would likely be better described with a simple `aria-label`. -Example: +For example: ```html noLive