diff --git a/content/components/pagehead.mdx b/content/components/pagehead.mdx index de3cc43f5..4660c1570 100644 --- 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 (`

-

`) in most cases. + +```xml + + + Heading title for Pagehead + + +``` + ### Known accessibility issues (GitHub staff only) diff --git a/content/deprecated-components/flash.mdx b/content/deprecated-components/flash.mdx index 10d4fe1e7..c667c867a 100644 --- 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).