Görseller

Erişilebilir resimler ilk bakışta basit bir konu gibi görünebilir. Resme "alternatif metin" eklediğinizde işiniz bitti. Ama konu bazı insanların düşündüğünden daha nüanslı. Bu bölümde şunları inceleyeceğiz:

• Görselleri erişilebilir hale getirmek için kod nasıl güncellenir?
• Kullanıcılarla hangi bilgilerin nerede paylaşılacağı
• Engelli bireyleri desteklemek için resimlerinizi iyileştirmenin diğer yolları.

Görselin amacı ve bağlamı

Tek bir kod satırı bile yazılmadan önce resmin noktasını ve nasıl kullanılacağını düşünmelisiniz. Kendinize resmin amacı ve bağlamıyla ilgili sorular sormak, ekran okuyucular gibi yardım teknolojilerini (AT) kullanarak bilgileri bir kişiye en iyi şekilde nasıl ileteceğinizi belirlemenize yardımcı olabilir.

Kendinize şunları sorabilirsiniz:

• Görsel, özelliğin veya sayfanın bağlamını anlamak açısından gerekli mi?
• Görsel ne tür bilgileri aktarmaya çalışıyor?
• Resim basit mi yoksa karmaşık mı?
• Resim, duygu uyandırıyor veya kullanıcıyı harekete geçmeye yönlendiriyor mu?
• Yoksa görüntü, gerçek bir amacı olmayan yalnızca görsel olarak mı yoksa "gözleri kamaştıran" bir görselden mi ibaret?

Görsel karar ağacı gibi bir görsel akış şeması, resminizin hangi kategoriye ait olduğuna karar vermenize yardımcı olabilir.

Tarayıcı uzantısı veya başka yöntemlerle sitenizdeki veya web uygulamanızdaki resimleri gizlemeyi deneyin. Ardından kendinize şu soruyu sorun: "Kalan içeriği anlıyor muyum?" Cevabınız evetse bu büyük olasılıkla dekoratif bir resimdir. Öyle değilse, resim bunun yerine bilgilendirici bir şekilde ve bağlamsal olarak gerekli. Resmin amacını belirledikten sonra, resim için en doğru kodlama yöntemini belirleyebilirsiniz.

Dekoratif resimler

Dekoratif resim, ek bağlam veya bilgi eklemeyen ve kullanıcının bağlamı daha iyi anlamasını sağlayan görsel öğelerdir. Dekoratif resimler tamamlayıcı niteliktedir ve öğeden çok stil kazandırabilir.

Bir resmin dekoratif olduğuna karar verirseniz bu resmin programlı bir şekilde AT'lerden gizlenmesi gerekir. Bir resmi gizlenecek şekilde programladığınızda, AT'ye sayfanın içeriğini, bağlamını veya işlemini anlamak için resmin gerekli olmadığını bildirir. Resimleri gizlemenin boş/boş metin alternatifi kullanma, ARIA uygulama veya resmi CSS arka planı olarak ekleme gibi birçok yolu vardır. Aşağıda, dekoratif bir resmi kullanıcılardan nasıl gizleyeceğinize dair birkaç örnek verilmiştir.

Boş alt

Boş/boş bir alternatif metin özelliği, eksik bir 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 etrafındaki içeriği okuyabilir.

Rol presentation veya none olarak ayarlandı

presentation veya none olarak ayarlanan bir rol, öğenin anlamlarını erişilebilirlik ağacından kaldırır. Bu arada aria-hidden= "true", öğenin tamamını ve tüm alt öğelerini erişilebilirlik API'sinden kaldıracaktı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, gizlemek istemediğiniz öğeleri gizleyebilir. Bu nedenle, aria-hidden kullanırken dikkatli olun.

CSS'deki resimler

CSS ile bir arka plan resmi eklediğinizde ekran okuyucu resim dosyasını algılamaz. Bu yöntemi uygulamadan önce resmin gizlenmesini istediğinizden emin olun.

Bilgilendirici resimler

Bilgilendirici resim, basit bir kavram, fikir veya duyguyu aktaran bir görseldir. Bilgilendirici görsel türleri arasında gerçek nesnelerin fotoğrafları, gerekli simgeler, basit çizimler ve metin görselleri bulunur.

Resminiz bilgilendiriciyse görselin 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 görsel hakkında daha fazla bağlam sunar ve görselin mesajını veya amacını daha iyi anlamalarına yardımcı olur.

<img> öğelerini kullanan basit alternatif açıklamalar, işaret ettiği dosya türünden bağımsız olarak alt özelliğinin eklenmesiyle elde edilir (ör. .jpg, .png, .svg vb.).

<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 kullanırken erişilebilirliğe dikkat etmeniz gerekir.

İlk olarak, SVG'ler anlamsal olarak kodlandığından, AT varsayılan olarak bunları atlar. Dekoratif bir resminiz varsa bu bir sorun değildir. AT gerektiği gibi bunu göz ardı eder. Ancak bilgilendirici bir resminiz varsa AT'nin bunu bir resim olarak tanıyabilmesi için kalıpa bir ARIA role="img" eklenmesi gerekir.

İkinci olarak, <svg> öğeleri alt özelliğini kullanmaz. 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 görseller

İşlevsel bir görüntü bir işleme bağlıdır. 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 işlevsel görsele örnek olarak verilebilir.

Bilgilendirici görseller gibi işlevsel resimler de tüm kullanıcıları amaçları hakkında bilgilendirmek için alternatif bir açıklama içermelidir. Bilgilendirici görsellerden farklı olarak, işlevsel resimlerin her birinin görsel yönü değil, eylemini tarif etmesi gerekir.

Logo örneğinde resim, hem bilgi aktaran hem bağlantı görevi gören bir resim olduğundan hem bilgilendirici hem de eyleme geçirilebilir. Bu gibi durumlarda, her öğeye alternatif açıklamalar ekleyebilirsiniz ancak bu bir gereklilik değildir.

Resimlere alternatif açıklamalar eklemenin bir yolu da görsel olarak gizlenmiş metinleri kullanmaktır. Bu yöntemi kullandığınızda metin DOM'da bulunduğu için ekran okuyucular tarafından okunur ancak özel CSS yardımıyla görsel olarak gizlenir.

Kod snippet'inden, "Ana sayfaya git" ifadesinin sarmalayıcı başlığı olduğunu ve resim alternatif metninin "Çiminiz için Mutlu Uğur Böcekleri" olduğunu görebilirsiniz. Logo kodunu ekran okuyucuyla dinlediğinizde tek bir resimde hem görsel hem de işin anlatıldığını duyarsınız.

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
   </a>
</div>

Karmaşık resimler

Karmaşık resimler genellikle dekoratif, bilgilendirici veya işlevsel bir resme kıyasla daha fazla açıklama gerektirir. Mesajın tamamını iletmek için hem kısa hem de uzun bir alternatif açıklama gerekir. Karmaşık resimler arasında bilgi görselleri, haritalar, grafikler/grafikler ve karmaşık illüstrasyonlar 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>

Bir resme ek açıklama eklemenin bir yolu, bir kaynağa bağlantı vermek veya sayfanın ilerleyen kısımlarında daha uzun bir açıklama için atlama bağlantısı sağlamaktır. Bu yöntem yalnızca AT kullanıcıları için değil, aynı zamanda bilişsel, öğrenme ve okuma güçlüğü çeken gibi engelli kişilere de yardımcı olur. Bu tür ek görsel bilgileri koda gömülmek yerine ekranda kolayca bulunabilir.

Kullanabileceğiniz bir diğer yöntem de aria-describedby özelliğini <img> öğesine eklemektir. Görüntüyü, programlı bir şekilde daha uzun açıklama içeren bir kimliğe bağlayabilirsiniz. Bu yöntem, resim ve tam açıklama arasında güçlü bir ilişkilendirme oluşturur. Genişletilmiş açıklama ekranda görüntülenebilir veya görsel olarak gizlenebilir. Ancak daha fazla kullanıcıyı desteklemek için açıklamanın görünür kalmasını sağlayın.

Kısa alternatif açıklamaları daha uzun bir açıklamayla gruplandırmanın bir diğer yolu da HTML5 <figure> ve <figcaption> öğelerini kullanmaktır. Bu öğeler, öğeleri anlamsal olarak gruplandırarak resim ile açıklama arasında daha güçlü bir ilişkilendirme oluşturması açısından aria-describedby özelliğine benzer. ARIA role="group" eklenmesi, <figure> öğesinin yerel anlamını 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 de anlamlı olmalıdır. Örneğin, resminiz ödül gül çalısının yapraklarını çiğneyen bir uğur böceği sürüsüyle ilgiliyse ancak alternatif metniniz "böcekler" ise bu resmin tam mesajını ve amacını aktarır mıydı? Kesinlikle hayır.

Alternatif açıklamalarda mümkün olduğunca fazla alakalı görsel bilgi yansıtılmalı ve kısa ve öz olmalıdır. Ekran okuyucunun okuyabileceği karakter sayısıyla ilgili bir sınır olmasa da okuyucuların yorulmasını önlemek için genellikle alternatif metninizi en fazla 150 karakterle sınırlandırmanız önerilir. Resme başka bağlam eklemeniz gerekiyorsa karmaşık resim kalıplarından birini kullanabilir, altyazı metni ekleyebilir veya resmi ana metinde daha ayrıntılı şekilde açıklayabilirsiniz.

Diğer alternatif metin en iyi uygulamalarından bazıları şunlardır:

• Ekran okuyucu bu dosya türlerini sizin için tanımlayacağından açıklama kısmında "resmi" veya "fotoğrafı" gibi kelimeler kullanmaktan kaçının.
• Resimlerinizi adlandırırken mümkün olduğunca tutarlı ve doğru adlar verin. Resim adları, alternatif metin eksik olduğunda veya yoksayıldığında yedek olarak kullanılır.
• Alfa olmayan karakterler (örneğin #, 9 ve &) kullanmaktan kaçının ve resim adlarınızda veya alternatif metinlerinizde alt çizgi yerine kelimeler arasında kısa çizgi kullanın.
• Mümkünse noktalama işaretlerini doğru kullanın. Aksi halde, görsel açıklamaları uzun, bitmeyen, devamlı bir cümle gibi görünür.
• Robot yerine insan gibi alternatif metinler yazın. Anahtar kelime doldurmanın hiç kimseye faydası yoktur. Ekran okuyucu kullanan kişiler rahatsız olur ve arama motoru algoritmaları sizi cezalandırır.

Öğrendiklerinizi sınayın

ARIA ve HTML bilginizi test edin