Erişilebilir resimler ilk bakışta hızlıca halledilebilecek bir konu gibi görünebilir. Bir resme "alternatif metin" eklediğinizde işiniz biter. Ancak bu konu, bazı kişilerin düşündüğünden daha karmaşıktır. Bu bölümde şunları inceleyeceğiz:
- Resimleri erişilebilir hale getirmek için kodu nasıl güncelleyeceğinizi öğrenin.
- Kullanıcılarla hangi bilgilerin paylaşılması gerektiği ve bu bilgilerin nerede paylaşılacağı.
- Engelli kullanıcıları desteklemek için resimlerinizi iyileştirmenin diğer yolları
Resmin amacı ve bağlamı
Tek bir kod satırı bile yazmadan önce nokta resminin amacını, nerede bulunacağını ve nasıl kullanılacağını düşünün. Kendinize bu soruları sormak, bilgileri ekran okuyucu gibi yardımcı teknoloji (AT) kullanan bir kişiye en iyi şekilde nasıl aktaracağınızı belirlemenize yardımcı olabilir.
Kendinize şu soruları sorabilirsiniz:
- Resim, özelliğin veya sayfanın bağlamını anlamak için gerekli mi?
- Resim ne tür bir bilgi vermeye çalışıyor?
- Resim basit mi yoksa karmaşık mı?
- Resim duygu uyandırıyor mu veya kullanıcıyı harekete geçiriyor mu?
- Yoksa resim, gerçek bir amacı olmayan görsel bir "göz zevki" mi?
Resim karar ağacı gibi görsel bir akış şeması, resminizin hangi kategoriye ait olduğuna karar vermenize yardımcı olabilir.
Tarayıcı uzantısı veya başka yöntemler kullanarak sitenizdeki ya da web uygulamanızdaki resimleri gizlemeyi deneyin. Ardından kendinize şu soruyu sorun: "Kalan içeriği anlıyor muyum?" Yanıtınız evetse bu resim büyük olasılıkla dekoratif amaçlıdır. Aksi takdirde, resim bir şekilde bilgilendirici ve bağlamsal olarak gereklidir. Görselin amacını belirledikten sonra, görsel için en doğru kodlama yöntemini belirleyebilirsiniz.
Dekoratif resimler
Süsleme amaçlı resim, kullanıcının bağlamı daha iyi anlamasına olanak tanıyan ek bağlam veya bilgi sağlamayan bir görsel öğedir. Dekoratif resimler ek içerik olup içerikten ziyade stil sunabilir.
Bir resmin dekoratif olduğuna karar verirseniz bu resim, programatik olarak AT'lerden gizlenmelidir. Bir resmi gizlenecek şekilde programladığınızda, yardımcı teknolojiye resmin sayfanın içeriğini, bağlamını veya eylemini anlamak için gerekli olmadığı sinyali verilir. Boş veya null metin alternatifi kullanma, ARIA uygulama ya da resmi CSS arka planı olarak ekleme gibi birçok yöntemle resimleri gizleyebilirsiniz. Aşağıda, dekoratif bir resmi kullanıcılardan nasıl gizleyeceğinize dair birkaç örnek verilmiştir.
Boş veya null alt
Boş veya null alternatif metin özelliği, eksik alternatif metin özelliğinden farklıdır. Alternatif metin özelliği eksikse AT, kullanıcıya resim hakkında daha fazla bilgi vermek için dosya adını veya çevreleyen içeriği okuyabilir.
Rol presentation veya none olarak ayarlanmış olmalıdır.
presentation veya none olarak ayarlanan bir rol, öğenin semantiğini erişilebilirlik ağacına maruz kalmaktan kaldırır.
Bu arada, aria-hidden= "true", öğenin tamamını ve tüm alt öğelerini erişilebilirlik API'sinden kaldırır.
<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">
aria-hidden simgesini dikkatli kullanın. Bu simge, gizlemek istemediğiniz öğeleri gizleyebilir.
CSS'deki resimler
CSS ile arka plan resmi eklediğinizde ekran okuyucu, resim dosyasını algılayamaz. Bu yöntemi uygulamadan önce resmin gizlenmesini istediğinizden emin olun.
Bilgilendirici resimler
Bilgilendirici resim, bir kavramı, fikri veya duyguyu aktaran resimdir. Bilgilendirici görseller; gerçek dünyadaki nesnelerin fotoğraflarını, temel simgeleri, basit çizimleri ve metin görsellerini içerir.
Resminiz bilgilendiriciyse resmin amacını açıklayan programatik alternatif metin eklemeniz gerekir. Genellikle "alternatif metin" olarak kısaltılan alternatif resim açıklamaları, AT kullanıcılarına bir resim hakkında daha fazla bağlam bilgisi verir ve resmin mesajını veya amacını daha iyi anlamalarına yardımcı olur.
alt özelliğini ekleyerek <img> öğelerine alternatif açıklamalar ekleyebilirsiniz. Bu, JPG, PNG veya SVG gibi tüm dosya türleri için geçerlidir.
<img src=".../Ladybug_Swarm.jpg"
alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
Ancak <svg> öğelerini satır içinde kullandığınızda erişilebilirliğe daha fazla dikkat etmeniz gerekir. SVG'ler semantik olarak kodlandığından AT, varsayılan olarak bunları atlar.
SVG dekoratif bir resimse bu sorun teşkil etmez. Yardımcı teknoloji, resmi amaçlandığı gibi yoksayar. Ancak SVG'niz bilgilendirici bir resimse AT'nin bunu resim olarak tanıması için ARIA
role="img" özelliğini öğeye ekleyin.
İkincisi, <svg> öğelerinde alt özelliği kullanılmaz. Bu nedenle, bilgilendirici resimlerinize alternatif açıklamalar eklemek için bunun yerine farklı kodlama yöntemleri kullanılmalıdır.
<svg role="img">
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
İşlevsel resimler
İşlevsel resimler bir işleme bağlıdır. İşlevsel bir resme örnek olarak ana sayfaya bağlantı veren bir logo, arama düğmesi olarak kullanılan bir büyüteç veya sizi farklı bir web sitesine ya da uygulamaya yönlendiren bir sosyal medya simgesi verilebilir.
Bilgilendirici resimler gibi, işlevsel resimler de tüm kullanıcılara amaçlarını bildirmek için alternatif bir açıklama içermelidir. Bilgilendirici resimlerin aksine, her işlevsel resim görsel özellikleri değil, resimdeki işlemi açıklamalıdır.
Logo örneğinde, hem bilgi veren bir resim hem de bağlantı olarak işlev gördüğü için resim hem bilgilendirici hem de işlem yapılabilir niteliktedir. Bu gibi durumlarda her öğeye alternatif açıklamalar ekleyebilirsiniz ancak bu zorunlu değildir.
Resimlere alternatif açıklamalar eklemenin bir yolu, görsel olarak gizlenmiş metinlerdir. Bu yöntemi kullandığınızda metin, DOM'da olduğu için ekran okuyucular tarafından okunur ancak özel CSS yardımıyla görsel olarak gizlenir.
Kod snippet'inden "Ana sayfaya git"in sarmalayıcı başlığı, resim alternatif metninin ise "Çimleriniz için sevimli uğur böcekleri" olduğu anlaşılıyor. Logo kodunu ekran okuyucuyla dinlediğinizde hem görseli hem de tek bir resimde aktarılan işlemi duyarsınız.
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
</a>
</div>
Karmaşık resimler
Karmaşık bir resim genellikle dekoratif, bilgilendirici veya işlevsel bir resimden daha fazla açıklama gerektirir. Tam mesajı iletmek için hem kısa hem de uzun alternatif açıklama gerekir. Karmaşık resimler arasında bilgi grafikleri, haritalar, grafikler/tablolar ve karmaşık çizimler yer alır.
Diğer resim türlerinde olduğu gibi, karmaşık resimlerinize alternatif açıklamalar eklemek için kullanabileceğiniz farklı yöntemler vardır.
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
Resme ek açıklama eklemenin bir yolu, bir kaynağa bağlantı vermek veya sayfada daha sonra daha uzun bir açıklamaya atlama bağlantısı sağlamaktır. Bu yöntem, yalnızca AT kullanıcıları için iyi bir seçenek olmakla kalmaz, aynı zamanda bilişsel, öğrenme ve okuma engellilikleri gibi engellilikleri olan ve bu ek resim bilgilerinin kodda gizlenmek yerine ekranda kolayca erişilebilir olmasından faydalanabilecek kişilere de yardımcı olur.
Kullanabileceğiniz başka bir yöntem de aria-describedby özelliğini <img> öğesine eklemektir. Resmi, daha uzun bir açıklama içeren bir kimliğe programatik olarak bağlayabilirsiniz. Bu yöntem, resim ile tam açıklama arasında güçlü bir ilişki oluşturur. Genişletilmiş açıklama ekranda gösterilebilir veya görsel olarak gizlenebilir. Ancak daha fazla kullanıcıya destek olmak için görünür tutmayı düşünebilirsiniz.
Kısa alternatif açıklamaları daha uzun bir açıklamayla gruplandırmanın bir başka yolu da <figure> ve <figcaption> öğelerini kullanmaktır. Bu öğeler, öğeleri anlamsal olarak gruplandırarak aria-describedby öğesine benzer şekilde çalışır ve resim ile açıklaması arasında daha güçlü bir ilişki oluşturur.
ARIA role="group" eklemek, <figure> öğesinin semantiğini desteklemeyen eski web tarayıcılarıyla geriye dönük uyumluluk sağlar.
Alternatif metinle ilgili en iyi uygulamalar
Elbette alternatif metin eklemek yeterli değildir. Metin anlamlı olmalıdır. Örneğin, resminiz ödüllü gül çalınızın yapraklarını yiyen bir uğur böceği sürüsüyle ilgiliyse ancak alternatif metninizde "böcekler" yazıyorsa bu, resmin tam mesajını ve amacını iletir mi? Kesinlikle hayır.
Alternatif açıklamalar, mümkün olduğunca çok alakalı görsel bilgiyi içermeli ve kısa olmalıdır. Ekran okuyucunun okuyabileceği karakter sayısıyla ilgili bir sınır olmasa da okuyucunun yorulmasını önlemek için alternatif metninizi genellikle 150 karakter veya daha az olacak şekilde sınırlamanız önerilir. Resme ek bağlam eklemeniz gerekirse karmaşık resim desenlerinden birini kullanabilir, başlık metni ekleyebilir veya ana metinde resmi daha ayrıntılı bir şekilde açıklayabilirsiniz.
Alternatif metinle ilgili diğer en iyi uygulamalar:
- Ekran okuyucu bu dosya türlerini sizin için tanımlayacağından açıklamada "resmi" veya "fotoğrafı" gibi kelimeler kullanmayın.
- Resimlerinizi adlandırırken olabildiğince tutarlı ve doğru olun. Resim adları, alternatif metin eksik olduğunda veya yoksayıldığında yedek olarak kullanılır.
- Alfanümerik olmayan karakterler (ör. #, 9, &) kullanmaktan kaçının ve resim adlarınızda veya alternatif metninizde alt çizgi yerine kelimeler arasında tire kullanın.
- Mümkün olduğunda doğru noktalama işaretlerini kullanın. Bu olmadan, resim açıklamaları uzun, bitmeyen bir cümle gibi görünür.
- Alternatif metni robot gibi değil, insan gibi yazın. Anahtar kelime doldurma kimseye fayda sağlamaz. Ekran okuyucu kullanan kişiler rahatsız olur ve arama motoru algoritmaları sizi cezalandırır.