Corrections/rewordings

- "icons SVGs" > "icon SVGs"
- add an `alt`, rather than an empty `alt=""` and a `title`, to the `<img>` example
- reword the focus handling issue
- remove the issue of VoiceOver skipping `<svg>` elements despite `aria-label` - this has been fixed on iOS and MacOS a few versions ago - testing the example provided there on simplyaccessible.com, the first example (which is supposedly broken) works perfectly
- reword the "browser inconsistency" example

1 files changed, 4 insertions, 6 deletions

diff --git a/docs/content/_index.md b/docs/content/_index.md
index c8eeafb74..2c4c52771 100644
--- a/docs/content/_index.md
+++ b/docs/content/_index.md
@@ -82,11 +82,11 @@ Use the SVG sprite to insert any icon through the `<use>` element. Use the icon'
   <div class="col-md-4">
 {{< md >}}
 ### External image
-Copy the Bootstrap icons SVGs to your directory of choice and reference them like normal images with the `<img>` element.
+Copy the Bootstrap icon SVGs to your directory of choice and reference them like normal images with the `<img>` element.
 {{< /md >}}
   </div>
   <div class="col-md-8">
-    {{< example >}}<img src="/assets/img/bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">{{< /example >}}
+    {{< example >}}<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">{{< /example >}}
   </div>
 </div>
 
@@ -162,11 +162,9 @@ SVGs are awesome to work with, but they do have some known quirks to work around
 {{< md >}}
 Known issues include:
 
-- **Focus handling is broken in Internet Explorer and Edge Legacy.** When embedding your SVGs, add `focusable="false"` to the `<svg>` element. [Learn more on Stack Overflow.](https://stackoverflow.com/questions/18646111/disable-onfocus-event-for-svg-element)
+- **SVGs receive focus by default in Internet Explorer and Edge Legacy.** When embedding your SVGs, add `focusable="false"` to the `<svg>` element. [Learn more on Stack Overflow.](https://stackoverflow.com/questions/18646111/disable-onfocus-event-for-svg-element)
 
-- **Browsers inconsistently announce SVGs as `<img>` tags with voice assistance.** Include `role="img"` when possible to avoid any issues. [See this article for details.](https://simplyaccessible.com/article/7-solutions-svgs/#acc-heading-2)
-
-- **Safari skips `aria-label` when used non-focusable SVGs.** As such, use `aria-hidden="true"` when embedding the `<svg>` file and use CSS to visually hide an equivalent label. [More details here.](https://simplyaccessible.com/article/7-solutions-svgs/#acc-heading-6)
+- **When using SVGs with `<img>` elements, screen readers may not announce them as images, or skip the image completely.** Include an additional `role="img"` on the `<img>` element to avoid any issues. [See this article for details.](https://simplyaccessible.com/article/7-solutions-svgs/#acc-heading-2)
 
 - **External SVG sprites may not function correctly in Internet Explorer.** Use the [svg4everybody](https://github.com/jonathantneal/svg4everybody) polyfill as needed.