rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

Use aria-label for pagination prev/next

Browse Source 
Cleaner alternative to using ``<span class="sr-only">``
This commit is contained in:
Patrick H. Lauke 2014-12-08 14:54:20 +00:00
parent eee275762f
commit 24bc102664
1 changed files with 13 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
docs/_includes/components/pagination.html
View File

@ -9,9 +9,8 @@
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li> <li>
<a href="#"> <a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
@ -20,9 +19,8 @@
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li> <li>
<a href="#"> <a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a> </a>
</li> </li>
</ul> </ul>
@ -32,9 +30,8 @@
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li> <li>
<a href="#"> <a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
@ -43,9 +40,8 @@
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li> <li>
<a href="#"> <a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a> </a>
</li> </li>
</ul> </ul>
@ -57,20 +53,20 @@
<div class="bs-example" data-example-id="disabled-active-pagination"> <div class="bs-example" data-example-id="disabled-active-pagination">
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</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="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li> <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
... ...
</ul> </ul>
@ -83,7 +79,6 @@
<li class="disabled"> <li class="disabled">
<span> <span>
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</span> </span>
</li> </li>
<li class="active"> <li class="active">
@ -100,35 +95,35 @@
<div class="bs-example" data-example-id="pagination-sizing"> <div class="bs-example" data-example-id="pagination-sizing">
<nav> <nav>
<ul class="pagination pagination-lg"> <ul class="pagination pagination-lg">
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li> <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
<li><a href="#">2</a></li> <li><a href="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li> <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul> </ul>
</nav> </nav>
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li> <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
<li><a href="#">2</a></li> <li><a href="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li> <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul> </ul>
</nav> </nav>
<nav> <nav>
<ul class="pagination pagination-sm"> <ul class="pagination pagination-sm">
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li> <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li><a href="#">1</a></li> <li><a href="#">1</a></li>
<li><a href="#">2</a></li> <li><a href="#">2</a></li>
<li><a href="#">3</a></li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li> <li><a href="#">4</a></li>
<li><a href="#">5</a></li> <li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li> <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul> </ul>
</nav> </nav>
</div> </div>