Skip to content

B
bootstrap
Commit a86f5d24 authored by Kevin Suttle's avatar Kevin Suttle
Browse files
Options

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
parent 63425cd8
Hide whitespace changes
Inline Side-by-side
Showing with 23 additions and 23 deletions
components.html
View file @ a86f5d24
......@@ -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>
......
css.html
View file @ a86f5d24
......@@ -1242,7 +1242,7 @@ For example, <code>&lt;section&gt;</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>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</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>&lt;section&gt;</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>&lt;section&gt;</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>&lt;section&gt;</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>&lt;section&gt;</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>&lt;section&gt;</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>&lt;section&gt;</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>
......
customize.html
View file @ a86f5d24
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment