Skip to content

Commit

Permalink
Merge pull request #15327 from patrickhlauke/docs-accessibility-tweaks2
Browse files Browse the repository at this point in the history 
More docs accessibility tweaks
  • Loading branch information
@patrickhlauke
patrickhlauke committed Dec 8, 2014
2 parents 1f6f95a + 285ec70 commit 7cff5bb
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 73 deletions.
94 changes: 49 additions & 45 deletions docs/_includes/components/input-groups.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,43 +16,47 @@ <h4>Tooltips &amp; popovers in input groups require special setting</h4>
<h4>Don't mix with other components</h4>
<p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
</div>

<div class="bs-callout bs-callout-warning" id="callout-inputgroup-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 input groups, ensure that any additional label or functionality is conveyed to assistive technologies.</p>
<p>The exact technique to be used (<code>&lt;label&gt;</code> elements hidden using the <code>.sr-only</code> class, or use of the <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-describedby</code>, <code>title</code> or <code>placeholder</code> attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.</p>
</div>

<h2 id="input-groups-basic">Basic example</h2>
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>
<p><strong class="text-danger">We do not support multiple add-ons on a single side.</strong></p>
<p><strong class="text-danger">We do not support multiple form-controls in a single input group.</strong></p>
<form class="bs-example bs-example-form" data-example-id="simple-input-groups">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
</form>
{% highlight html %}
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
{% endhighlight %}
Expand All @@ -61,34 +65,34 @@ <h2 id="input-groups-sizing">Sizing</h2>
<p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
<form class="bs-example bs-example-form" data-example-id="input-group-sizing">
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<br>
<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
</form>
{% highlight html %}
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
{% endhighlight %}

Expand All @@ -100,17 +104,17 @@ <h2 id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
<input type="checkbox" aria-label="Checkbox for following text input">
</span>
<input type="text" class="form-control">
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
<input type="radio" aria-label="Radio button for following text input">
</span>
<input type="text" class="form-control">
<input type="text" class="form-control" aria-label="Text input with radio button">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Expand All @@ -120,17 +124,17 @@ <h2 id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control">
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control">
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Expand All @@ -146,12 +150,12 @@ <h2 id="input-groups-buttons">Button addons</h2>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
Expand All @@ -166,12 +170,12 @@ <h2 id="input-groups-buttons">Button addons</h2>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
Expand All @@ -196,12 +200,12 @@ <h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
Expand Down Expand Up @@ -230,12 +234,12 @@ <h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
Expand All @@ -257,7 +261,7 @@ <h2 id="input-groups-buttons-segmented">Segmented buttons</h2>
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
<button type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
Expand All @@ -270,14 +274,14 @@ <h2 id="input-groups-buttons-segmented">Segmented buttons</h2>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
</div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
<button type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
Expand All @@ -299,11 +303,11 @@ <h2 id="input-groups-buttons-segmented">Segmented buttons</h2>
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control">
<input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
<input type="text" class="form-control">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
Expand Down
31 changes: 13 additions & 18 deletions docs/_includes/components/pagination.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,8 @@ <h2 id="pagination-default">Default pagination</h2>
<nav>
<ul class="pagination">
<li>
<a href="#">
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li><a href="#">1</a></li>
Expand All @@ -20,9 +19,8 @@ <h2 id="pagination-default">Default pagination</h2>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#">
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
Expand All @@ -32,9 +30,8 @@ <h2 id="pagination-default">Default pagination</h2>
<nav>
<ul class="pagination">
<li>
<a href="#">
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li><a href="#">1</a></li>
Expand All @@ -43,9 +40,8 @@ <h2 id="pagination-default">Default pagination</h2>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#">
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
Expand All @@ -57,20 +53,20 @@ <h3>Disabled and active states</h3>
<div class="bs-example" data-example-id="disabled-active-pagination">
<nav>
<ul class="pagination">
<li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ul class="pagination">
<li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
Expand All @@ -83,7 +79,6 @@ <h3>Disabled and active states</h3>
<li class="disabled">
<span>
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</span>
</li>
<li class="active">
Expand All @@ -100,35 +95,35 @@ <h3>Sizing</h3>
<div class="bs-example" data-example-id="pagination-sizing">
<nav>
<ul class="pagination pagination-lg">
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination">
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm">
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul>
</nav>
</div>
Expand Down
Loading

0 comments on commit 7cff5bb

Please sign in to comment.