Stellen Sie sicher, dass die Symbollinks barrierefrei sind

...automatisch mit einem kleinen clientseitigen Skript

Ich verabschiede mich in diesem Blog nach und nach von Icon-Schriftarten und nutze SVG-Dateien, die ich lieber per Hintergrundbild einbinde, um flexibel zu bleiben.

Bei der Änderung ist mir aufgefallen, dass ich zwar teilweise nur Icon-Links mit einem Titel versehen habe, diese aber hinsichtlich der Barrierefreiheit keine Rolle spielen. Menschen, die auf einen Screenreader angewiesen sind, konnten diese Links bisher noch nicht erkennen.

Wo gab es zwei Möglichkeiten, dies zu ändern: Aria-Label oder Text hinzufügen und ihn unsichtbar machen. Ersteres ist im Grunde nur eine Krücke, die nicht einmal von allen Browsern vollständig unterstützt wird und so blieb nur der unsichtbare Text übrig. Eine passende und sehr gut funktionierende Lösung habe ich auf Stack Overflow von GrahamTheDev gefunden:

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

Meine Aufgabe bestand nun darin, alle textlosen Icon-Links im Code mit dem SPAN zu erweitern ... bzw. einen Automatismus dafür zu finden, da alle diese Links bereits einen Titel haben und dieser genau das ist, was benötigt wird in den Linktext übernommen werden. Da die Barrierefreiheit nicht beeinträchtigt wird, wenn Text über JavaScript eingefügt wird, habe ich die folgende clientseitige Lösung gefunden, die per Skript in den Footer jeder Seite eingebettet wird:

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

Der Code in Textform:
Suchen Sie alle A-Tags ohne Text, durchlaufen Sie sie und wenn das Element nicht absichtlich ausgeblendet wurde und wenn ein Titel definiert ist, erstellen Sie ein neues SPAN-Tag mit seinem Textwert und fügen Sie dieses in den Link ein, andernfalls wird ein Fehler ausgegeben Konsole

Mit dieser Vorgehensweise kann ich die Links so belassen, wie sie sind und kann in der Konsole sehen, ob ich irgendwo einen Titel vergessen habe.

Das obige ist der detaillierte Inhalt vonStellen Sie sicher, dass die Symbollinks barrierefrei sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!