DEV Community

loading...

Discussion on: Accessibility is a priority

Collapse
inhuofficial profile image
InHuOfficial • Edited

Great article have a ❤🦄 and a follow!

One thing I would point out - the SVG in button with aria-label, although perfectly valid does cause issues with some screen readers (albeit more obscure / older ones).

powermapper.com/tests/screen-reade...

For maximum compatibility (getting that last 2% that matters) using visually hidden text is better. It has the added benefit that if someone is using a text only browser (very rare but still used by some braille keyboard / braille screen users....) the text will be accessible.

As such the following would be the best way to handle your buttons....

HTML

<button>
  <svg aria-hidden="true" focusable="false" ></svg>
  <span class="visually-hidden">Edit John Doe</span>
</button>
Enter fullscreen mode Exit fullscreen mode

CSS

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

Enter fullscreen mode Exit fullscreen mode

Notice as well that I add aria-hidden="true" and focusable="false" to the SVG. This is to correct an issue in Internet explorer where SVGs are focusable (it can cause some real confusion if you ever disable the button!)

Collapse
hichamelbsi profile image
ELABBASSI Hicham Author

Hi @inhuofficial , Thank you for the clarification on this point :)

Forem Open with the Forem app