diff --git a/site/docs/4.5/components/forms.md b/site/docs/4.5/components/forms.md index 651046c270bc..4a8f62947097 100644 --- a/site/docs/4.5/components/forms.md +++ b/site/docs/4.5/components/forms.md @@ -258,7 +258,7 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl ### Without labels -Add `.position-static` to inputs within `.form-check` that don't have any label text. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`). +Add `.position-static` to inputs within `.form-check` that don't have any label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`). {% capture example %}
@@ -732,7 +732,9 @@ Add the `disabled` attribute to a `
` to disable all the controls withi {% capture callout %} ##### Caveat with anchors -By default, browsers will treat all native form controls (``, ``, ` -
+ +
Please provide a valid city.
- -
+
Please select a valid state.
- -
+ +
Please provide a valid zip.
- + -
+
You must agree before submitting.
diff --git a/site/docs/4.5/components/input-group.md b/site/docs/4.5/components/input-group.md index cdbfa794a69a..606bf4b75222 100644 --- a/site/docs/4.5/components/input-group.md +++ b/site/docs/4.5/components/input-group.md @@ -370,6 +370,15 @@ Input groups include support for custom selects and custom file inputs. Browser ## Accessibility -Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies. +Ensure that all form controls have an appropriate accessible name so that their purpose can be conveyed to users of assistive technologies. The simplest way to achieve this is to use a `