Beri setiap simbol yang berulang elemen SVG luar sendiri dengan nama aksesibel, sambil hanya menggunakan ulang gambar di dalamnya. Panduan ini menunjukkan cara membuat daftar grafik berlabel sederhana di Mac dan memisahkan tata letak halaman, koordinat SVG, serta pemberian nama aksesibel.

Untuk grafik sederhana, MDN menyarankan menambahkan role="img" dan label ke SVG luar agar teknologi bantu dapat memperlakukannya sebagai satu gambar. Pola praktis di sini adalah satu pembungkus untuk setiap kemunculan, masing-masing merujuk ke labelnya sendiri. Peran ARIA: img

Di mana label aksesibel untuk setiap instans sebaiknya ditempatkan?

Letakkan nama pada elemen yang mewakili kemunculan tersebut. Jika beberapa grafik terpisah menggunakan satu simbol yang sama, beri setiap svg luar referensi aria-labelledby atau aria-label sendiri. Pertahankan simbol bersama agar hanya berisi geometri yang dapat digunakan ulang.

Ini mengikuti perbedaan antara definisi dan instans yang dirender. Elemen SVG use merujuk ke grafik dan merender konten yang digunakan ulang melalui pohon bayangan; bentuk yang dihasilkan bukan simpul anak biasa dalam DOM halaman. Jadi, penggunaan ulang gambar tidak membuat salinan label internalnya yang dapat diedit secara terpisah di HTML Anda. Struktur Dokumen — SVG 2

Judul yang disimpan di dalam simbol bersama juga tidak dapat menyediakan teks berbeda untuk setiap kemunculan tanpa mekanisme penamaan lain. Misalnya, gambar ubin netral yang sama dapat mewakili Sample Alpha di satu tempat dan Sample Beta di tempat lain. Nama-nama itu sebaiknya dikaitkan dengan kedua kemunculan tersebut, meskipun geometrinya identik.

Pilih metode penamaan sesuai dengan tempat teks yang berguna sudah tersedia:

Situasi Pola yang disarankan
Takarir singkat yang terlihat memberi nama pada grafik Rujuk ID uniknya dengan aria-labelledby pada SVG luar.
Grafik memerlukan nama, tetapi tidak memiliki takarir yang terlihat Letakkan title unik di dalam setiap SVG luar dan rujuk dengan aria-labelledby, atau gunakan aria-label.
Grafik hanya menghias teks yang sudah menyampaikan semua informasi Sembunyikan SVG dari teknologi bantu alih-alih menambahkan nama yang berulang.
Beberapa kemunculan harus tetap dapat ditemukan satu per satu Hindari mengelompokkan semuanya ke dalam satu gambar role="img" luar.

MDN menyarankan untuk merujuk teks yang terlihat jika teks tersebut dapat memberi nama pada SVG. Dokumentasi peran gambarnya juga menjelaskan bahwa role="img" menyajikan konten sebagai satu kesatuan, sehingga batas pembungkus menjadi penting. Elemen nama aksesibel SVG, Peran ARIA: img

Buat halaman lengkap dengan dua instans yang memiliki nama berbeda

Contoh berikut adalah dokumen HTML lengkap yang hanya berisi teks sintetis dan gambar lingkaran serta persegi sederhana. Contoh ini tidak memerlukan JavaScript, sprite eksternal, pustaka, atau proses build. Di Mac, simpan sebagai symbol-labels.html dari editor kode teks biasa, lalu buka berkas tersebut di browser desktop.

Kedua kemunculan merujuk ke tile-mark, tetapi SVG luarnya merujuk ke takarir terlihat yang berbeda. Ini menggunakan pola penamaan berbasis teks terlihat yang didokumentasikan MDN. Atribut href adalah mekanisme referensi SVG saat ini; MDN mendokumentasikan xlink:href sebagai atribut yang sudah usang. Elemen nama aksesibel SVG, Elemen use SVG

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Independently labeled SVG instances</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      color: #222;
    }
    .sprite {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }
    .samples {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      max-width: 36rem;
      padding: 0;
      list-style: none;
    }
    .sample {
      padding: 1rem;
      border: 1px solid #777;
    }
    .sample svg {
      display: block;
      width: 5rem;
      height: 5rem;
      margin-bottom: 0.75rem;
    }
    @media (max-width: 30rem) {
      .samples { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <svg class="sprite" xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true">
    <defs>
      <symbol id="tile-mark" viewBox="0 0 48 48">
        <rect x="4" y="4" width="40" height="40" rx="6"
              fill="none" stroke="currentColor" stroke-width="2" />
        <circle cx="24" cy="24" r="9" fill="currentColor" />
      </symbol>
    </defs>
  </svg>

  <h1>Sample tiles</h1>
  <ul class="samples">
    <li class="sample">
      <svg xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 48 48" role="img"
           aria-labelledby="sample-alpha-label">
        <use href="#tile-mark" width="48" height="48"
             aria-hidden="true" />
      </svg>
      <span id="sample-alpha-label">Sample Alpha</span>
    </li>
    <li class="sample">
      <svg xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 48 48" role="img"
           aria-labelledby="sample-beta-label">
        <use href="#tile-mark" width="48" height="48"
             aria-hidden="true" />
      </svg>
      <span id="sample-beta-label">Sample Beta</span>
    </li>
  </ul>
</body>
</html>

Nama aksesibel yang diharapkan adalah Sample Alpha dan Sample Beta. Ini adalah hasil yang diharapkan dari markup, bukan hasil pengujian browser yang dilaporkan. Gambar di dalam setiap pembungkus secara eksplisit disembunyikan dari teknologi bantu; SVG luar yang memiliki nama tetap terekspos. Pemetaan aksesibilitas SVG membedakan turunan yang tersembunyi dari induknya yang terekspos. Pemetaan API Aksesibilitas SVG

Saat menambahkan kemunculan ketiga, gunakan ulang href="#tile-mark", buat ID takarir baru, dan perbarui aria-labelledby pada kemunculan tersebut agar sesuai. Pertahankan referensi simbol agar tetap sama dan referensi label agar khusus untuk tiap kemunculan.

Takarir terlihat juga dapat ditemukan secara terpisah saat dibacakan oleh pembaca layar. Jika ubin tidak menambahkan informasi di luar takarirnya, gunakan pola dekoratif sebagai gantinya: hapus role="img" dan aria-labelledby dari SVG luar, lalu tambahkan aria-hidden="true" padanya. Pertahankan takarir yang terlihat. Pemetaan SVG mendokumentasikan pengecualian melalui aria-hidden. Pemetaan API Aksesibilitas SVG

Mekanisme browser mana yang mengatur tiap bagian tata letak?

Contoh ini memiliki tiga tugas terpisah: menata kartu, menggambar simbol, dan menghitung nama aksesibel. Mengubah salah satunya tidak otomatis menjalankan tugas yang lain.

CSS Grid menata item daftar HTML. Deklarasi display: grid menjadikan anak langsung kontainer sebagai item grid; grid-template-columns menentukan kolom. Di sini, kueri media mengubah daftar dari dua kolom menjadi satu. Ini memengaruhi tata letak kartu di halaman. Konsep dasar tata letak grid

Koordinat SVG mengatur bentuk di dalam setiap grafik. viewBox="0 0 48 48" pada simbol menetapkan persegi koordinatnya, sedangkan dimensi elemen use menentukan ukuran area pandang simbol yang dirujuk. Dimensi tersebut tidak membuat kolom kartu HTML atau jarak takarir. SVG 2 secara eksplisit membedakan tata letak grafik yang digunakan ulang dari tata letak kotak CSS. Struktur Dokumen — SVG 2

Pemberian nama aksesibel mengaitkan setiap SVG luar dengan teks melalui aria-labelledby. Atribut ini tidak menggambar teks, mengatur posisi takarir, atau mengubah ukuran grafik. Panduan penamaan W3C menjelaskan bahwa atribut ini merujuk ke konten yang digunakan untuk menghitung nama aksesibel. Memberikan Nama dan Deskripsi Aksesibel

Pemisahan ini memberi Anda aturan diagnosis yang berguna: periksa Grid jika posisi kartu salah, koordinat SVG jika posisi gambar salah, dan referensi penamaan jika labelnya salah. Menambahkan x atau y ke use menggeser grafik yang digunakan ulang di dalam ruang SVG; tindakan ini tidak memindahkan takarir HTML. Selain itu, dimensi use bukan pengganti umum untuk mengubah ukuran bentuk sembarang yang dirujuk: MDN mendokumentasikan efeknya saat merujuk SVG atau simbol dengan viewBox. Elemen use SVG

Bagaimana jika tidak ada takarir yang terlihat?

Gunakan judul per instans saat grafik memerlukan nama, tetapi desainnya tidak memiliki teks terlihat yang sesuai. Berikut fragmen pengganti untuk SVG terlihat pertama pada contoh lengkap. Fragmen ini tetap bergantung pada simbol tile-mark yang sudah ada:

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48" role="img"
     aria-labelledby="sample-alpha-title">
  <title id="sample-alpha-title">Sample Alpha</title>
  <use href="#tile-mark" width="48" height="48"
       aria-hidden="true" />
</svg>

Untuk setiap kemunculan tambahan, beri judul ID yang berbeda dan perbarui referensi induknya. MDN mendokumentasikan title sebagai elemen pemberian nama aksesibel SVG dan menyarankan agar elemen ini ditempatkan paling awal demi kompatibilitas dengan SVG 1.1. Teks judul tidak dirender secara kasatmata sebagai bagian dari gambar, meskipun browser biasanya menampilkannya sebagai tooltip. Elemen nama aksesibel SVG

Untuk nama singkat tanpa elemen judul, ganti aria-labelledby dengan aria-label="Sample Alpha" pada SVG luar kemunculan tersebut. Hindari membiarkan atribut penamaan yang saling bersaing: W3C mendokumentasikan bahwa aria-labelledby memiliki prioritas atas aria-label. Referensi yang tertinggal dapat mencegah string baru menjadi nama. Memberikan Nama dan Deskripsi Aksesibel

Jangan mencoba menetapkan judul khusus untuk suatu kemunculan dengan mengedit klona yang dihasilkan. SVG 2 menetapkan bahwa pohon bayangan instans bersifat hanya-baca. Draf Pemetaan API Aksesibilitas SVG saat ini juga membatasi pencocokan referensi ID ARIA ke dalam pohon bayangan use. Ini adalah batasan yang terdokumentasi; hal ini bukan bukti bahwa semua browser menerapkan perilaku yang sama. Dengan menempatkan label pada pembungkus yang ditulis dalam markup, Anda tidak perlu bergantung pada pencarian di dalam klona. Struktur Dokumen — SVG 2, Pemetaan API Aksesibilitas SVG

Bagaimana cara memeriksa dan memecahkan masalah hasilnya?

Periksa hasil visual dan nama aksesibelnya secara terpisah di browser Mac Anda. Periksa setiap SVG luar melalui alat aksesibilitas browser, lalu uji dengan VoiceOver. W3C secara khusus menyarankan pengujian dengan teknologi bantu untuk nama yang dihitung melalui aria-labelledby. Memberikan Nama dan Deskripsi Aksesibel

Gunakan hasil yang diharapkan berikut sebagai daftar periksa penerimaan sederhana:

  1. Kedua gambar tampil bersama takarir terlihat masing-masing.
  2. Setiap SVG luar memiliki peran gambar dan nama yang sesuai.
  3. Definisi simbol tidak muncul sebagai grafik bermakna tambahan.
  4. Mempersempit jendela mengubah susunan kartu, sementara setiap grafik tetap memiliki labelnya.
  5. Mengubah takarir kedua saja hanya mengubah nama hasil perhitungan untuk grafik kedua.

Jika kedua grafik mendapat nama yang sama, periksa nilai aria-labelledby masing-masing terlebih dahulu. Lalu pastikan setiap ID yang dirujuk menunjuk ke teks yang dimaksud. Jangan menganggap kedekatan visual menentukan hubungan tersebut: atribut ini secara eksplisit merujuk ke elemen berdasarkan ID. Memberikan Nama dan Deskripsi Aksesibel

Jika seluruh gambar diumumkan sebagai satu gambar, padahal Anda memerlukan beberapa gambar terpisah, periksa posisi role="img". Satu peran gambar yang melingkupi seluruh koleksi meminta teknologi bantu untuk memperlakukan koleksi tersebut sebagai satu kesatuan. Gunakan pembungkus gambar terpisah untuk grafik sederhana yang terpisah. Peran ARIA: img

Jika Anda sebenarnya menyematkan berkas SVG melalui HTML img, gunakan atribut alt pada elemen tersebut untuk setiap kemunculan. WHATWG mendefinisikan alt sebagai konten pengganti yang setara untuk gambar tersebut. SVG sebaris menggunakan mekanisme penamaan yang berbeda dan tidak mendukung alt sebagai atribut teks alternatifnya. Standar HTML: Elemen img, Pengantar SVG dalam HTML

Untuk tugas tata letak ini, gunakan satu definisi gambar bersama dan satu pilihan penamaan untuk setiap kemunculan. Pilih pembungkus sesuai dengan apa yang perlu ditemukan pembaca, hubungkan dengan teks yang sesuai, lalu verifikasi nama aksesibel yang dihasilkan secara terpisah dari tata letak visual.

Sumber