diff options
Diffstat (limited to 'docs/_includes/components')
| -rw-r--r-- | docs/_includes/components/input-groups.html | 94 | ||||
| -rw-r--r-- | docs/_includes/components/pagination.html | 31 |
2 files changed, 62 insertions, 63 deletions
diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html index 8a07735d2..665c5b7cc 100644 --- a/docs/_includes/components/input-groups.html +++ b/docs/_includes/components/input-groups.html @@ -16,7 +16,11 @@ <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><label></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> @@ -24,35 +28,35 @@ <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 %} @@ -61,34 +65,34 @@ <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 %} @@ -100,17 +104,17 @@ <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 --> @@ -120,17 +124,17 @@ <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 --> @@ -146,12 +150,12 @@ <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> @@ -166,12 +170,12 @@ <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> @@ -196,12 +200,12 @@ <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"> @@ -230,12 +234,12 @@ <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"> @@ -257,7 +261,7 @@ <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> @@ -270,14 +274,14 @@ <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> @@ -299,11 +303,11 @@ <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> diff --git a/docs/_includes/components/pagination.html b/docs/_includes/components/pagination.html index 60485a587..46ee1f1ed 100644 --- a/docs/_includes/components/pagination.html +++ b/docs/_includes/components/pagination.html @@ -9,9 +9,8 @@ <nav> <ul class="pagination"> <li> - <a href="#"> + <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> - <span class="sr-only">Previous</span> </a> </li> <li><a href="#">1</a></li> @@ -20,9 +19,8 @@ <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> - <a href="#"> + <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> - <span class="sr-only">Next</span> </a> </li> </ul> @@ -32,9 +30,8 @@ <nav> <ul class="pagination"> <li> - <a href="#"> + <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> - <span class="sr-only">Previous</span> </a> </li> <li><a href="#">1</a></li> @@ -43,9 +40,8 @@ <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> - <a href="#"> + <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> - <span class="sr-only">Next</span> </a> </li> </ul> @@ -57,20 +53,20 @@ <div class="bs-example" data-example-id="disabled-active-pagination"> <nav> <ul class="pagination"> - <li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> + <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</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">»</span><span class="sr-only">Next</span></a></li> + <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li> </ul> </nav> </div> {% highlight html %} <nav> <ul class="pagination"> - <li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> + <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> ... </ul> @@ -83,7 +79,6 @@ <li class="disabled"> <span> <span aria-hidden="true">«</span> - <span class="sr-only">Previous</span> </span> </li> <li class="active"> @@ -100,35 +95,35 @@ <div class="bs-example" data-example-id="pagination-sizing"> <nav> <ul class="pagination pagination-lg"> - <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> + <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</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">»</span><span class="sr-only">Next</span></a></li> + <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li> </ul> </nav> <nav> <ul class="pagination"> - <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> + <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</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">»</span><span class="sr-only">Next</span></a></li> + <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li> </ul> </nav> <nav> <ul class="pagination pagination-sm"> - <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> + <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</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">»</span><span class="sr-only">Next</span></a></li> + <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li> </ul> </nav> </div> |