Merge pull request #476 from alphagov/fix-table-semantics

Fix table semantics
alphagov · Jun 6, 2017 · b9e35c1 · b9e35c1
2 parents 370bddc + 967ae3f
commit b9e35c1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 18 deletions.
diff --git a/app/views/snippets/data_table.html b/app/views/snippets/data_table.html
@@ -1,9 +1,5 @@
 <table>
-  <thead>
-    <tr>
-      <th colspan="2">Dates and amounts</th>
-    </tr>
-  </thead>
+  <caption class="heading-small">Dates and amounts</caption>
   <tbody>
     <tr>
       <td>First 6 weeks</td>
@@ -14,7 +10,7 @@
       <td>£109.80 per week</td>
     </tr>
     <tr>
-     <td>Total estimated pay</td>
+      <td>Total estimated pay</td>
       <td>£4,282.20</td>
     </tr>
     <tr>

diff --git a/app/views/snippets/data_table_numeric.html b/app/views/snippets/data_table_numeric.html
@@ -1,26 +1,31 @@
 <table>
   <thead>
     <tr>
-      <th scope="col">Date</th>
-      <th class="numeric" scope="col">Paper form</th>
-      <th class="numeric" scope="col">Digital</th>
+      <th scope="col">Month you apply</th>
+      <th class="numeric" scope="col">Rate for vehicles</th>
+      <th class="numeric" scope="col">Rate for bicycles</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td>25 November to 1 December 2013</td>
-      <td class="numeric">2,763</td>
-      <td class="numeric">1,792</td>
+      <th scope="row">January</th>
+      <td class="numeric">£165.00</td>
+      <td class="numeric">£85.00</td>
     </tr>
     <tr>
-      <td>2 to 8 December 2013</td>
-      <td class="numeric">2,850</td>
-      <td class="numeric">1,740</td>
+      <th scope="row">February</th>
+      <td class="numeric">£165.00</td>
+      <td class="numeric">£85.00</td>
     </tr>
     <tr>
-     <td>9 to 15 December 2013</td>
-      <td class="numeric">2,388</td>
-      <td class="numeric">1,683</td>
+      <th scope="row">March</th>
+      <td class="numeric">£151.25</td>
+      <td class="numeric">£77.90</td>
+    </tr>
+    <tr>
+      <th scope="row">April</th>
+      <td class="numeric">£136.10</td>
+      <td class="numeric">£70.10</td>
     </tr>
   </tbody>
 </table>
diff --git a/assets/sass/elements/_tables.scss b/assets/sass/elements/_tables.scss
@@ -34,6 +34,10 @@ table {
   td.numeric {
     font-family: $toolkit-font-stack-tabular;
   }
+
+  caption {
+    text-align: left;
+  }
 }
 
 .table-font-xsmall {