Yalnızca içindeki çizimi yeniden kullanırken, tekrarlanan her sembolü erişilebilir bir ada sahip kendi dış SVG’siyle sarın. Bu kılavuz, Mac’te etiketli küçük bir grafik listesi oluşturmayı ve sayfa düzenini, SVG koordinatlarını ve erişilebilir adlandırmayı birbirinden ayrı tutmayı gösterir.

Basit bir grafik için MDN, yardımcı teknolojilerin onu tek bir görsel olarak değerlendirebilmesi amacıyla dış SVG’ye role="img" ve bir etiket eklenmesini önerir. Buradaki pratik yaklaşım, her kullanım için kendi etiketine başvuran bir sarmalayıcı kullanmaktır. ARIA: img role

Her örneğin erişilebilir etiketi nereye konmalıdır?

Adı, söz konusu kullanımı temsil eden öğeye ekleyin. Birden fazla ayrı grafik aynı sembolü yeniden kullanıyorsa, her dış svg öğesine kendi aria-labelledby başvurusunu veya aria-label değerini verin. Paylaşılan sembolü yalnızca yeniden kullanılabilir geometriyi içerecek şekilde tutun.

Bu, tanım ile oluşturulmuş örnekler arasındaki ayrıma dayanır. SVG use öğesi grafiklere başvurur ve yeniden kullanılan içeriği bir gölge ağacı aracılığıyla oluşturur; oluşturulan şekiller, sayfanın DOM’unda sıradan alt düğümler değildir. Dolayısıyla bir çizimi yeniden kullanmak, HTML’nizde iç etiketinin ayrı ayrı düzenlenebilir kopyalarını oluşturmaz. Document Structure — SVG 2

Paylaşılan sembolün içine yerleştirilen bir başlık da başka bir adlandırma yöntemi olmadan farklı kullanımlar için farklı metinler sağlayamaz. Örneğin aynı nötr döşeme çizimi, bir yerde Sample Alpha, başka bir yerde Sample Beta anlamına gelebilir. Geometrileri aynı olsa da bu adlar iki ayrı kullanıma aittir.

Adlandırma yöntemini, yararlı metnin zaten nerede bulunduğuna göre seçin:

Durum Önerilen yaklaşım
Kısa ve görünür bir açıklama grafiğin adını veriyor Dış SVG’de aria-labelledby ile açıklamanın benzersiz kimliğine başvurun.
Grafiğin bir ada ihtiyacı var, ancak görünür bir açıklaması yok Her dış SVG’nin içine benzersiz bir title ekleyip aria-labelledby ile ona başvurun ya da aria-label kullanın.
Grafik, zaten tüm bilgiyi aktaran metni yalnızca süslüyor Gereksiz bir ad eklemek yerine SVG’yi yardımcı teknolojilerden gizleyin.
Birden fazla kullanımın ayrı ayrı keşfedilebilir kalması gerekiyor Hepsini tek bir dış role="img" görselinde gruplamaktan kaçının.

MDN, SVG’ye ad verebiliyorsa görünür metne başvurulmasını önerir. Görsel rolü belgelerinde ayrıca role="img" içeriği tek bir varlık olarak sunduğundan, sarmalayıcı sınırının neden önemli olduğunu açıklar. The SVG accessible name element, ARIA: img role

Birbirinden bağımsız adlandırılmış iki örnek içeren tam bir sayfa oluşturun

Aşağıdaki örnek, yalnızca sentetik metin ve basit bir daire-kare çizimi içeren eksiksiz bir HTML belgesidir. JavaScript, harici bir sprite, kitaplık veya derleme süreci gerektirmez. Mac’inizde düz metin düzenleyici kullanarak symbol-labels.html adıyla kaydedin, ardından dosyayı bir masaüstü tarayıcısında açın.

Her iki kullanım da tile-mark öğesine başvurur, ancak dış SVG’leri farklı görünür açıklamalara başvurur. Bu, MDN’nin belgelediği görünür metinle adlandırma yaklaşımını kullanır. href özniteliği güncel SVG başvuru mekanizmasıdır; MDN, xlink:href özniteliğinin kullanımdan kaldırıldığını belirtir. The SVG accessible name element, SVG use element

<!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>

Amaçlanan erişilebilir adlar Sample Alpha ve Sample Beta’dır. Bunlar, bildirilen tarayıcı test sonuçları değil, işaretlemeden beklenen sonuçlardır. Her sarmalayıcının içindeki çizim yardımcı teknolojilerden açıkça gizlenir; adlandırılmış dış SVG ise erişilebilir kalır. SVG erişilebilirlik eşlemeleri, gizli alt öğeler ile erişilebilir üst öğeyi birbirinden ayırır. SVG Accessibility API Mappings

Üçüncü bir kullanım eklerken href="#tile-mark" öğesini yeniden kullanın, yeni bir açıklama kimliği oluşturun ve bu kullanımın aria-labelledby değerini bu kimlikle eşleşecek şekilde güncelleyin. Sembol başvurusunu paylaşılan, etiket başvurusunu ise kullanıma özgü tutun.

Ekran okuyucu okuması sırasında görünür açıklamalarla ayrıca karşılaşılabilir. Döşeme açıklamasından başka bilgi eklemiyorsa bunun yerine dekoratif yaklaşımı kullanın: dış SVG’den role="img" ve aria-labelledby özniteliklerini kaldırıp aria-hidden="true" ekleyin. Görünür açıklamayı koruyun. SVG eşlemeleri, aria-hidden aracılığıyla dışlamayı belgeler. SVG Accessibility API Mappings

Düzenin her bölümünü hangi tarayıcı mekanizması kontrol eder?

Bu örnekte üç ayrı görev vardır: kartları düzenlemek, sembolü çizmek ve erişilebilir adları hesaplamak. Birini değiştirmek diğerlerini kendiliğinden gerçekleştirmez.

CSS Grid, HTML liste öğelerini düzenler. display: grid tanımlamak, kapsayıcının doğrudan alt öğelerini grid öğelerine dönüştürür; grid-template-columns sütunları tanımlar. Burada medya sorgusu listeyi iki sütundan tek sütuna geçirir. Bu, kartların sayfa düzenini etkiler. Basic concepts of grid layout

SVG koordinatları, her grafiğin içindeki şekilleri kontrol eder. Sembolün viewBox="0 0 48 48" özniteliği koordinat dikdörtgenini belirler; use öğesinin boyutları ise başvurulan sembol görüntü alanının boyutunu belirler. Bu boyutlar HTML kart sütunlarını veya açıklama aralıklarını oluşturmaz. SVG 2, yeniden kullanılan grafiklerin düzenini CSS kutu düzeninden açıkça ayırır. Document Structure — SVG 2

Erişilebilir adlandırma, her dış SVG’yi aria-labelledby aracılığıyla metinle ilişkilendirir. Metin çizmez, açıklamayı konumlandırmaz veya grafiği yeniden boyutlandırmaz. W3C’nin adlandırma yönergeleri, bu özniteliği erişilebilir adı hesaplamak için kullanılan içeriğe başvuru olarak tanımlar. Providing Accessible Names and Descriptions

Bu ayrım, yararlı bir tanılama kuralı sağlar: kartlar yanlış yerdeyse Grid’i, çizimler yanlış yerdeyse SVG koordinatlarını, etiketler yanlışsa adlandırma başvurularını inceleyin. x veya y özniteliklerini use öğesine eklemek, yeniden kullanılan grafikleri SVG alanında kaydırır; HTML açıklamasını taşımaz. Ayrıca use boyutları, başvurulan gelişigüzel şekilleri ölçeklendirmenin genel bir yerine geçmez: MDN, bu boyutların viewBox içeren bir SVG’ye veya sembole başvurulduğunda etkili olduğunu belgeler. SVG use element

Görünür bir açıklama yoksa ne yapılmalı?

Grafiğin bir ada ihtiyacı varsa ancak tasarımda uygun görünür bir metin yoksa, her kullanım için başlık kullanın. Aşağıdaki parça, tam örnekteki ilk görünür SVG’nin yerine geçer. Mevcut tile-mark sembolüne bağlıdır:

<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>

Her ek kullanım için başlığa farklı bir kimlik verin ve üst öğesinin başvurusunu güncelleyin. MDN, title öğesini SVG erişilebilir adlandırma öğesi olarak belgeler ve SVG 1.1 ile uyumluluk için ilk sıraya yerleştirilmesini önerir. Başlık metni çizimin parçası olarak görünür biçimde oluşturulmaz, ancak tarayıcılar genellikle bunu araç ipucu olarak gösterir. The SVG accessible name element

Başlık öğesi kullanmadan kısa bir ad vermek için, ilgili kullanımın dış SVG’sindeki aria-labelledby özniteliğini aria-label="Sample Alpha" ile değiştirin. Birbiriyle yarışan adlandırma özniteliklerini bırakmayın: W3C, aria-labelledby özniteliğinin aria-label özniteliğine göre öncelikli olduğunu belgeler. Dolayısıyla geride kalan bir başvuru, yeni dizgenin ad olmasını engelleyebilir. Providing Accessible Names and Descriptions

Oluşturulmuş bir kopyayı düzenleyerek belirli bir kullanıma özel başlık atamaya çalışmayın. SVG 2, salt okunur bir örnek gölge ağacı tanımlar. Güncel SVG Accessibility API Mappings Çalışma Taslağı da ARIA kimlik başvurularının use gölge ağaçlarının içine eşleşmesini kısıtlar. Bunlar belgelenmiş sınırlardır; her tarayıcının aynı şekilde davrandığının kanıtı değildir. Etiketi kaynak koddaki sarmalayıcıda tutmak, kopyada aramaya bağlı kalmanızı önler. Document Structure — SVG 2, SVG Accessibility API Mappings

Sonuç nasıl kontrol edilir ve sorunlar nasıl giderilir?

Mac tarayıcınızda görünür sonucu ve erişilebilir adları ayrı ayrı kontrol edin. Tarayıcının erişilebilirlik araçlarında her dış SVG’yi inceleyin, ardından VoiceOver ile kontrol edin. W3C, aria-labelledby aracılığıyla hesaplanan adların yardımcı teknolojiyle sınanmasını özellikle önerir. Providing Accessible Names and Descriptions

Aşağıdaki beklenen sonuçları küçük bir kabul kontrol listesi olarak kullanın:

  1. Her iki çizim de kendi görünür açıklamasıyla birlikte görünür.
  2. Her dış SVG’nin görsel rolü ve buna karşılık gelen adı vardır.
  3. Sembol tanımı, anlamlı bir ek grafik olarak görünmez.
  4. Pencereyi daraltmak kart düzenini değiştirirken her grafik etiketini korur.
  5. Yalnızca ikinci açıklamayı değiştirmek, yalnızca ikinci grafiğin hesaplanan adını değiştirir.

Her iki grafik de aynı adı alıyorsa önce aria-labelledby değerlerini karşılaştırın. Ardından her kimliğin amaçlanan metni gösterdiğini kontrol edin. Görsel yakınlığın ilişkiyi kurduğunu varsaymayın: öznitelik bir öğeye kimliğiyle açıkça başvurur. Providing Accessible Names and Descriptions

Birden fazla bağımsız görsele ihtiyaç duyarken çizimin tamamı tek bir görsel olarak duyuruluyorsa, role="img" özniteliğinin nerede bulunduğunu inceleyin. Koleksiyonun tamamını saran tek bir görsel rolü, yardımcı teknolojilerden bu koleksiyonu tek bir varlık olarak değerlendirmesini ister. Ayrı basit grafikler için ayrı görsel sarmalayıcıları kullanın. ARIA: img role

Gerçekte bir SVG dosyasını HTML img aracılığıyla ekliyorsanız, her kullanım için bu öğenin alt özniteliğini kullanın. WHATWG, alt özniteliğini görsel için eşdeğer yedek içerik olarak tanımlar. Satır içi SVG farklı adlandırma mekanizmaları kullanır ve alternatif metin özniteliği olarak alt özniteliğini desteklemez. HTML Standard: The img element, SVG in HTML introduction

Bu düzen görevinde tek bir paylaşılan çizim tanımı ve her kullanım için ayrı bir adlandırma kararı kullanın. Okuyucunun karşılaşması gereken içeriğe göre sarmalayıcıyı seçin, uygun metne bağlayın ve görsel düzenden bağımsız olarak ortaya çıkan erişilebilir adı doğrulayın.

Kaynaklar