Erişilebilir SVG'ler: Ekran Okuyucu Kullanıcıları İçin Mükemmel Modeller
Yayınlanan: 2022-03-10Ölçeklenebilir Vektör Grafikleri (SVG'ler) ilk kez 90'ların sonlarında tanıtılmış olsa da, bant genişliği ve performansın her zamankinden daha önemli olduğu bir dünyada aşırı esneklikleri, yüksek doğrulukları ve göreli hafiflikleri nedeniyle son on yılda popülaritesinde büyük bir canlanma gördüler. . JavaScript'teki gelişmeler ve @prefers-color-scheme ve @prefers-reduced-motion gibi CSS medya sorgularının kullanıma sunulması, SVG'lerin işlevselliğini, yalnızca vektör görüntülerini bir web sitesinde görüntüleme şeklindeki ilk kullanım durumlarının ötesine taşıdı.
SVG teknolojisi ilerledikçe, SVG'leri nasıl tasarladığımız ve geliştirdiğimize dair anlayışımızın da gelişmesi gerekiyor. Bu ilerlemenin bir kısmı, bu tür tasarımların ve kodların gerçek insanlar, yani son kullanıcılarımız üzerindeki etkisinin dikkate alınmasını içerir.
Bu makale, "vahşi doğada" bulunan on iki farklı SVG modelini ve farklı işletim sistemleri, tarayıcılar ve ekran okuyucu kombinasyonları tarafından erişildiğinde duyurulan her bir alternatif açıklamayı özetlemektedir.
Elbette, aşağıdaki örnekler, dijital alanda kullanılan tüm olası kalıpların kapsamlı bir listesi olmayı amaçlamamaktadır, ancak karşılaşabileceğiniz daha popüler veya her yerde bulunan SVG kalıplarından bazılarını vurgulamaktadırlar. Hangi SVG kalıplarından kaçınmanız gerektiğini ve hangi kalıpların en kapsamlı olduğunu keşfetmek için okumaya devam edin!
<img> Etiketini Kullanan Temel Alternatif Açıklamalar
Dört kalıptan oluşan ilk grup, bir SVG dosyasına bağlanan <img> etiketini kullanır. Bu, web sitenizdeki, uygulamanızdaki veya diğer dijital ürünlerinizdeki basit, karmaşık olmayan görüntüler için iyi bir seçimdir. Bu kalıbı kullanmanın dezavantajı, bir satır içi SVG olarak birçok görsel öğeyi veya animasyonu kolayca kontrol edememeniz olsa da, bu kalıp genel olarak daha hafif ve daha hızlı görüntüler oluşturmalı ve birden çok konumda kullandığınız SVG'lerde daha kolay bakıma izin vermelidir.
Model 1: <img> + alt="[words]"
<img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> Model #2: <img> + role="img" + alt="[words]"
<img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> Model #3: <img> + role="img" + aria-label="[words]"
<img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> Model #4: <img> + role="img" + aria-labelledby="[ID]"
<p class="visually-hidden">What does the fox say?</p> <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> <svg> Etiketini Kullanan Temel Alternatif Açıklamalar
Dört kalıptan oluşan ikinci grup, satır içi bir SVG dosyasıyla <svg> etiketini kullanır. SVG kodunu doğrudan işaretlemeye eklemek, sayfanın yüklenmesini potansiyel olarak biraz yavaşlatsa da, bu küçük verimsizlik, resimlerinizin görsel öğeleri veya animasyonları üzerinde daha fazla kontrole sahip olarak dengelenecektir. SVG'nizi doğrudan HTML'ye ekleyerek, ekran okuyucu kullanıcılarınıza görüntü bilgisi sağlama konusunda da daha fazla seçeneğiniz olur.
Kalıp #5: <svg> + role="img" + <title>
<svg role="img" ...> <title>What does the fox say?</title> [design code] </svg> Model #6: <svg> + role="img" + <text>
<svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg> Model #7: <svg> + role="img" + <title> + aria-describedby="[ID]"
<svg role="img" ...> <title>What does the fox say?</title> [design code] </svg> Model #8: <svg> + role="img" + <title> + aria-labelledby="[ID]"
<svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg> <svg> Etiketini Kullanan Genişletilmiş Alternatif Açıklamalar
Dört kalıptan oluşan son grup, ikinci grup gibi, satır içi bir SVG dosyasıyla <svg> etiketini kullanır. Ancak bu durumda, görüntünün karmaşıklığı nedeniyle basit alternatif açıklamaları ek bilgilerle genişletiyoruz.
Bu, daha fazla açıklamaya ihtiyaç duyan daha karmaşık görüntüler için iyi bir desen seçimi olacaktır. Bununla birlikte, bu ek görüntü bilgilerinin SVG koduna gömülmek yerine ekranda hazır bulunmasından yararlanabilecek bazı engelleri olan (bilişsel bozukluklar gibi) olduğunu akılda tutmak önemlidir.
SVG'nize eklemeniz gereken bilgilerin türüne ve miktarına bağlı olarak, tamamen farklı bir yaklaşım benimsemeyi düşünebilirsiniz.
Kalıp #9: <svg> + role="img" + <title> + <text>
<svg role="img" ...> <title>What does the fox say?</title> <text class="visually-hidden" font-size="0">Will we ever know?</text> [design code] </svg> Kalıp #10: <svg> + role="img" + <title> + <desc>
<svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> Model #11: <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"
<svg role="img" aria-labelledby="fox11 description11" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> Kalıp #12: <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"
<svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> Carie Fisher'ın tam CodePen [Erişilebilir SVG Model Karşılaştırması (Fox Sürümü)](https://codepen.io/smashingmag/pen/dyvvbKj) bakın.
SVG Modeli Kazananlar ve Kaybedenler
Farklı işletim sistemleri ve tarayıcı kombinasyonlarında çeşitli ekran okuyucuları çalıştırarak, nihai sonuçlar tablosunda belirli kalıpların ortaya çıktığını görüyoruz. Bazı net SVG modeli kazananları ve kaybedenleri vardır, ayrıca ortada bir yerde, farkında olduğunuz sürece uygulayabileceğiniz ve sınırlamalarını kabul edebileceğiniz birkaç model vardır. Sonuç tablosunu incelersek, şu sonuca varabiliriz:
<img> Etiketini Kullanan Temel Alternatif Açıklamalar (Grup 1)
Gösterinin En İyisi
- Model 2 :
<img> + role="img"+alt="[words]" - Model 3 :
<img>+role="img"+aria-label="[words]"
Dikkatli Kullanın
- Model 4 :
<img>+role="img"+aria-labelledby="[ID]"
Tavsiye edilmez
- Model 1 :
<img>+alt="[words]"
<svg> Etiketini Kullanan Temel Alternatif Açıklamalar (Grup 2)
Gösterinin En İyisi
- Model 5 :
<svg>+role="img"+<title> - Model 8 :
<svg>+role="img"+<title>+aria-labelledby="[ID]"
Dikkatli Kullanın
- Model 7 :
<svg>+role="img"+<title>+aria-describedby="[ID]"
Tavsiye edilmez
- Model 6 :
<svg>+role="img"+<text>
<svg> Etiketini Kullanan Genişletilmiş Alternatif Açıklamalar (Grup 3)
Gösterinin En İyisi
- Model 11 :
<svg>+role="img"+<title>+<desc>+aria-labelledby="[ID]"
Not : Bu kalıp, alternatif açıklamaları tekrarladığı için mükemmel olmasa da, "dikkatli kullanın" kalıplarının aksine, testteki öğelerin hiçbirini göz ardı etmedi.
Dikkatli Kullanın
- Model 9 :
<svg>+role="img"+<title>+<text> - Model 10 :
<svg>+role="img"+<title>+<desc> - Model 12 :
<svg>+role="img"+<title>+<desc>+aria-describedby="[ID]"
Tavsiye edilmez
- Bu gruptaki kalıpların hiçbiri testleri tamamen geçemedi.
Test Sonuçları
Carie Fisher tarafından kaleme alınan [Test Sonuçlarına](https://codepen.io/smashingmag/pen/YzZQBwG) bakın.
Toplama
SVG model testlerinin sonuçlarını yorumlamanın bir parçasının, her ekran okuyucunun yaratıcılarının tam olarak destekledikleri önerilen bir tarayıcıya/tarayıcılara sahip olduğunu anlamak olduğuna dikkat etmek önemlidir. Bu, farklı bir tarayıcıda ekran okuyucu kullanmamanız veya kullanamayacağınız anlamına gelmez; bu, yalnızca yaparsanız sonuçların önerilenleri kullandığınız kadar doğru olmayabileceği anlamına gelir.
Bu makalenin model testi, "kenar" kategorisine girebilecek bazı tarayıcı ve ekran okuyucu kombinasyonlarını içeriyordu, ancak kendi testiniz için hangi işletim sistemleri, tarayıcılar ve ekran okuyucu kombinasyonlarının önerildiğine dair notlar da var. Bu testlerin sonuçları, kalıp ihtiyaçlarınıza ve kısıtlamalarınıza göre mümkün olan en iyi SVG kalıbı kararını vermenize yardımcı olacaktır.
Bir kalıba karar vermeden önce, lütfen erişilebilir görüntülerin nasıl ve ne zaman oluşturulacağının temellerini bildiğinizden ve farklı görüntü türleri için gereken alternatif bilgileri tam olarak anladığınızdan emin olun.
Ortamınız için hangi kalıbı kullanacağınız konusunda ek yardıma ihtiyacınız varsa, erişilebilir kalıpların zorlu sularında gezinmenize yardımcı olmak için İyi, Daha İyi, En İyi: Erişilebilir Kalıpların Karmaşık Dünyasını Çözme makalesine bakın. Tüm bu bilgilerle ve biraz çabayla donanmış olan SVG'leriniz herkesi daha kapsayıcı olma yolunda ilerliyor.
Editörün notu : Carie ile Erişilebilir Ön Uç Modelleri konulu yaklaşan çevrimiçi atölyesinde - kılavuzlar, test araçları, yardımcı teknoloji ve kapsayıcı tasarım kalıpları ile erişilebilirlikle ilgili en iyi uygulamaları öğrenebilirsiniz. Çevrimiçi ve canlı.