Resimler

Erişilebilir resimler ilk bakışta basit bir konu gibi görünebilir. "alternatif metinler" işlemi gerçekleştirebilirsiniz. Ancak konu daha hassas bazı insanlardan çok daha iyi. Bu bölümde aşağıdaki konuları ele alacağız:

• Resimlerin erişilebilir olması 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ı

Resmin amacı ve bağlamı

Tek bir kod satırı bile yazılmadan önce ilk olarak ne yazık ki ve nasıl kullanılacağı. Kendinize Görselin amacı ve bağlamı, içeriği en iyi şekilde nasıl aktaracağınızı ya da tabletten bile yardımcı teknoloji (AT) değiştirilebilir.

Kendinize şunları sorabilirsiniz:

• Resim, özelliğin veya sayfanın bağlamını anlamak için önemli mi?
• Resimde iletmeye çalıştığı bilgi türü nedir?
• Resim basit mi yoksa karmaşık mı?
• Resim, duygu uyandırıyor mu veya kullanıcıyı harekete geçmeye teşvik ediyor mu?
• Yoksa sadece görsel olarak mı görsel? ne anlama geliyor?

Bir görsel akış şeması, örneğin görüntü karar ağacı, resminizin hangi kategoriye ait olduğuna karar vermenize yardımcı olabilir.

Bir tarayıcı uzantısı kullanarak sitenizdeki veya web uygulamanızdaki resimleri gizlemeyi deneyin veya başka yöntemler de kullanabilirsiniz. Sonra kendinize sorun: "Kalan içeriği anlıyor muyum?" Yanıtınız evetse bu büyük olasılıkla dekoratif bir resimdir. Aksi halde resim bir şekilde bilgilendirici ve bağlamsal olarak gerekli. Planınızı amacını belirledikten sonra, kodlamanın en doğru yolunu belirleyebilirsiniz. sahip olacaksınız.

Dekoratif resimler

Dekoratif resimler, izin veren ek bağlam veya bilgi eklemeyen daha iyi anlamalarını sağlayabilirsiniz. Dekoratif resimler tamamlayıcı resimlerdir ve içerik yerine stil sağlar.

Bir resmin süsleme amaçlı olduğuna karar verirseniz resmin programlı olarak gizlenmesi gerekir oluşturuyoruz. Bir resmi gizli olacak şekilde programladığınızda, bu, AT'ye resmin sayfanın içeriğini, bağlamını veya işlemini anlamak için gerekli değildir. Orada resimleri gizlemenin pek çok yolu vardır. Örneğin, boş/boş metin ARIA'yı uygulama veya resmi CSS arka planı olarak ekleyin. Aşağıda, bir öğeyi nasıl gizleyeceğinizi gösteren kullanıcılardan dekoratif bir resim aldı.

Boş veya geçersiz alt

Boş/boş alternatif metin özelliği, eksik bir alternatiften farklı text (metin) özelliğiyle kullanılabilir. Alternatif metin özelliği eksikse AT, kullanıcıya daha fazla bilgi vermek için dosya adını veya etrafındaki içeriği resim hakkında.

Rol presentation veya none olarak ayarlandı

presentation veya none olarak ayarlanmış bir rol bir öğenin anlamını erişilebilirlik gösteriminden kaldırır ağacı. Bu esnada, aria-hidden= "true" öğenin tamamını ve tüm alt öğelerini Accessibility API'ye

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

Şu öğeleri gizleyebileceği için aria-hidden uygulamasını dikkatli kullanın: öne çıkarmanıza yardımcı olur.

CSS'deki resimler

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

Bilgilendirici resimler

Bilgilendirme amaçlı görsel, basit bir kavramı, fikri veya duyguyu açıklayan bir görseldir. Bilgilendirici resim türleri arasında gerçek dünyaya ait nesnelerin fotoğrafları, önemli simgeler, basit çizimler ve metin görselleri yer alır.

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 sunar ve bir resmin mesajını veya amacını daha iyi anlamalarına yardımcı olur.

Basit alternatif açıklamalar <img> öğe dosya türü ne olursa olsun alt özelliği eklenerek elde edilir. işaret edenler (ör. .jpg, .png, .svg ve diğerleri).

<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 semantik olarak kodlandığından, AT varsayılan olarak bunları atlar. Dekoratif bir resminiz varsa bu bir sorun değildir. AT, bunu göz ardı eder gerektiği şekilde ele alacağız. Ancak bilgilendirici bir görseliniz varsa ARIA role="img" AT'nin bunu bir resim olarak tanıması için desene eklenmesi gerekir.

İkinci olarak, <svg> öğeleri alt özelliğini kullanmaz. farklı kodlama yöntemlerinin yerine kullanılan bilgilendirici resimlerinize alternatif açıklamalar eklemek için kullanılır.

  <svg role="img"...>
     <title>Cartoon drawing of a red, black, and gray ladybug.</title>
  </svg>

İşlevsel görüntüler

İşlevsel bir görsel bir eyleme bağlı olması gerekir. İşlevsel resme örnek olarak arama düğmesi olarak kullanılan büyüteç veya sosyal medya veya uygulamaya yönlendiren simge.

Bilgilendirici görseller gibi, işlevsel resimlerde de görsele açıklamaya dikkat edin. Bilgilendirici görsellerin aksine her işlevsel resmin görseldeki işlemi açıklaması gerekir, çok iyi olur.

Logo örneğinde resim bilgilendirici ve uygulanabilir olmasının yanı sıra Bilgi ileten ve bağlantı gibi davranan bir resim. Böyle durumlarda her öğeye alternatif açıklamalar ekleyebilirsiniz, ancak bu gerekir.

Resimlere alternatif açıklamalar eklemenin bir yolu, metin. Bu yöntemi kullandığınızda metin ekran okuyucular tarafından okunur, çünkü bunu DOM'de görebilirsiniz ancak özel CSS'nin yardımıyla görsel olarak gizlenmiştir.

Kod snippet'inde "Ana sayfaya git"in , sarmalayıcı başlığını ve resmin alternatif metni de "Bu Arkadaş Bitkiler Bahçe”. Logo kodunu ekran okuyucuyla dinlediğinizde hem görsel ve eylemin tek bir resimde ifade edilmesini sağlar.

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

Karmaşık görüntüler

Sıklıkla karmaşık bir görüntü ya da ibaret olmayan bitkilerin reklamını yapan işlevsel bir görsel sunduğundan emin olun. Hem kısa hem de uzun bir alternatif tam mesajı aktarmak için açıklama ekleyin. Karmaşık görüntüler bilgi görselleri, haritalar, grafikler/çizelgeler ve karmaşık resimler. Diğerlerinde olduğu gibi her bir ayar için alternatif eklemek üzere kullanabileceğiniz açıklamanıza yardımcı olur.

<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ı vermektir veya sayfanın ilerleyen kısımlarında daha uzun bir açıklamaya atlama bağlantısı sağlayın. Bu yöntem hem AT kullanıcıları için değil, aynı zamanda bilişsel, öğrenme ve okuma gibi engeller engelli bireylere yönelik ekranda kolayca ulaşılabilen ve kod içine gömülü olmayan bilgiler gösterilir.

Kullanabileceğiniz bir diğer yöntem de aria-describedby özelliğini <img> öğesi. Görüntüyü, CANNOT TRANSLATE daha uzun açıklama. Bu yöntem, resim ile arasında güçlü bir ilişki ve tam açıklama girilmelidir. Genişletilmiş açıklama, veya görsel olarak gizlenmiş olabilir. Ancak destek sağlamak için teşvik edebilirsiniz.

Kısa alternatif açıklamaları daha uzun olanla gruplandırmanın bir başka yolu da HTML5 <figure> ve <figcaption> öğelerini kullanmaktır. Bu öğeler, öğeleri anlamsal olarak gruplandırarak resim ile açıklaması arasında daha güçlü bir ilişki oluşturma açısından aria-describedby işlevine benzerdir. ARIA role="group" eklenmesi, <figure> öğesinin yerel anlamını desteklemeyen eski web tarayıcılarıyla geriye dönük uyumluluk sağlar.

Alternatif metinlerle ilgili en iyi uygulamalar

Elbette alternatif metin eklemek yeterli değildir. Metin ayrıca her şeyi kapsıyor. Örneğin, resminiz boğa burcunun özelliklerini çiğneyen uğur böcekleriyle ilgiliyse ödül yapraklarını güle güle güle güle gelir bir ifade kullanmayı tercih ediyor musunuz? Kesinlikle hayır.

Alternatif açıklamalar, mümkün olduğunca alakalı görsel bilgileri yakalamalıdır. kısa ve öz konuşun. Karakter sayısında bir sınırlama olmasa da ekran okuyucu okuyabildiğinden, genellikle alternatif metninizi Okuyucunun yorulmasını önlemek için en fazla 150 karakter. Daha fazla bilgi eklemek için bağlam eklemek için karmaşık resim kalıplarından birini kullanabilir, ana metinde resmi daha ayrıntılı şekilde açıklayabilir.

En iyisi ek alternatif metinler uygulamalar şunları içerir:

• "Resmi" gibi kelimeler kullanmaktan kaçının veya "fotoğrafı" açıklama kısmında ekran okuyucu sizin için bu dosya türlerini belirler.
• Resimlerinizi adlandırırken mümkün olduğunca tutarlı ve doğru olun. Resim adları, alternatif metin olmadığında veya yoksayıldığında yedek olarak kullanılır.
• Alfa olmayan karakterler (ör. #, 9, &) kullanmaktan kaçının ve tire işareti kullanın. kelimeler arasında alt çizgi kullanın.
• Mümkünse noktalama işaretlerini doğru kullanın. Bu olmadan, resim açıklamaları uzun, bitmeyen ve üstü kapalı bir cümle gibi gelecektir.
• Robot değil insan gibi alternatif metinler yazın. Anahtar kelime doldurma, Kimsenin yararına değildir. 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