确保图标链接的可访问性

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

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();