diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2020-06-21 14:07:20 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2020-07-11 02:00:50 +0300 |
commit | 3a79335a0b21cc5bbd3f133e63aec6052694fc20 (patch) | |
tree | 9285fc2b764d7f809cb814e47bfeb607b7a5b870 /site/content/docs/5.0/forms | |
parent | 49934b2bba514582c92bd423f94ddbf890bc3a66 (diff) |
Docs: rename "Screen readers" helper page to "Visually hidden"
"screen readers" is quite reductive, as there are other assistive technologies. content hidden this way is even announced by things like Alexa/Siri etc, so it's not so much just "screen readers".
in the long run, we may even consider changing the actual classnames (maybe `.visually-hidden` / `.visually-hidden-focusable`, though admittedly that's a bit verbose).
also includes a tiny tweak to layout.md to generalise the note about using `.sr-only`
Diffstat (limited to 'site/content/docs/5.0/forms')
-rw-r--r-- | site/content/docs/5.0/forms/layout.md | 2 |
1 files changed, 1 insertions, 1 deletions
diff --git a/site/content/docs/5.0/forms/layout.md b/site/content/docs/5.0/forms/layout.md index a97a7e9e5a..3a4d0e7fa1 100644 --- a/site/content/docs/5.0/forms/layout.md +++ b/site/content/docs/5.0/forms/layout.md @@ -297,7 +297,7 @@ You can then remix that once again with size-specific column classes. Use the `.col-auto` class to create horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly. -Be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.visually-hidden`. +Be sure to always include a `<label>` with each form control, even if you need to visually hide it with `.visually-hidden` (which still keeps it available to assistive technologies such as screen readers). {{< example >}} <form class="row row-cols-md-auto g-3 align-items-center"> |