mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

Add explicit aria-label to unlabeled controls

Browse Source 
- in particular, controls that just relied on `placeholder`, as this is still not officially/consistently supported as a valid way to provide an accessible name (though some browsers do use it as a fallback)
This commit is contained in:
Patrick H. Lauke
2020-03-22 22:33:33 +02:00
committed by XhmikosR
parent a68f73e754
commit 00ff5b83f9
5 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/4.3/forms/layout.md
+7 -7
View File
@@ -40,10 +40,10 @@ More complex forms can be built using our grid classes. Use these for form layou
{{< example >}}
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>
{{< /example >}}
@@ -55,10 +55,10 @@ By adding [gutter modifier classes]({{< docsref "/layout/grid#gutters" >}}), you
{{< example >}}
<div class="row g-3">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>
{{< /example >}}
@@ -204,13 +204,13 @@ As shown in the previous examples, our grid system allows you to place any numbe
{{< example >}}
<div class="row g-3">
<div class="col-sm-7">
<input type="text" class="form-control" placeholder="City">
<input type="text" class="form-control" placeholder="City" aria-label="City">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="State">
<input type="text" class="form-control" placeholder="State" aria-label="State">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="Zip">
<input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
</div>
</div>
{{< /example >}}