Updated Documentation

Author: JoshBowdenConcepts

apps/docs/content/components/Hero/index.mdx

@@ -17,7 +17,7 @@ export default ComponentLayout
 
 ## Usage
 
-Use the hero component to provide a title, description and action that introduces the main content of a page. The hero component is designed to be positioned at the top of a page and spans the full width of the viewport. Consider using the [CTA banner](/components/CTABanner) to replicate the content and actions in other parts of the page. 
+Use the hero component to provide a title, description and action that introduces the main content of a page. The hero component is designed to be positioned at the top of a page and spans the full width of the viewport. Consider using the [CTA banner](/components/CTABanner) to replicate the content and actions in other parts of the page.
 
 Both heading and description of the hero should be short and descriptive. Heading should be not be longer than 2 lines, and description should be no longer than 3-4 lines.
 
@@ -60,11 +60,16 @@ Hero elements can be aligned to the start or center of the page. By default, the
   <Dont>
     <img src="https://github.com/primer/brand/assets/912236/1f56d40e-c3aa-4955-aa8f-a4748e9fe149" />
     <Caption>
-      Don't use center alignment if the background interfere with the legibility of the content.
+      Don't use center alignment if the background interfere with the legibility
+      of the content.
     </Caption>
   </Dont>
 </DoDontContainer>
 
+## Accessibility
+
+Centering text may negatively impact legibility making text difficult to read. While we support this variant if possible use the left-aligned design to improve readability for more users.
+
 ## Related components
 
 - [Section intro](/components/SectionIntro): To provide a title, description and a link to a new section in the page.