feat(Tables): Add table a11y guidance.

Pier1 · Sep 28, 2017 · 547c203 · 547c203
1 parent 2301399
commit 547c203
Showing 1 changed file with 18 additions and 12 deletions.
diff --git a/templates/components/tables/index.pug b/templates/components/tables/index.pug
@@ -4,13 +4,19 @@ block vars
   - var title = 'Tables'
 
 block content
-  // TODO:
-  // Always usa a caption or aria-describedby
-  // Identify headers (column & row)
-  // Don't use absolute sizing
-
   article
     h1 Tables
+    p Tables aren't suitable for layout on the modern web but they still serve an important purpose.
+
+    p
+      .rb-note
+        include /partials/a11y.pug
+        .rb-note-text When building a table…
+      ul
+        li Always use a #[span.font-monospace &lt;caption&gt;] or an #[span.font-monospace aria-describedby] attribute to make the table's purpose clear.
+        li Always identify column &amp; row headers with the #[span.font-monospace &lt;th scope="…"&gt;] element.
+        li Don't use absolute (pixel) sizing for table content.
+
 
     h2 Standard
     .grid-fluid
@@ -19,13 +25,6 @@ block content
           +exampleWithCode
             include _tables-standard.pug
 
-    h2 Condensed
-    .grid-fluid
-      .row
-        .col.xs
-          +exampleWithCode
-            include _tables-condensed.pug
-
     h2 Striped
     .grid-fluid
       .row
@@ -53,3 +52,10 @@ block content
         .col.xs
           +exampleWithCode
             include _tables_header-contrasting.pug
+
+    h2 Condensed
+    .grid-fluid
+      .row
+        .col.xs
+          +exampleWithCode
+            include _tables-condensed.pug