From b213caad03deae36d5a04d542bf5aa8f6463e832 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Wed, 19 Jun 2024 02:26:11 -0400 Subject: [PATCH 1/2] docs: filter out .DS_Store files posing as component folders (#1641) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: filter out .DS_Store files posing as component folders in elements/ * docs: undo reformatting of passthrough filter * docs: improve sneakiness dectection * chore: lint --------- Co-authored-by: Benny Powers - עם ישראל חי! --- docs/_plugins/rhds.cjs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/_plugins/rhds.cjs b/docs/_plugins/rhds.cjs index a7c4318fba..95566b958b 100644 --- a/docs/_plugins/rhds.cjs +++ b/docs/_plugins/rhds.cjs @@ -86,7 +86,9 @@ const COPY_CONTENT_EXTENSIONS = [ function getFilesToCopy() { // Copy element demo files const repoRoot = process.cwd(); - const tagNames = fs.readdirSync(path.join(repoRoot, 'elements')); + const tagNames = fs.readdirSync(path.join(repoRoot, 'elements'), { withFileTypes: true }) + .filter(ent => ent.isDirectory()) + .map(ent => ent.name); /** @type{import('@patternfly/pfe-tools/config.js').PfeConfig}*/ const config = require('../../.pfe.config.json'); From 0325cfed1deeb509feb30536798d8fc9768242b8 Mon Sep 17 00:00:00 2001 From: Greg Gibson <642695+hellogreg@users.noreply.github.com> Date: Wed, 19 Jun 2024 01:30:53 -0500 Subject: [PATCH 2/2] docs: added rh-table styles to a11y content page (#1646) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added rh-table styles to page Co-authored-by: Benny Powers - עם ישראל חי! --- docs/accessibility/content.md | 45 +++++++++++++++++++---------------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/docs/accessibility/content.md b/docs/accessibility/content.md index d70160ba30..f839fee71a 100644 --- a/docs/accessibility/content.md +++ b/docs/accessibility/content.md @@ -1,7 +1,7 @@ --- title: Content -tags: - - accessibility +tags: + - accessibility order: 30 importElements: - rh-code-block @@ -9,6 +9,8 @@ importElements: - rh-table --- + + -## Overview +## Overview

Note

This section covers content accessibility. Content authors should also be familiar with accessibility fundamentals.

 - ## Alt text Wherever meaningful images or other non-text elements are used on a page, you must also provide alternative text (aka “alt text”) to briefly describe these elements. Alt text makes this content machine-readable for assistive technologies (e.g, screen readers) and search engines. And browsers can substitute alt text on-screen when images don’t load. ### Types of alt text + Images loaded via the `` element typically use the alt attribute for their alternative text: @@ -156,7 +158,7 @@ A common technique is labeling objects with ARIA attributes: ## Writing microcopy -Microcopy comprises short words, phrases, or chunks of text used on the web or in user interfaces. +Microcopy comprises short words, phrases, or chunks of text used on the web or in user interfaces. Best practices for all microcopy: @@ -233,23 +235,23 @@ At Red Hat, we use sentence case for our headings: #### Heading levels -Ensure that heading levels increment and decrement to match the page outline. At the top level of each page’s outline is its `

` heading. This heading reflects the main topic of the page, and is often similar to content within the page’s `` tag. After the `<h1>`, the next level down is `<h2>`, then `<h3>`, and so on. +Ensure that heading levels increment and decrement to match the page outline. At the top level of each page’s outline is its `<h1>` heading. This heading reflects the main topic of the page, and is often similar to content within the page’s `<title>` tag. After the `<h1>`, the next level down is `<h2>`, then `<h3>`, and so on. Always increment by only one heading at a time. Don’t skip levels when incrementing, like going from an `<h3>` straight to an `<h5>`. And only decrement headings (by one or more levels) when starting a new, higher-level section in your page’s outline. Here’s an example of a page outline: - Midwestern Recipes - - Sides - - Cheese - - Fried cheese curds - - Beer cheese dip + - Sides + - Cheese + - Fried cheese curds + - Beer cheese dip - Desserts - - Bars - - Scotch-a-roos - - Dream bars - - Pastries - - Kringle - - Dutch letters + - Bars + - Scotch-a-roos + - Dream bars + - Pastries + - Kringle + - Dutch letters And here’s how that outline would be reflected in a page’s heading structure: @@ -303,7 +305,7 @@ As mentioned in the Headings section, page titles and `<h1>` elements often rela ### iframe titles -Non-hidden, non-empty `<iframe>` elements are required to have titles describing their meaning or purpose, similar to alternative text for images. +Non-hidden, non-empty `<iframe>` elements are required to have titles describing their meaning or purpose, similar to alternative text for images. <rh-code-block> <script type="text/html"><iframe src="video.html" title="Video: Network automation with Ansible"></iframe></script> @@ -364,7 +366,7 @@ Instead, a list would be simpler, easier to understand, and easier to code: </ul></script> </rh-code-block> -In other words, if it doesn’t *need* to be a table, then it probably shouldn’t be a table. +In other words, if it doesn’t _need_ to be a table, then it probably shouldn’t be a table. For more information on developing accessible tables, please read our [Table element accessibility guidance](/elements/table/accessibility/). @@ -390,7 +392,7 @@ When creating tables, assume the burden of simplifying and clarifying, so it doe Best practices for error messages: -- Ensure the user knows the location of the error. Preferably this is indicated both visually and for assistive technology. Otherwise, additional text may be required explaining the label or section where the error occurred. +- Ensure the user knows the location of the error. Preferably this is indicated both visually and for assistive technology. Otherwise, additional text may be required explaining the label or section where the error occurred. - Tell the user what they did wrong. - Recommend how they can fix it. @@ -400,7 +402,6 @@ Because people and assistive technologies read linearly, your content must also Your content order can impact not only how a page is read, but also how it’s operated. Users navigating via keyboard move sequentially (both forward and backward) among interactive elements on a page via the <kbd>tab</kbd> and arrow keys. Consider how the order in which you arrange your content could make such navigation easier or more difficult for both visual and non-visual keyboard users. - ## Audio/video ### Avoiding autoplay @@ -411,12 +412,14 @@ Your content order can impact not only how a page is read, but also how it’s o </rh-blockquote> Enabling autoplay on audio or video can create several accessibility barriers: + - Distracting users with cognitive disabilities. - Causing seizures or triggering motion sickness. - Preventing users from hearing screen readers. - Interfering with text-to-speech. Use one or more of the following techniques to help ensure accessibility: + - Avoid autoplay altogether. (Honestly, just do this, and you don’t have to worry about anything else!) - Ensure that audio-only or video-with-audio media autoplays for less than three seconds. - Ensure that video-only media (including any animated, blinking, or scrolling content) autoplays for less than five seconds. @@ -426,6 +429,7 @@ Use one or more of the following techniques to help ensure accessibility: - Provide controls to pause the media itself. ### Media solutions + To be accessible, each media type must include _**all** of the following_, unless otherwise noted as recommended or optional. <rh-table> @@ -521,7 +525,6 @@ Descriptive audio is a track of relevant visual information described by a narra Include synchronized video of sign language interpreters to your videos, for people who have difficulty hearing or processing the spoken language in media. - ## Internationalization ### Language attribute: `lang`