Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs accessibility tweaks #15320

Merged
merged 4 commits into from
Dec 7, 2014
Merged

Docs accessibility tweaks #15320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c609272
``aria-label="close"`` instead of sr-only ``span``
patrickhlauke Dec 7, 2014
8af8f7d
Make sidebar navigation actual ``<nav>``
patrickhlauke Dec 7, 2014
353d839
Expand advice about adding labels
patrickhlauke Dec 7, 2014
202f1f8
``<abbr>`` with title also useful for AT
patrickhlauke Dec 7, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/_includes/components/alerts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,13 @@ <h4>Requires JavaScript alert plugin</h4>
</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">&times;</span><span class="sr-only">Close</span></button>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</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">&times;</span><span class="sr-only">Close</span></button>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
{% endhighlight %}
Expand Down
2 changes: 1 addition & 1 deletion docs/_includes/components/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ <h4>Mobile device caveats</h4>

<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>


Expand Down
4 changes: 2 additions & 2 deletions docs/_includes/css/helpers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,10 @@ <h4>Conveying meaning to assistive technologies</h4>
<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">&times;</span><span class="sr-only">Close</span></button></p>
<p><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></p>
</div>
{% highlight html %}
<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
{% endhighlight %}


Expand Down
3 changes: 1 addition & 2 deletions docs/_includes/css/type.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,10 +220,9 @@ <h2 id="type-transformation">Transformation classes</h2>

<!-- Abbreviations -->
<h2 id="type-abbreviations">Abbreviations</h2>
<p>Stylized implementation of HTML's <code>&lt;abbr&gt;</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>&lt;abbr&gt;</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>&lt;abbr&gt;</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>
Expand Down
7 changes: 3 additions & 4 deletions docs/_includes/js/alerts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ <h2 id="alerts-examples">Example alerts</h2>
<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">&times;</span><span class="sr-only">Close</span></button>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</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">&times;</span><span class="sr-only">Close</span></button>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</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>
Expand All @@ -27,9 +27,8 @@ <h2 id="alerts-usage">Usage</h2>
<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">&times;</span>
<span class="sr-only">Close</span>
</button>
{% endhighlight %}

Expand Down
16 changes: 8 additions & 8 deletions docs/_includes/js/modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ <h3>Static example</h3>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
Expand All @@ -50,7 +50,7 @@ <h4 class="modal-title">Modal title</h4>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
Expand All @@ -73,7 +73,7 @@ <h3>Live demo</h3>
<div class="modal-content">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Expand Down Expand Up @@ -124,7 +124,7 @@ <h4>Overflowing text to show scroll behavior</h4>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Expand Down Expand Up @@ -186,7 +186,7 @@ <h2 id="modals-sizes">Optional sizes</h2>
<div class="modal-content">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
</div>
<div class="modal-body">
Expand All @@ -200,7 +200,7 @@ <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
<div class="modal-content">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
</div>
<div class="modal-body">
Expand Down Expand Up @@ -230,7 +230,7 @@ <h2 id="modals-related-target">Varying modal content based on trigger button</h2
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
Expand Down Expand Up @@ -263,7 +263,7 @@ <h4 class="modal-title" id="exampleModalLabel">New message</h4>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
Expand Down
6 changes: 3 additions & 3 deletions docs/_layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ <h1>{{ page.title }}</h1>
{{ 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 %}
Expand All @@ -53,7 +53,7 @@ <h1>{{ page.title }}</h1>
Preview theme
</a>
{% endif %}
</div>
</nav>
</div>
{% endunless %}
</div>
Expand Down