Berikan setiap simbol berulang SVG luarnya sendiri dengan nama aksesibel, sambil menggunakan semula hanya lukisan di dalamnya. Panduan ini menunjukkan cara membina senarai grafik berlabel kecil pada Mac dan mengekalkan susun atur halaman, koordinat SVG, dan penamaan aksesibel berasingan.

Bagi grafik mudah, MDN menyarankan meletakkan role="img" dan label pada SVG luar supaya teknologi bantu boleh mengurusnya sebagai satu imej. Pola praktikal di sini adalah satu pembungkus untuk setiap kemunculan, setiap satu merujuk labelnya sendiri. Peranan ARIA: img

Di mana label aksesibel setiap contoh harus diletakkan?

Letakkan nama pada elemen yang mewakili kemunculan tertentu itu. Apabila beberapa grafik berasingan menggunakan semula satu simbol, berikan setiap svg luar rujukan aria-labelledby sendiri atau aria-label. Biarkan simbol perkongsian tertumpu pada geometri boleh guna semula.

Ini mengikuti perbezaan antara definisi dan contoh yang direndernya. Elemen use SVG merujuk grafik dan merender kandungan guna semula melalui pokok bayangan; bentuk-bentuk yang dijana bukan nod anak biasa dalam DOM halaman. Menggunakan semula lukisan itu tidak mencipta salinan boleh edit secara berasingan label dalamannya dalam HTML anda. Struktur Dokumen — SVG 2

Tajuk yang disimpan di dalam simbol perkongsian juga tidak boleh menyediakan teks berbeza untuk kemunculan berbeza tanpa mekanisme penamaan lain. Contohnya, lukisan tulin neutral yang sama mungkin mewakili Sample Alpha di satu tempat dan Sample Beta di tempat lain. Nama-nama itu berada dengan dua kemunculan, walaupun geometrinya serupa.

Pilih kaedah penamaan mengikut di mana teks yang berguna sudah wujud:

Situasi Pola disyorkan
Keterangan ringkas nampak menamakan grafik Rujuk ID uniknya dengan aria-labelledby pada SVG luar.
Grafik memerlukan nama tetapi tiada keterangan nampak 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 Sembunyikan SVG dari teknologi bantu berbanding menambah nama berulang.
Beberapa kemunculan mesti kekal boleh jumpai secara berasingan Elak mengumpulkan kesemuanya ke dalam satu role="img" imej luar.

MDN menyarankan merujuk teks nampak apabila ia boleh menamakan SVG. Dokumentasi peranan imejnya juga menjelaskan bahawa role="img" memaparkan kandungan sebagai satu entiti, itulah sebabnya sempadan pembungkus penting. Elemen nama aksesibel SVG, Peranan ARIA: img

Bangun halaman lengkap dengan dua contoh bernama bebas

Contoh berikut adalah dokumen HTML lengkap yang mengandungi hanya teks sintetik dan lukisan bulatan-persegi mudah. Ia tidak memerlukan JavaScript, sprite luaran, pustaka, atau proses binaan. Pada Mac anda, simpan dari penyunting kod teks biasa sebagai symbol-labels.html, kemudian buka fail di pelayar desktop.

Dua-dua kemunculan merujuk tile-mark, tetapi SVG luar mereka merujuk keterangan nampak yang berbeza. Ini menggunakan pola penamaan teks nampak yang didokumentasikan oleh MDN. Atribut href ialah mekanisme rujukan SVG semasa; MDN mendokumentasikan xlink:href sebagai terhapus. 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 ditujukan ialah Sample Alpha dan Sample Beta. Ini adalah keputusan dijangka daripada penandaan, bukan keputusan ujian pelayar yang dilaporkan. Lukisan di dalam setiap pembungkus disembunyikan secara eksplisit dari teknologi bantu; SVG luar yang dinamakan kekal terdedah. Pemetaan aksesibiliti SVG membezakan anak cucu tersembunyi daripada induk terdedahnya. Pemetaan API Aksesibiliti SVG

Apabila menambah kemunculan ketiga, guna semula href="#tile-mark", cipta ID keterangan baru, dan kemas kini aria-labelledby kemunculan itu untuk sepadan. Kongsikan rujukan simbol dan rujuk label khusus untuk kemunculan.

Keterangan nampak juga boleh ditemui secara berasingan semasa pembacaan pembaca skrin. Jika tulin tidak menambah maklumat di luar keterangannya, gunakan pola hiasan: buang role="img" dan aria-labelledby daripada SVG luar, kemudian berikan aria-hidden="true". Simpan keterangan nampak. Dokumen pemetaan mengecualikan melalui aria-hidden. Pemetaan API Aksesibiliti SVG

Mekanisme pelayar mana yang mengawal setiap bahagian susun atur?

Terdapat tiga kerja berasingan dalam contoh ini: mengatur kad, melukis simbol, dan mengira nama aksesibel. Mengubah satu tidak melaksanakan yang lain secara automatik.

Grid CSS mengatur item-item senarai HTML. Mendeklarasikan display: grid menjadikan anak-anak langsung penampung item grid; grid-template-columns mentakrifkan lajur. Di sini, pertanyaan media menukar senarai daripada dua lajur ke satu. Ini menyentuh susun atur kad halaman. Konsep asas susun atur grid

Koordinat SVG mengawal bentuk di dalam setiap grafik. viewBox="0 0 48 48" simbol menubuhkan petak koordinatnya, dan dimensi elemen use menentukan saiz viewport simbol yang dirujuk. Dimensi-dimensi itu tidak mencipta lajur kad HTML atau ruang keterangan. SVG 2 secara eksplisit membezakan susun atur grafik guna semula daripada susun atur kotak CSS. Struktur Dokumen — SVG 2

Penamaan aksesibel mengaitkan setiap SVG luar dengan teks melalui aria-labelledby. Ia tidak melukis teks, meletakkan keterangan, atau menyesuaikan saiz grafik. Panduan penamaan W3C menggambarkan atribut ini sebagai rujukan ke kandungan yang digunakan untuk mengira nama aksesibel. Menamakan dan Menerangkan Aksesibel

Pemisahan ini memberikan kaedah diagnosis yang berguna: semak Grid apabila kad tersilap, koordinat SVG apabila lukisan tersilap, dan rujukan penamaan apabila label salah. Menambah x atau y ke use menyesuaikan grafik guna semula di ruang SVG; ia tidak menggerakkan keterangan HTML. Juga, dimensi use bukan pengganti am untuk penskalaan bentuk dirujuk sembarangan: MDN mendokumentasikan kesannya apabila merujuk SVG atau simbol dengan viewBox. Elemen use SVG

Adakah jika tiada keterangan nampak?

Guna tajuk per-contoh apabila grafik memerlukan nama tetapi reka bentuk tiada teks nampak yang sesuai. Berikut ialah fragmen ganti untuk SVG nampak pertama dalam contoh lengkap. Ia masih bergantung pada simbol tile-mark sedia 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>

Bagi setiap kemunculan tambahan, berikan tajuk ID berbeza dan kemas kini rujukan induknya. MDN mendokumentasikan title sebagai elemen penamaan aksesibel SVG dan menyarankan meletakkannya pertama untuk keserasian dengan SVG 1.1. Teks tajuk tidak dirender nampak sebagai sebahagian lukisan, walaupun pelayar biasanya memaparkannya sebagai petikan alat. Elemen nama aksesibel SVG

Bagi nama pendek tanpa elemen tajuk, ganti aria-labelledby dengan aria-label="Sample Alpha" pada SVG luar kemunculan itu. Elak meninggalkan atribut penamaan bersaing: W3C mendokumentasikan bahawa aria-labelledby keutamaan ke atas aria-label. Rujukan tinggalan boleh menghalang rentetan baru anda menjadi nama. Menamakan dan Menerangkan Aksesibel

Jangan cuba menugaskan tajuk khusus-kemunculan dengan mengedit klon dijana. SVG 2 menentukan pokok bayangan contoh hanya-baca. Kertas Kerja Pemetaan API Aksesibiliti SVG terkini juga menghadkan pencocokan rujukan ID ARIA ke dalam use pokok bayangan. Ini adalah sempadan berdokumen; mereka bukan bukti setiap pelayar melaksanakan tingkah laku serupa. Mengekalkan label pada pembungkus tertulis mengelak bergantung pada carian klon. Struktur Dokumen — SVG 2, Pemetaan API Aksesibiliti SVG

Bagaimana anda menyemak dan mengenal pasti masalah keputusan?

Semak keputusan nampak dan nama aksesibel secara berasingan di pelayar Mac anda. Semak setiap SVG luar dalam alat aksesibiliti pelayar, kemudian semak dengan VoiceOver. W3C secara khusus menyarankan ujian teknologi bantu untuk nama yang dikira melalui aria-labelledby. Menamakan dan Menerangkan Aksesibel

Gunakan keputusan dijangka ini sebagai senarai semak penerimaan kecil:

  1. Kedua-dua lukisan muncul, dengan keterangan nampak masing-masing.
  2. Setiap SVG luar mempunyai peranan imej dan nama sepadan.
  3. Takrif simbol tidak muncul sebagai grafik bermakna tambahan.
  4. Memperkecil tetingkap menukar susun atur kad manakala setiap grafik mengekalkan labelnya.
  5. Mengubah hanya keterangan kedua mengubah hanya nama dikira grafik kedua.

Jika kedua-dua grafik menerima nama yang sama, bandingkan nilai aria-labelledby mereka terlebih dahulu. Kemudian semak bahawa setiap ID dirujuk mengenal pasti teks yang ditujukan. Jangan andaikan kedekatan visual menubuhkan hubungan: atribut secara eksplisit merujuk elemen mengikut ID. Menamakan dan Menerangkan Aksesibel

Jika seluruh lukisan diumumkan sebagai satu imej apabila anda perlukan beberapa imej bebas, semak di mana role="img" duduk. Satu peranan imej di sekeliling seluruh koleksi meminta teknologi bantu mengurus koleksi itu sebagai satu entiti. Kekalkan pembungkus imej berasingan untuk grafik mudah berasingan. Peranan ARIA: img

Jika anda sebenarnya menanam fail SVG melalui HTML img, gunakan atribut alt elemen itu untuk setiap kemunculan. WHATWG mentakrifkan alt sebagai kandungan geganti setara untuk imej. SVG sebaris menggunakan mekanisme penamaan berbeza dan tidak menyokong alt sebagai atribut teks alternatifnya. Standard HTML: Elemen img, Pengenalan SVG dalam HTML

Bagi tugas susun atur ini, kekalkan satu takrif lukisan perkongsian dan satu keputusan penamaan per kemunculan. Pilih pembungkus mengikut apa yang pembaca perlu jumpai, hubungkannya ke teks yang sesuai, dan sahkan nama aksesibel yang terhasil secara bebas daripada susun atur visual.

Sumber