Create accessibility menu page

content/accessibility/index.mdx

@@ -0,0 +1,66 @@
+---
+title: Accessibility
+---
+
+import {Grid, Flex, Box, Link, Text, Label} from '@primer/components'
+
+<Grid gridTemplateColumns="1fr" gridGap={4}>
+
+
+<Grid gridTemplateColumns="1fr" gridGap={4}>
+    <h2>General</h2>
+    <div>
+        <Link href="/design/accessibility/accessibility-at-github" fontWeight="bold">Accessibility at GitHub</Link>
+        <Box as="p">Get started with accessibility at GitHub.</Box>
+    </div>
+    <div>
+        <Link href="/design/accessibility/guidelines" fontWeight="bold">Guidelines</Link>
+        <Box as="p">Basic guidelines for designers when creating or updating features.</Box>
+    </div>
+    <div>
+        <Link href="/design/accessibility/tools" fontWeight="bold">Tools</Link>
+        <Box as="p">A selection of tools to help designers create accessible designs.</Box>
+    </div>
+</Grid>
+
+
+<Grid gridTemplateColumns="1fr" gridGap={4}>
+    <h2>Specific</h2>
+    <div>
+        <Link href="/design/accessibility/alternative-text-for-images" fontWeight="bold">Alternative text for images</Link>
+        <Box as="p">Alternative text on images allows assistive technology like screen readers to understand the purpose of an image on a page or allow them to skip it if purely decorative. </Box>
+    </div>
+    <div>
+        <Link href="/design/accessibility/announcements" fontWeight="bold">Assistive technology announcements</Link>
+        <Box as="p">Events like toasts and status messages are visually communicated to GitHub users. Making sure those announcements are read via assistive technology allows users with low or no vision to get that status information.</Box>
+    </div>
+    <div>
+        <Link href="/design/accessibility/button-purpose" fontWeight="bold">Describing a button’s purpose</Link>
+        <Box as="p">Labeling buttons properly let's users know what will happen when they activate the control, lessens errors, and increases confidence.</Box>
+    </div>
+    <div>
+        <Link href="/design/accessibility/focus-management" fontWeight="bold">Focus management</Link>
+        <Box as="p">Managing focus within a page or application is essential for users to successfully navigate, complete actions, and understand where they are.</Box>
+    </div>
+    <div>
+        <Link href="/design/accessibility/headings" fontWeight="bold">Headings</Link>
+        <Box as="p">Headings play a critical role in communicating the structure of a page. Find out why they're critical and how to create an accessible hierarchy in your pages.</Box>
+    </div>
+    <div>
+        <Link href="/design/accessibility/links" fontWeight="bold">Links</Link>
+        <Box as="p">Links help us navigate a website. Learn how to style links appropriately to keep them usable by all.</Box>
+    </div>
+    <div>
+        <Link href="/design/accessibility/semantic-html" fontWeight="bold">Semantic HTML</Link>
+        <Box as="p">Understand when and how to use semantic HTML to improve the experience of the largest number of users possible.</Box>
+    </div>
+    <div>
+        <Link href="/design/accessibility/text-resize-and-respacing" fontWeight="bold">Text resize and respacing</Link>
+        <Box as="p">People on the web should be able to resize text to improve legibility without blocking or obscuring any other part of the UI.</Box>
+    </div>
+    <div>
+        <Link href="/design/accessibility/tooltip-alternatives" fontWeight="bold">Tooltip alternatives</Link>
+        <Box as="p">Most UI cases don't call for tooltips. Learn some alternative methods to use in place of tooltips.</Box>
+    </div>
+</Grid>
+</Grid>

content/index.mdx

@@ -11,7 +11,7 @@ Primer's interface guidelines are a collection of principles, standards, and usa
 
 The fundamental parts of the design system that underpin all GitHub interfaces, such as color and typography.
 
-## [Accessibility](https://primer.style/design/accessibility/accessibility-at-github)
+## [Accessibility](https://primer.style/design/accessibility)
 
 Standards, guidelines, and tools to design accessible GitHub interfaces.
 

package.json

@@ -16,7 +16,8 @@
     "gatsby": "^2.32.13",
     "gatsby-plugin-alias-imports": "^1.0.5",
     "react": "16.9.x",
-    "react-dom": "16.9.x"
+    "react-dom": "16.9.x",
+    "yarn": "^1.22.18"
   },
   "private": true
 }

src/@primer/gatsby-theme-doctocat/nav.yml

@@ -8,36 +8,32 @@
     - title: Content
       url: /foundations/content
 - title: Accessibility
-  url: /accessibility/accessibility-at-github
+  url: /accessibility
   children:
     - title: Accessibility at GitHub
       url: /accessibility/accessibility-at-github
-    - title: Focus management
-      url: /accessibility/focus-management
     - title: Guidelines
       url: /accessibility/guidelines
     - title: Tools
       url: /accessibility/tools
-    - title: Tooltip alternatives
-      url: /accessibility/tooltip-alternatives
-    - title: Semantic HTML
-      url: /accessibility/semantic-html
-    - title: Headings
-      url: /accessibility/headings
     - title: Alternative text for images
       url: /accessibility/alternative-text-for-images
-    - title: Text resize and respacing
-      url: /accessibility/text-resize-and-respacing
     - title: Assistive technology announcements
       url: /accessibility/announcements
-    - title: Focus management
-      url: /accessibility/focus-management
     - title: Describing a button’s purpose
       url: /accessibility/button-purpose
+    - title: Focus management
+      url: /accessibility/focus-management
+    - title: Headings
+      url: /accessibility/headings 
     - title: Links
       url: /accessibility/links
-    - title: Tools
-      url: /accessibility/tools
+    - title: Semantic HTML
+      url: /accessibility/semantic-html
+    - title: Text resize and respacing
+      url: /accessibility/text-resize-and-respacing
+    - title: Tooltip alternatives
+      url: /accessibility/tooltip-alternatives
 - title: UI patterns
   url: /ui-patterns
   children:

yarn.lock

@@ -16027,6 +16027,11 @@ yargs@^16.1.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
+yarn@^1.22.18:
+  version "1.22.18"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.18.tgz#05b822ade8c672987bab8858635145da0850f78a"
+  integrity sha512-oFffv6Jp2+BTUBItzx1Z0dpikTX+raRdqupfqzeMKnoh7WD6RuPAxcqDkMUy9vafJkrB0YaV708znpuMhEBKGQ==
+
 yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"