rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #19705 from patrickhlauke/v4-pagination-a11y-label

Browse Source 
Add aria-label and callout about labelling pagination components
This commit is contained in:
Patrick H. Lauke 2016-04-10 20:24:50 +01:00
commit 6d8cf0fb48
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/components/pagination.md
View File

@ -16,7 +16,7 @@ Provide pagination links for your site or app with the multi-page pagination com
Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas. Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
{% example html %} {% example html %}
<nav> <nav aria-label="Page navigation">
<ul class="pagination"> <ul class="pagination">
<li class="page-item"> <li class="page-item">
<a class="page-link" href="#" aria-label="Previous"> <a class="page-link" href="#" aria-label="Previous">
@ -39,6 +39,12 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
</nav> </nav>
{% endexample %} {% endexample %}
{% callout info %}
### Labelling the pagination component
The pagination component should be wrapped in a `<nav>` element to identify it as a navigation section to screen readers and other assistive technologies. In addition, as a page is likely to have more than one such navigation section already (such as the primary navigation in the header, or a sidebar navigation), it is advisable to provide a descriptive `aria-label` for the `<nav>` which reflects its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be `aria-label="Search results pages"`.
{% endcallout %}
## Disabled and active states ## Disabled and active states
Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page. Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page.
@ -50,7 +56,7 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
{% endcallout %} {% endcallout %}
{% example html %} {% example html %}
<nav> <nav aria-label="...">
<ul class="pagination"> <ul class="pagination">
<li class="page-item disabled"> <li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-label="Previous"> <a class="page-link" href="#" tabindex="-1" aria-label="Previous">
@ -78,7 +84,7 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles. You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.
{% example html %} {% example html %}
<nav> <nav aria-label="...">
<ul class="pagination"> <ul class="pagination">
<li class="page-item disabled"> <li class="page-item disabled">
<span class="page-link" aria-label="Previous"> <span class="page-link" aria-label="Previous">
@ -97,7 +103,7 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes. Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.
{% example html %} {% example html %}
<nav> <nav aria-label="...">
<ul class="pagination pagination-lg"> <ul class="pagination pagination-lg">
<li class="page-item"> <li class="page-item">
<a class="page-link" href="#" aria-label="Previous"> <a class="page-link" href="#" aria-label="Previous">
@ -119,7 +125,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
{% endexample %} {% endexample %}
{% example html %} {% example html %}
<nav> <nav aria-label="...">
<ul class="pagination pagination-sm"> <ul class="pagination pagination-sm">
<li class="page-item"> <li class="page-item">
<a class="page-link" href="#" aria-label="Previous"> <a class="page-link" href="#" aria-label="Previous">