diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 3b0f5e54e9b9..7aa29efb6b87 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -9,6 +9,8 @@ import { EuiErrorBoundary } from '../../src/components';
 
 // Guidelines
 
+import AccessibilityGuidelines from './views/guidelines/accessibility';
+
 import ButtonGuidelines from './views/guidelines/button';
 
 import ColorGuidelines from './views/guidelines/colors';
@@ -248,6 +250,10 @@ const navigation = [
   {
     name: 'Guidelines',
     items: [
+      {
+        name: 'Accessibility',
+        component: AccessibilityGuidelines,
+      },
       {
         name: 'Buttons',
         component: ButtonGuidelines,
diff --git a/src-docs/src/views/form_compressed/form_compressed_example.js b/src-docs/src/views/form_compressed/form_compressed_example.js
index f01395f123ec..5262f3c28a97 100644
--- a/src-docs/src/views/form_compressed/form_compressed_example.js
+++ b/src-docs/src/views/form_compressed/form_compressed_example.js
@@ -198,7 +198,7 @@ export const FormCompressedExample = {
             This is an example of how to combine compressed form controls with
             from rows, labels, prepend and appends in a column layout.
           </p>
-          <EuiCallOut color="warning" title="Accessiblity in compressed forms">
+          <EuiCallOut color="warning" title="Accessibility in compressed forms">
             <p>
               Pay close attention to the patterns of using{' '}
               <EuiCode>htmlFor</EuiCode> and <EuiCode>aria-label</EuiCode>. For