Ensure Accessibility on Icon Links

... automatically with a small client-side script

I am gradually saying goodbye to icon fonts in this blog in favor of SVG files, which I prefer to integrate using background-image in order to remain flexible.

During the modification, I noticed that although I have sometimes provided icon-only links with a title, these do not play any role in terms of accessibility. People who are dependent on a screen reader have not yet been able to recognize what these links are.

Where were two ways to change this: aria-label or add text and make it invisible. The former is basically just a crutch that is not even fully supported by all browsers and so only the invisible text remained. I found a suitable and very well-working solution on Stack Overflow by GrahamTheDev:

<a class="my-icon-link" title="My Link">
  <span class="visually-hidden">My Link</span>
</a>

.my-icon-link {
  background-image: url(/images/icons/my-icon.svg);
}

.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 */
}

My task was now to extend all textless icon links in the code with the SPAN ... or to find an automatism for this, because all these links already have a title and it is exactly what needs to be transferred to the link text. Since accessibility is not impaired when text is injected via JavaScript, I have found the following client-side solution, which is embedded in the footer of each page via script:

function ensureIconLinkText() {
  let linksWithoutText = document.querySelectorAll("a[href^='http']:empty");
  linksWithoutText.forEach(e => {
    if (window.getComputedStyle(e).display !== "none") {
      if (e.title) {
        let eText = document.createElement("span");
        eText.innerText = e.title;
        eText.classList.add("visually-hidden");
        e.append(eText);
      } else {
        console.error("Link without Text and Title: " + e.outerHTML);
      }
    }
  });
}

ensureIconLinkText();

The code in text form:
Find all A tags without text, run through them and if the element was not intentionally hidden and if a title is defined, create a new SPAN tag with its text value und insert this into the link, otherwise output an error in the console

With this approach, I can leave the links as they are and can see in the console whether I have forgotten a title somewhere.

The above is the detailed content of Ensure Accessibility on Icon Links. For more information, please follow other related articles on the PHP Chinese website!