Fix accessibility of pagination examples.

According to
- http://www.a11ymatters.com/pattern/pagination/
- http://stackoverflow.com/a/14181478/29470

Closes #9334

diff --git a/docs/pages/pagination.md b/docs/pages/pagination.md
index 10d3e1b7095dc09fb8a8f8bd5a9d5f239a52769e..ed99e75f6591b2ea649598909d68f13a684b0948 100644 (file)
--- a/docs/pages/pagination.md
+++ b/docs/pages/pagination.md
@@ -9,7 +9,7 @@ sass: scss/components/_pagination.scss
 
 A pagination list is just a `<ul>` with the class `.pagination`, and a series of `<li>`/`<a>` pairs. Add the class `.current` to an `<li>` to mark the current page, or `.disabled` to add disabled styles to a link.
 
-Note that the container has the attributes `role="navigation"` and `aria-label="Pagination"`. These explain the purpose of the component to assistive technologies.
+Note that the list is nested inside a `<nav>` with the attributes `aria-label="Pagination"`. This explains the purpose of the component to assistive technologies.
 
 Extra screen reader-only text should also be added to a pagination element. In the below example, users reading the page will just see "Next" and "Previous", but screen readers will read it as "Next page" and "Previous page". Additionally, the text for the current page will read as "You're on page one".
 
@@ -22,17 +22,19 @@ Extra screen reader-only text should also be added to a pagination element. In t
 </div>
 
 ```html_example
-<ul class="pagination" role="navigation" aria-label="Pagination">
-  <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
-  <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
-  <li><a href="#" aria-label="Page 2">2</a></li>
-  <li><a href="#" aria-label="Page 3">3</a></li>
-  <li><a href="#" aria-label="Page 4">4</a></li>
-  <li class="ellipsis" aria-hidden="true"></li>
-  <li><a href="#" aria-label="Page 12">12</a></li>
-  <li><a href="#" aria-label="Page 13">13</a></li>
-  <li class="pagination-next"><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
-</ul>
+<nav aria-label="Pagination">
+  <ul class="pagination">
+    <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
+    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
+    <li><a href="#" aria-label="Page 2">2</a></li>
+    <li><a href="#" aria-label="Page 3">3</a></li>
+    <li><a href="#" aria-label="Page 4">4</a></li>
+    <li class="ellipsis" aria-hidden="true"></li>
+    <li><a href="#" aria-label="Page 12">12</a></li>
+    <li><a href="#" aria-label="Page 13">13</a></li>
+    <li class="pagination-next"><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
+  </ul>
+</nav>
 ```
 
 ---
@@ -50,15 +52,17 @@ The items in a pagination list are `display: inline-block`, which makes centerin
 </div>
 
 ```html_example
-<ul class="pagination text-center" role="navigation" aria-label="Pagination">
-  <li class="pagination-previous disabled">Previous</li>
-  <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
-  <li><a href="#" aria-label="Page 2">2</a></li>
-  <li><a href="#" aria-label="Page 3">3</a></li>
-  <li><a href="#" aria-label="Page 4">4</a></li>
-  <li class="ellipsis"></li>
-  <li><a href="#" aria-label="Page 12">12</a></li>
-  <li><a href="#" aria-label="Page 13">13</a></li>
-  <li class="pagination-next"><a href="#" aria-label="Next page">Next</a></li>
-</ul>
+<nav aria-label="Pagination">
+  <ul class="pagination text-center">
+    <li class="pagination-previous disabled">Previous</li>
+    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
+    <li><a href="#" aria-label="Page 2">2</a></li>
+    <li><a href="#" aria-label="Page 3">3</a></li>
+    <li><a href="#" aria-label="Page 4">4</a></li>
+    <li class="ellipsis"></li>
+    <li><a href="#" aria-label="Page 12">12</a></li>
+    <li><a href="#" aria-label="Page 13">13</a></li>
+    <li class="pagination-next"><a href="#" aria-label="Next page">Next</a></li>
+  </ul>
+</nav>
 ```