Pastikan Kebolehcapaian pada Pautan Ikon

... secara automatik dengan skrip kecil sisi klien

Saya secara beransur-ansur mengucapkan selamat tinggal kepada fon ikon dalam blog ini yang memihak kepada fail SVG, yang saya lebih suka untuk menyepadukan menggunakan imej latar belakang untuk kekal fleksibel.

Semasa pengubahsuaian, saya mendapati bahawa walaupun kadangkala saya telah menyediakan pautan ikon sahaja dengan tajuk, ini tidak memainkan sebarang peranan dari segi kebolehaksesan. Orang yang bergantung kepada pembaca skrin masih belum dapat mengenali pautan ini.

Di manakah dua cara untuk menukar ini: aria-label atau tambah teks dan jadikannya tidak kelihatan. Yang pertama pada dasarnya hanyalah tongkat yang tidak disokong sepenuhnya oleh semua pelayar dan hanya teks yang tidak kelihatan yang tinggal. Saya menemui penyelesaian yang sesuai dan berfungsi dengan baik pada Stack Overflow oleh 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 */
}

Tugas saya sekarang ialah memanjangkan semua pautan ikon tanpa teks dalam kod dengan SPAN ... atau mencari automatisme untuk ini, kerana semua pautan ini sudah mempunyai tajuk dan itulah yang diperlukan untuk dipindahkan ke teks pautan. Memandangkan kebolehaksesan tidak terjejas apabila teks disuntik melalui JavaScript, saya telah menemui penyelesaian sebelah klien berikut, yang dibenamkan dalam pengaki setiap halaman melalui skrip:

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

Kod dalam bentuk teks:
Cari semua teg A tanpa teks, jalankan melaluinya dan jika elemen itu tidak sengaja disembunyikan dan jika tajuk ditakrifkan, buat teg SPAN baharu dengan nilai teksnya dan masukkan ini ke dalam pautan, jika tidak, keluarkan ralat dalam konsol

Dengan pendekatan ini, saya boleh meninggalkan pautan seperti sedia ada dan boleh melihat dalam konsol sama ada saya terlupa tajuk di suatu tempat.

Atas ialah kandungan terperinci Pastikan Kebolehcapaian pada Pautan Ikon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!