diff options
| author | Chris Rebert <[email protected]> | 2014-05-03 19:38:09 -0700 |
|---|---|---|
| committer | Chris Rebert <[email protected]> | 2014-05-03 19:53:34 -0700 |
| commit | 949b81f51171550bcec0d92e771793999e69a389 (patch) | |
| tree | 30d5d243a71a289ae1aa74e9f27d62be5b309a47 /docs/_includes/js/modal.html | |
| parent | bae289d1fe59d1c403b1a4fceaea6379f6008a2a (diff) | |
| download | bootstrap-949b81f51171550bcec0d92e771793999e69a389.tar.xz bootstrap-949b81f51171550bcec0d92e771793999e69a389.zip | |
Improve accessibility of close buttons in modals & alerts
Adds textual caption to the close buttons. The "X" multiplication sign isn't very meaningful to screenreaders.
Credit: https://github.com/paypal/bootstrap-accessibility-plugin
Per:
https://github.com/paypal/bootstrap-accessibility-plugin/blob/master/README.md#alert
https://github.com/paypal/bootstrap-accessibility-plugin/blob/master/README.md#modal-dialog
Diffstat (limited to 'docs/_includes/js/modal.html')
| -rw-r--r-- | docs/_includes/js/modal.html | 12 |
1 files changed, 6 insertions, 6 deletions
diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html index e99d319e7..c1cc6f055 100644 --- a/docs/_includes/js/modal.html +++ b/docs/_includes/js/modal.html @@ -24,7 +24,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> @@ -43,7 +43,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> @@ -66,7 +66,7 @@ <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Modal Heading</h4> </div> <div class="modal-body"> @@ -117,7 +117,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> @@ -179,7 +179,7 @@ <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4> </div> <div class="modal-body"> @@ -193,7 +193,7 @@ <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4> </div> <div class="modal-body"> |