Skip to content

Commit

Permalink
floating-labels: remove aria-label in the select example (twbs#35327)
Browse files Browse the repository at this point in the history
While it is understood that this is just an example, the visible text (label) of "Works with selects" and the `aria-label="Floating label select example"` created a [WCAG 2.5.3 Label in name](https://www.w3.org/WAI/WCAG21/quickref/#label-in-name) failure.  

As the `aria-label` isn't necessary here since this `select` is already provided an accessible name by its `label` element, removing the unnecessary `aria-label` seems the best course of action as:
* removing it solves the WCAG issue 
* it removes the potential implication to developers that they'd even _need_ an `aria-label` here, let alone indirectly suggesting that it's ok for the visible text and accessible name to be out of alignment
  • Loading branch information
scottaohara authored Nov 9, 2021
1 parent 31998df commit e958cd2
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion site/content/docs/5.1/forms/floating-labels.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ When working with the Bootstrap grid system, be sure to place form elements with
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
<select class="form-select" id="floatingSelectGrid">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
Expand Down

0 comments on commit e958cd2

Please sign in to comment.