diff options
| author | Chris Rebert <[email protected]> | 2014-07-07 20:04:22 -0700 |
|---|---|---|
| committer | Chris Rebert <[email protected]> | 2014-07-07 20:05:44 -0700 |
| commit | 849bf58a549eb03bf420be7a893d4739893de995 (patch) | |
| tree | 3f176e8fb814fb8c52a63ff68108d301afb32ff2 /docs | |
| parent | 5d1abf8b380aa94be26f52a662636cc6501fec2d (diff) | |
| download | bootstrap-849bf58a549eb03bf420be7a893d4739893de995.tar.xz bootstrap-849bf58a549eb03bf420be7a893d4739893de995.zip | |
Add screenreader text to prev/next carousel buttons in examples to improve accessibility
Refs #13556.
Per https://github.com/paypal/bootstrap-accessibility-plugin/blob/master/README.md#carousel
Credit: https://github.com/paypal/bootstrap-accessibility-plugin
[skip sauce]
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/_includes/js/carousel.html | 6 | ||||
| -rw-r--r-- | docs/examples/carousel/index.html | 10 | ||||
| -rw-r--r-- | docs/examples/theme/index.html | 2 |
3 files changed, 16 insertions, 2 deletions
diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html index 222caf333..dd697ae4f 100644 --- a/docs/_includes/js/carousel.html +++ b/docs/_includes/js/carousel.html @@ -23,9 +23,11 @@ </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> + <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> + <span class="sr-only">Next</span> </a> </div> </div><!-- /example --> @@ -58,9 +60,11 @@ <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> + <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> + <span class="sr-only">Next</span> </a> </div> {% endhighlight %} @@ -104,9 +108,11 @@ </div> <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> + <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> + <span class="sr-only">Next</span> </a> </div> </div><!-- /example --> diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index efe2c9754..999f1f121 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -113,8 +113,14 @@ </div> </div> </div> - <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> - <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> + <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> + <span class="glyphicon glyphicon-chevron-left"></span> + <span class="sr-only">Previous</span> + </a> + <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> + <span class="glyphicon glyphicon-chevron-right"></span> + <span class="sr-only">Next</span> + </a> </div><!-- /.carousel --> diff --git a/docs/examples/theme/index.html b/docs/examples/theme/index.html index 0f686c32e..c7736a2d4 100644 --- a/docs/examples/theme/index.html +++ b/docs/examples/theme/index.html @@ -633,9 +633,11 @@ </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> + <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> + <span class="sr-only">Next</span> </a> </div> |