Add note in Flash and PageHead for accessibility (#859)

* Add notes on a11y * Update content/components/pagehead.mdx --------- Co-authored-by: Patrick H. Lauke <[email protected]>
primer · Sep 17, 2024 · fd92bd6 · fd92bd6
1 parent b2f6ee8
commit fd92bd6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/content/components/pagehead.mdx b/content/components/pagehead.mdx
@@ -42,6 +42,17 @@ Pagehead is a heading component for the title and start of a given page section.
 
 ## Accessibility
 
+### Heading usage
+`Pagehead` does not provide a heading by default. Since this component is intended to be used for the title and start of a given page section, it should include a heading (`<h1>-<h6>`) in most cases. 
+
+```xml
+<Pagehead>
+  <Heading as="h2">
+    Heading title for Pagehead
+  </Heading>
+</Pagehead>
+```
+
 ### Known accessibility issues (GitHub staff only)
 
  <AccessibilityLink label="Pagehead"/>

diff --git a/content/deprecated-components/flash.mdx b/content/deprecated-components/flash.mdx
@@ -44,6 +44,8 @@ These updates are typically not user-initiated but rather alerts that require th
 
 - They do not typically timeout on their own, but can include a dismiss action for messages that can be closed.
 
+- Don't rely on just color to convey the meaning of the flash alert. You should pair a message with an icon that clearly relates to the selected variant.
+
 ## Options
 
 ### Types
@@ -76,6 +78,10 @@ Banners contain options to add an icon, button, or dismiss button to the content
   src="https://user-images.githubusercontent.com/586552/217706817-8a647058-9ab6-40d9-a5f7-289d67150add.png"
 />
 
+### Icon usage
+
+Icons can help convey what the flash alert is for visually. It should be used alongside a message that further explains what the flash alert is aiming to indicate. You should never rely on just the color of the flash alert to convey a status, as this becomes a [WCAG 1.4.1 Use of Color](https://www.w3.org/TR/WCAG22/#use-of-color) issue.
+
 ## Accessibility
 
 The flash component should trigger notifications for users utilizing assistive technology. They should be considered as part of the overall messaging in the product and do not recieve focus (therefore, they do not _require_ a dismiss button).