diff options
| author | Patrick H. Lauke <[email protected]> | 2014-10-30 16:45:33 +0000 |
|---|---|---|
| committer | Heinrich Fenkart <[email protected]> | 2014-11-11 07:46:14 +0100 |
| commit | bb89657bcb53a60d579d8fd9bbea56dde05dad8c (patch) | |
| tree | 1be2eb0da1b12c4002cec272c9905e1cc23256fd /docs/_includes/components/pagination.html | |
| parent | 99919c036496d72030a965953f0e2d2d760d638c (diff) | |
| download | bootstrap-bb89657bcb53a60d579d8fd9bbea56dde05dad8c.tar.xz bootstrap-bb89657bcb53a60d579d8fd9bbea56dde05dad8c.zip | |
Assorted accessibility (and some consistency) fixes for documentation
Closes #14951 by merging it.
Diffstat (limited to 'docs/_includes/components/pagination.html')
| -rw-r--r-- | docs/_includes/components/pagination.html | 46 |
1 files changed, 23 insertions, 23 deletions
diff --git a/docs/_includes/components/pagination.html b/docs/_includes/components/pagination.html index 27e5b6247..f5e78977a 100644 --- a/docs/_includes/components/pagination.html +++ b/docs/_includes/components/pagination.html @@ -8,26 +8,26 @@ <div class="bs-example"> <nav> <ul class="pagination"> - <li><a href="#">«</a></li> + <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> - <li><a href="#">»</a></li> + <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li> </ul> </nav> </div> {% highlight html %} <nav> <ul class="pagination"> - <li><a href="#">«</a></li> + <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> - <li><a href="#">»</a></li> + <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li> </ul> </nav> {% endhighlight %} @@ -37,30 +37,30 @@ <div class="bs-example"> <nav> <ul class="pagination"> - <li class="disabled"><a href="#">«</a></li> + <li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> - <li><a href="#">»</a></li> + <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li> </ul> </nav> </div> {% highlight html %} <nav> <ul class="pagination"> - <li class="disabled"><a href="#">«</a></li> + <li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> ... </ul> </nav> {% endhighlight %} - <p>You can optionally swap out active or disabled anchors for <code><span></code> to remove click functionality while retaining intended styles.</p> + <p>You can optionally swap out active or disabled anchors for <code><span></code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p> {% highlight html %} <nav> <ul class="pagination"> - <li class="disabled"><span>«</span></li> + <li class="disabled"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></li> <li class="active"><span>1 <span class="sr-only">(current)</span></span></li> ... </ul> @@ -73,35 +73,35 @@ <div class="bs-example"> <nav> <ul class="pagination pagination-lg"> - <li><a href="#">«</a></li> + <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> - <li><a href="#">»</a></li> + <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li> </ul> </nav> <nav> <ul class="pagination"> - <li><a href="#">«</a></li> + <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> - <li><a href="#">»</a></li> + <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li> </ul> </nav> <nav> <ul class="pagination pagination-sm"> - <li><a href="#">«</a></li> + <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> - <li><a href="#">»</a></li> + <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li> </ul> </nav> </div> @@ -139,16 +139,16 @@ <div class="bs-example"> <nav> <ul class="pager"> - <li class="previous"><a href="#">← Older</a></li> - <li class="next"><a href="#">Newer →</a></li> + <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li> + <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li> </ul> </nav> </div> {% highlight html %} <nav> <ul class="pager"> - <li class="previous"><a href="#">← Older</a></li> - <li class="next"><a href="#">Newer →</a></li> + <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li> + <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li> </ul> </nav> {% endhighlight %} @@ -159,16 +159,16 @@ <div class="bs-example"> <nav> <ul class="pager"> - <li class="previous disabled"><a href="#">← Older</a></li> - <li class="next"><a href="#">Newer →</a></li> + <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li> + <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li> </ul> </nav> </div> {% highlight html %} <nav> <ul class="pager"> - <li class="previous disabled"><a href="#">← Older</a></li> - <li class="next"><a href="#">Newer →</a></li> + <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li> + <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li> </ul> </nav> {% endhighlight %} |