Docs(Blankslate): add a11y considerations for visuals (#881)

* Docs(Blankslate): add a11y considerations for visuals * Update content/components/blankslate.mdx Co-authored-by: Patrick H. Lauke <[email protected]> * Update content/components/blankslate.mdx Co-authored-by: Patrick H. Lauke <[email protected]> --------- Co-authored-by: Patrick H. Lauke <[email protected]>
primer · Nov 7, 2024 · e8d4003 · e8d4003
1 parent 439b608
commit e8d4003
Showing 1 changed file with 4 additions and 0 deletions.
diff --git a/content/components/blankslate.mdx b/content/components/blankslate.mdx
@@ -25,6 +25,8 @@ The blankslate component is made up of several elements that work together to in
 
 The graphic can bring delight, preview an interface element, or represent the goal of the feature. Graphics should be placed intentionally and with thought about the intention of the content. Graphics also differ in meaning and appeal to the user, which is why the Blankslate component has multiple variations. These variations are outlined later on this page.
 
+Please note that when a graphic is used to convey meaning or purpose, rather than purely for decoration, this information must also be conveyed to users that may not be able to see it, such as screen reader users. Either make sure that the meaning or purpose is also conveyed in the actual text used inside the component, or add a text alternative to the image itself. In the case of [Octicons](#octicons), this is done by adding an `aria-label` attribute to the element - for example, `<Octicon icon={RepoIcon} aria-label="Repository" />`. For other graphics, this implementation is at the consumer's discretion.
+
 ### Primary Text
 
 Use primary text to explain the purpose of the empty state, help users feel comfortable to engage with the content, or begin a feature flow. Primary text should sound welcoming, human, and convey the intention of the feature.
@@ -55,6 +57,8 @@ Empty states have multiple variations that can be used in different contexts.
 
 ![Octicon Icon Blankslate](https://github.com/user-attachments/assets/9fd63765-a113-4c2d-ba30-339369797e06)
 
+If the Octicon is not purely decorative, but intended to convey meaning or purpose that is not already apparent from the text used in the component, make sure to add a meaningful text alternative to your Octicon via `aria-label`.
+
 ### Code block
 
 Blankslates that use a list of steps or offer instructions in the format of code to get started with a feature can insert a `code` block. This is the case for getting started with packages in GitHub: