diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html index 8d42b27cec..5d9a2f9c07 100644 --- a/docs/_includes/components/input-groups.html +++ b/docs/_includes/components/input-groups.html @@ -19,7 +19,7 @@

Always add labels

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.

-

The exact technique to be used (<label> elements hidden using the .sr-only class, or use of the aria-label, aria-labelledby, aria-describedby, title or placeholder attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.

+

The exact technique to be used (visible <label> elements, <label> elements hidden using the .sr-only class, or use of the aria-label, aria-labelledby, aria-describedby, title or placeholder attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.

Basic example

@@ -42,6 +42,12 @@ .00 +
+ +
+ https://example.com/users/ + +
{% highlight html %}
@@ -59,6 +65,12 @@ .00
+ + +
+ https://example.com/users/ + +
{% endhighlight %}

Sizing