Use aria-labelledby to associate form-text (helper) with input field … (#37587)

* Use aria-labelledby to associate form-text (helper) with input field when it contains mandatory info (e.g. data format)

* Example in input-group needs aria-describedby (or aria-labelledby) too

Co-authored-by: Mark Otto <markdotto@gmail.com>

diff --git a/site/content/docs/5.3/forms/input-group.md b/site/content/docs/5.3/forms/input-group.md
index 01be5cffed592c1d13aa2675f74efcb2ff48e2b7..59b478d4c140837a5d7a0318663c06fde93c6f62 100644 (file)
--- a/site/content/docs/5.3/forms/input-group.md
+++ b/site/content/docs/5.3/forms/input-group.md
@@ -25,9 +25,9 @@ Place one add-on or button on either side of an input. You may also place one on
   <label for="basic-url" class="form-label">Your vanity URL</label>
   <div class="input-group">
     <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
-    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3 basic-addon4">
   </div>
-  <div class="form-text">Example help text goes outside the input group.</div>
+  <div class="form-text" id="basic-addon4">Example help text goes outside the input group.</div>
 </div>
 
 <div class="input-group mb-3">

diff --git a/site/content/docs/5.3/forms/overview.md b/site/content/docs/5.3/forms/overview.md
index 9e54a08bd9af00b7d77e4913d0487d3aec6ae8d2..3ed7081137dc0acfe8fc909efe0fc0d59b330921 100644 (file)
--- a/site/content/docs/5.3/forms/overview.md
+++ b/site/content/docs/5.3/forms/overview.md
@@ -58,14 +58,15 @@ Block-level or inline-level form text can be created using `.form-text`.
 {{< callout warning >}}
 ##### Associating form text with form controls
 
-Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
+Form text should be explicitly associated with the form control it relates to using the `aria-labelledby` (for mandatory information such as data format) or `aria-describedby` (for complementary information) attribute.
+This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
 {{< /callout >}}
 
 Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
 
 {{< example >}}
 <label for="inputPassword5" class="form-label">Password</label>
-<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
+<input type="password" id="inputPassword5" class="form-control" aria-labelledby="passwordHelpBlock">
 <div id="passwordHelpBlock" class="form-text">
   Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
 </div>
@@ -79,7 +80,7 @@ Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`
     <label for="inputPassword6" class="col-form-label">Password</label>
   </div>
   <div class="col-auto">
-    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
+    <input type="password" id="inputPassword6" class="form-control" aria-labelledby="passwordHelpInline">
   </div>
   <div class="col-auto">
     <span id="passwordHelpInline" class="form-text">