diff options
| author | Christian Oliff <christianoliff@pm.me> | 2021-09-09 14:37:52 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-09-09 14:37:52 +0300 |
| commit | cb87ed2a7985744f042b663d2c87653ce68da476 (patch) | |
| tree | 148a7bcaf69b6dd8bfc437b5be970ab8658b47c6 /site/content/docs | |
| parent | f7c361f5538f0ea93badd1964b3d8b54d30ded86 (diff) | |
docs: Add role="switch" to switches (#34824)
* docs: Add role="switch" to switches
* Tweak/expand explanation about assistive technologies
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Diffstat (limited to 'site/content/docs')
| -rw-r--r-- | site/content/docs/5.1/forms/checks-radios.md | 10 |
1 files changed, 5 insertions, 5 deletions
diff --git a/site/content/docs/5.1/forms/checks-radios.md b/site/content/docs/5.1/forms/checks-radios.md index 0f5507f54b..efd040de03 100644 --- a/site/content/docs/5.1/forms/checks-radios.md +++ b/site/content/docs/5.1/forms/checks-radios.md @@ -102,23 +102,23 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty ## Switches -A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Switches also support the `disabled` attribute. +A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Consider using `role="switch"` to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the `disabled` attribute. {{< example >}} <div class="form-check form-switch"> - <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault"> + <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault"> <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label> </div> <div class="form-check form-switch"> - <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked> + <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked> <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label> </div> <div class="form-check form-switch"> - <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled> + <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled> <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label> </div> <div class="form-check form-switch"> - <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled> + <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled> <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label> </div> {{< /example >}} |