mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Give forms and search fields proper ARIA roles
http://blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/#tablex http://www.w3.org/TR/wai-aria/roles#form http://www.w3.org/TR/wai-aria/roles#search
This commit is contained in:
Kevin Suttle
parent
63425cd804
commit
a86f5d24f8
3 changed files with 23 additions and 23 deletions
|
|
@ -532,7 +532,7 @@ base_url: "../"
|
|||
</div>
|
||||
|
||||
<h2 id="input-groups-basic">Basic input group</h2>
|
||||
<form class="bs-example bs-example-form">
|
||||
<form class="bs-example bs-example-form" role="form">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
|
|
@ -569,7 +569,7 @@ base_url: "../"
|
|||
|
||||
<h2 id="input-groups-sizes">Optional sizes</h2>
|
||||
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
|
||||
<form class="bs-example bs-example-form">
|
||||
<form class="bs-example bs-example-form" role="form">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon input-lg">@</span>
|
||||
<input type="text" class="form-control input-lg" placeholder="Username">
|
||||
|
|
@ -692,7 +692,7 @@ base_url: "../"
|
|||
|
||||
<h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
|
||||
<p></p>
|
||||
<form class="bs-example bs-example-form">
|
||||
<form class="bs-example bs-example-form" role="form">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
|
|
@ -762,7 +762,7 @@ base_url: "../"
|
|||
{% endhighlight %}
|
||||
|
||||
<h2 id="input-groups-buttons-segmented">Segmented dropdown groups</h2>
|
||||
<form class="bs-example bs-example-form">
|
||||
<form class="bs-example bs-example-form" role="form">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
|
|
@ -1083,14 +1083,14 @@ base_url: "../"
|
|||
<div class="bs-example">
|
||||
|
||||
<nav class="navbar" role="navigation">
|
||||
<form class="navbar-form pull-left">
|
||||
<form class="navbar-form pull-left" role="form">
|
||||
<input type="text" class="form-control" style="width: 200px;">
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar" role="navigation">
|
||||
<form class="navbar-form pull-left">
|
||||
<form class="navbar-form pull-left" role="form">
|
||||
<select name="" id="" class="form-control" style="width: 200px;">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
|
|
@ -1102,7 +1102,7 @@ base_url: "../"
|
|||
</nav>
|
||||
|
||||
<nav class="navbar" role="navigation">
|
||||
<form class="navbar-form pull-left">
|
||||
<form class="navbar-form pull-left" role="form">
|
||||
<input type="text" class="form-control" style="width: 200px;">
|
||||
<input type="checkbox">
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
|
|
@ -1110,7 +1110,7 @@ base_url: "../"
|
|||
</nav>
|
||||
|
||||
<nav class="navbar" role="navigation">
|
||||
<form class="navbar-form pull-left">
|
||||
<form class="navbar-form pull-left" role="form">
|
||||
<input type="text" class="form-control" style="width: 200px;">
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox"> Remember me
|
||||
|
|
@ -1121,7 +1121,7 @@ base_url: "../"
|
|||
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<form class="navbar-form pull-left">
|
||||
<form class="navbar-form pull-left" role="form">
|
||||
<input type="text" class="form-control" style="width: 200px;">
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
|
|
@ -1285,8 +1285,8 @@ body { padding-bottom: 70px; }
|
|||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form pull-left" action="">
|
||||
<input type="text" class="form-control col-lg-8" placeholder="Search">
|
||||
<form class="navbar-form pull-left" action="" role="form">
|
||||
<input type="text" class="form-control col-lg-8" placeholder="Search" role="search">
|
||||
</form>
|
||||
<ul class="nav navbar-nav pull-right">
|
||||
<li><a href="#">Link</a></li>
|
||||
|
|
@ -1355,8 +1355,8 @@ body { padding-bottom: 70px; }
|
|||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
<form class="navbar-form pull-left" action="">
|
||||
<input type="text" class="form-control col-lg-8" placeholder="Search">
|
||||
<form class="navbar-form pull-left" action="" role="form">
|
||||
<input type="text" class="form-control col-lg-8" placeholder="Search" role="search">
|
||||
</form>
|
||||
</div><!-- /.nav-collapse -->
|
||||
</div><!-- /.container -->
|
||||
|
|
@ -1405,8 +1405,8 @@ body { padding-bottom: 70px; }
|
|||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form pull-left" action="">
|
||||
<input type="text" class="form-control col-lg-8" placeholder="Search">
|
||||
<form class="navbar-form pull-left" action="" role="form">
|
||||
<input type="text" class="form-control col-lg-8" placeholder="Search" role="search">
|
||||
</form>
|
||||
<ul class="nav navbar-nav pull-right">
|
||||
<li><a href="#">Link</a></li>
|
||||
|
|
|
|||
14
css.html
14
css.html
|
|
@ -1242,7 +1242,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
|
||||
<h2 id="forms-example">Basic example</h2>
|
||||
<p>Individual form controls automatically receive some global styling. All textual <code><input></code>, <code><textarea></code>, and <code><select></code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
|
||||
<form class="bs-example">
|
||||
<form class="bs-example" role="form">
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
<div class="form-group">
|
||||
|
|
@ -1267,7 +1267,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</fieldset>
|
||||
</form><!-- /example -->
|
||||
{% highlight html %}
|
||||
<form>
|
||||
<form role="form">
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
<div class="form-group">
|
||||
|
|
@ -1304,7 +1304,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<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 forms, you can hide the labels using the <code>.sr-only</code> class.</p>
|
||||
</div>
|
||||
<form class="bs-example form-inline">
|
||||
<form class="bs-example form-inline" role="form">
|
||||
<label class="sr-only" for="exampleInputEmail">Email address</label>
|
||||
<input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
|
||||
<label class="sr-only" for="exampleInputPassword">Password</label>
|
||||
|
|
@ -1317,7 +1317,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<button type="submit" class="btn btn-default">Sign in</button>
|
||||
</form><!-- /example -->
|
||||
{% highlight html %}
|
||||
<form class="form-inline">
|
||||
<form class="form-inline" role="form">
|
||||
<label class="sr-only" for="exampleInputEmail">Email address</label>
|
||||
<input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
|
||||
<label class="sr-only" for="exampleInputPassword">Password</label>
|
||||
|
|
@ -1362,7 +1362,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</div>
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<form class="form-horizontal">
|
||||
<form class="form-horizontal" role="form">
|
||||
<div class="form-group">
|
||||
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
|
||||
<div class="col-lg-10">
|
||||
|
|
@ -1544,7 +1544,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</div>
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<form class="form-horizontal">
|
||||
<form class="form-horizontal" role="form">
|
||||
<div class="form-group">
|
||||
<label for="inputEmail2" class="col-lg-2 control-label">Email</label>
|
||||
<div class="col-lg-10">
|
||||
|
|
@ -1616,7 +1616,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</fieldset>
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<form class="form-inline">
|
||||
<form class="form-inline" role="form">
|
||||
<fieldset disabled>
|
||||
<div class="form-group">
|
||||
<label for="disabledInput">Disabled input</label>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ base_url: "../"
|
|||
|
||||
<!-- Customize
|
||||
================================================== -->
|
||||
<form class="bs-customizer">
|
||||
<form class="bs-customizer" role="form">
|
||||
<div class="bs-docs-section" id="less-section">
|
||||
<div class="page-header">
|
||||
<button class="btn btn-default toggle" type="button">Toggle all</button>
|
||||
|
|
|
|||
Loading…
Reference in a new issue