diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/_includes/components/alerts.html | 4 | ||||
| -rw-r--r-- | docs/_includes/components/navbar.html | 2 | ||||
| -rw-r--r-- | docs/_includes/css/helpers.html | 4 | ||||
| -rw-r--r-- | docs/_includes/css/type.html | 3 | ||||
| -rw-r--r-- | docs/_includes/js/alerts.html | 7 | ||||
| -rw-r--r-- | docs/_includes/js/modal.html | 16 | ||||
| -rw-r--r-- | docs/_layouts/default.html | 6 |
7 files changed, 20 insertions, 22 deletions
diff --git a/docs/_includes/components/alerts.html b/docs/_includes/components/alerts.html index 717308354..7487a968a 100644 --- a/docs/_includes/components/alerts.html +++ b/docs/_includes/components/alerts.html @@ -40,13 +40,13 @@ </div> <div class="bs-example" data-example-id="dismissible-alert-css"> <div class="alert alert-warning alert-dismissible" role="alert"> - <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> </div> {% highlight html %} <div class="alert alert-warning alert-dismissible" role="alert"> - <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> {% endhighlight %} diff --git a/docs/_includes/components/navbar.html b/docs/_includes/components/navbar.html index c8107c017..6cd731ac6 100644 --- a/docs/_includes/components/navbar.html +++ b/docs/_includes/components/navbar.html @@ -208,7 +208,7 @@ <div class="bs-callout bs-callout-warning" id="callout-navbar-form-labels"> <h4>Always add labels</h4> - <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p> + <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p> </div> diff --git a/docs/_includes/css/helpers.html b/docs/_includes/css/helpers.html index c6701bfdc..db60f0ad8 100644 --- a/docs/_includes/css/helpers.html +++ b/docs/_includes/css/helpers.html @@ -56,10 +56,10 @@ <h3 id="helper-classes-close">Close icon</h3> <p>Use the generic close icon for dismissing content like modals and alerts.</p> <div class="bs-example" data-example-id="close-icon"> - <p><button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button></p> + <p><button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button></p> </div> {% highlight html %} -<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> +<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button> {% endhighlight %} diff --git a/docs/_includes/css/type.html b/docs/_includes/css/type.html index 18cd96464..294a1df29 100644 --- a/docs/_includes/css/type.html +++ b/docs/_includes/css/type.html @@ -220,10 +220,9 @@ You can use the mark tag to <mark>highlight</mark> text. <!-- Abbreviations --> <h2 id="type-abbreviations">Abbreviations</h2> - <p>Stylized implementation of HTML's <code><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p> + <p>Stylized implementation of HTML's <code><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.</p> <h3>Basic abbreviation</h3> - <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code><abbr></code> element.</p> <div class="bs-example" data-example-id="simple-abbr"> <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p> </div> diff --git a/docs/_includes/js/alerts.html b/docs/_includes/js/alerts.html index f93abc8b2..399cd732f 100644 --- a/docs/_includes/js/alerts.html +++ b/docs/_includes/js/alerts.html @@ -6,12 +6,12 @@ <p>When using a <code>.close</code> button, it must be the first child of the <code>.alert-dismissible</code> and no text content may come before it in the markup.</p> <div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js"> <div class="alert alert-warning alert-dismissible fade in" role="alert"> - <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. </div> <div class="alert alert-danger alert-dismissible fade in" role="alert"> - <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <h4>Oh snap! You got an error!</h4> <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> <p> @@ -27,9 +27,8 @@ <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.</p> {% highlight html %} -<button type="button" class="close" data-dismiss="alert"> +<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> </button> {% endhighlight %} diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html index 83c047904..f5861f4a5 100644 --- a/docs/_includes/js/modal.html +++ b/docs/_includes/js/modal.html @@ -31,7 +31,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> @@ -50,7 +50,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> @@ -73,7 +73,7 @@ <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> @@ -124,7 +124,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> @@ -186,7 +186,7 @@ <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4> </div> <div class="modal-body"> @@ -200,7 +200,7 @@ <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4> </div> <div class="modal-body"> @@ -230,7 +230,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> @@ -263,7 +263,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 40ff5e0cc..51191dc5e 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -26,8 +26,8 @@ {{ content }} </div> {% unless page.fullwidth == true %} - <div class="col-md-3"> - <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary"> + <div class="col-md-3" role="complementary"> + <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm"> <ul class="nav bs-docs-sidenav"> {% if page.slug == "getting-started" %} {% include nav/getting-started.html %} @@ -53,7 +53,7 @@ Preview theme </a> {% endif %} - </div> + </nav> </div> {% endunless %} </div> |