diff options
| author | korki <korki43@gmx.de> | 2022-01-21 00:42:10 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-01-21 00:42:10 +0300 |
| commit | 7617a21b13768949b5e7b6880c1e9b33a41a6c17 (patch) | |
| tree | 3d3e208dea592a9c99fc948c97f07ef5a45d96b4 /docs | |
| parent | c76abc5488423ce7985e0ab15ac2f4c1dd636e30 (diff) | |
extend accessibility section (#1152)
* extend accessibility section
* Wordsmithing
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/content/_index.md | 6 |
1 files changed, 3 insertions, 3 deletions
diff --git a/docs/content/_index.md b/docs/content/_index.md index 6d3af60b5..07f511409 100644 --- a/docs/content/_index.md +++ b/docs/content/_index.md @@ -157,7 +157,7 @@ Color can be changed by setting a `.text-*` class or custom CSS: <div class="col-md-4"> {{< md >}} ## Accessibility -If the icons are not purely decorative, make sure you provide an appropriate text alternative. Depending on which method you're using to add the icons, and where you're using them (e.g. as standalone images, or as the only content of a button or similar control), there are various possible approaches. Here are a few examples: +For purely decorative icons, add `aria-hidden="true"`. Otherwise, provide an appropriate text alternative. Depending on which method you're using to add the icons, and where you're using them (e.g. as standalone images, or as the only content of a button or similar control), there are various possible approaches. Here are a few examples: {{< /md >}} </div> <div class="col-md-8"> @@ -186,13 +186,13 @@ If the icons are not purely decorative, make sure you provide an appropriate tex {{< /highlight >}} <div class="bd-example"> <button type="button" class="btn btn-primary" aria-label="Mute"> - <svg class="bi bi-volume-mute-fill" width="32" height="32" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M6.717 3.55A.5.5 0 017 4v8a.5.5 0 01-.812.39L3.825 10.5H1.5A.5.5 0 011 10V6a.5.5 0 01.5-.5h2.325l2.363-1.89a.5.5 0 01.529-.06zm7.137 2.096a.5.5 0 010 .708L12.207 8l1.647 1.646a.5.5 0 01-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 01-.708-.708L10.793 8 9.146 6.354a.5.5 0 11.708-.708L11.5 7.293l1.646-1.647a.5.5 0 01.708 0z"></path></svg> + <svg class="bi bi-volume-mute-fill" width="32" height="32" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6.717 3.55A.5.5 0 017 4v8a.5.5 0 01-.812.39L3.825 10.5H1.5A.5.5 0 011 10V6a.5.5 0 01.5-.5h2.325l2.363-1.89a.5.5 0 01.529-.06zm7.137 2.096a.5.5 0 010 .708L12.207 8l1.647 1.646a.5.5 0 01-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 01-.708-.708L10.793 8 9.146 6.354a.5.5 0 11.708-.708L11.5 7.293l1.646-1.647a.5.5 0 01.708 0z"></path></svg> </button> </div> {{< highlight html >}} <!-- aria-label="..." on the control --> <button ... aria-label="Mute"> - <svg class="bi bi-volume-mute-fill" ...> + <svg class="bi bi-volume-mute-fill" aria-hidden="true" ...> ... </svg> </button> |