🎉 Yeni araç: Basit dil. Düğmeye tıklayın ve canlı olarak deneyin

Görüntülerin engelsiz okunması nasıl mümkün olur!

Kitap üzerinde duran gözlük

Gönderiyi paylaş:

Kitap üzerinde duran gözlük

Görüntülerin engelsiz okunması nasıl mümkün olur!

Bu yazıyı paylaşın:

Kitap üzerinde duran gözlük

 

Dijitalleşme çağında, erişilebilirlik konusu ihmal edilmemelidir. Engelli insanların internetteki içeriğe erişimini kolaylaştırmanın bir yolu da alternatif metinler kullanmaktır. Bu metinler, bir web sitesinin içeriğini belirli engelleri olan kişilerin anlayabileceği bir biçimde yeniden üretecek şekilde tasarlanmıştır. Peki alternatif metin tam olarak nedir? Kimlerin ihtiyacı vardır? Ve nasıl bir tane oluşturabilirsiniz?

Web sitelerini ve web içeriğini erişilebilir kılmak için, diğer şeylerin yanı sıra alternatif metinler, engelli kişilerin erişimini kolaylaştırmak için çok önemlidir. Kör ve görme engelli kişilerin yanı sıra fiziksel veya bilişsel engelleri olan kişiler için bilgi ve işlevleri aktarırlar. Ayrıca grafiklerin, fotoğrafların ve işletim öğelerinin anlaşılmasına da yardımcı olurlar. Ekran okuyucular veya Braille ekranlar metin alternatiflerini kullanır ve bu unsurları engelli kişiler için erişilebilir hale getirir.

 

Öte yandan, arama motoru optimizasyonu için de faydalıdırlar. Metin alternatifleri bir görsel hakkındaki bilgileri arama motorlarına aktarır. Bu da bulunabilirliği artırır.

Metin alternatiflerini nasıl oluşturursunuz?

Bir metin alternatifinin nasıl oluşturulacağı sorusunun cevabı oldukça basittir: böyle bir metinle sağlanacak bir öğenin ilgili alanına alternatif bir metin eklemeniz yeterlidir. Çoğu geliştirici bunu CMS olarak adlandırılan bir sistemde kullanır. CMS kısaltması İçerik Yönetim Sistemi anlamına gelir. Bu, web içeriği oluşturmak ve yönetmek için kullanılan bir yazılımdır.

Bunun için HTML programlama dili de kullanılabilir. Alt etiketi olarak da bilinen alt niteliği burada devreye girer. img etiketinin içine yerleştirilir. Metin, alt niteliğinin iç alanına yazılır ve daha sonra yardımcı teknolojiler aracılığıyla çıktısı alınır.

Ancak bu tek başına yeterli değildir. Başlık niteliği de unutulmamalıdır, çünkü alt niteliğinin açıklamasını değil, başlık niteliğinin açıklamasını okuyan ekran okuyucular vardır. Bu nedenle her iki etiket için de aynı metni girmek mantıklıdır. Bu aynı zamanda fareyi alanın üzerine getirdiğinizde içeriği bir öğe hakkında ek bilgi olarak görüntüleme işlevine de sahiptir.

Bir de aria özniteliği vardır. Daha doğrusu, aria-label özniteliği veya aria-labelledby özniteliği. Bunlar düğmeleri veya form alanlarını etiketlemek için kullanılır.

Farklı görüntü türleri

Giderek dijitalleştiğimiz bir dünyada, sadece metin alternatifleri oluşturmak yeterli değildir. İşlevleri bakımından da farklılık gösterdiklerinden, farklı görüntü türlerini doğru bir şekilde tanımlamak çok daha etkilidir. Ancak öncelikle bunların tanınması gerekir. Bir görüntünün işlevini yansıtmayan tanımlamalar işe yaramaz. Dolayısıyla şu soru ortaya çıkmaktadır: Ne tür görüntüler vardır? Ve bunları tanımlamanın en iyi yolu nedir?

Öncelikle, çeşitli grafik türleri arasındaki farklara aşina olmalısınız. Bir grafiğin anlamını ve amacını anlamak önemlidir. Genel olarak bilgilendirici, işlevsel ve dekoratif grafikler arasında bir ayrım yapılır. Ayrıca sözde yazı karakterleri de vardır. Burada açıklama çok basittir, sadece grafikte gösterilen metni kopyalarsınız.

Bilgilendirici resimler

Bilgilendirici görseller söz konusu olduğunda, bir grafiğin görünür içeriği alternatif metinlerle aktarılır. Görselin mesajıyla ilgili olan bilgilere dikkat edilir. Bunun bir örneği logo açıklamasıdır. Bu, logonun neye benzediğini ve kimin tasarladığını kısaca açıklar.

Aşağıdaki örnekte, bir metin alternatifi HTML'deki bir logoya entegre edilmiştir:

Eye-Able logosu. Bir gözü temsil eder.

<img

src="logo.jpg"

alt="Eye-Able logosu. Bir gözü temsil eder."

title="Eye-Able logosu. Bir gözü temsil eder.">

</img>

Burada, bir resim dosyası img öğesi kullanılarak HTML'ye gömülür ve src niteliği resmin kaynağını belirtir. Grafiğin açıklaması, alt ve title niteliklerine ters virgüller içinde eklenir. Bu şekilde, metin içeriği "The Eye-Able logosu. Bir gözü temsil eder" metin içeriği ekran okuyucu veya Braille ekran aracılığıyla çıktı olarak verilir.

Bu şekilde bariyer ortadan kalkar ve yardımcı teknolojileri kullanan tüm kişiler bu grafikte gösterilenleri anlayabilir.

Diyagramlar

Ancak, eğer bir diyagram ise, buna her zaman duruma göre karar verilmelidir. Bu genellikle türüne ve içerdiği bilgilere bağlıdır. Grafik sadece az miktarda bilgi içeriyorsa, bu alternatif metne dahil edilebilir. Örneğin: "Partilerin seçim sonuçlarını bir çubuk grafikte gösterir. A Partisi: %40, B Partisi: %30, C Partisi: %20 vs.". Bununla birlikte, daha karmaşık veya daha uzun bir şey sunuluyorsa, ayrıntılı bilgilerin sonraki bir metne eklenmesi tavsiye edilir. Alternatif metinde sadece diyagramın türü ve amacı belirtilmelidir. Buna ek olarak, daha ayrıntılı bir açıklamanın aşağıda yer alacağı belirtilebilir. Örnek olarak federal eyaletlerin nüfus rakamlarını gösteren bir grafik verilebilir. Bu durumda içerik şu şekilde olacaktır: "16 federal eyaletin nüfus rakamlarını bir çubuk grafikte göstermektedir. Not: Daha detaylı açıklama metnin devamında yer almaktadır".

Fonksiyonel görüntüler

Daha sonra, işlevsel görüntülere bakacağız. Bunlar bağlantılı grafiklerdir. Bağlantılara, öğelere veya düğmelere ayrılırlar. Metin alternatiflerinde, işlev tanımlanır ve neyin tanınacağı belirtilmez. Bunun yerine, bağlantının nereye gittiğini belirtirsiniz.

İşte bağlantılı bir grafik için HTML'de bir örnek:

<a href=“https://services.eye-able.com/“>

<img src=“logo.jpg“

alt="Eye-Able'ın ana sayfası"

title="Eye-Able'ın ana sayfası"

</img>

</a>

HTML'de bir bağlantı oluşturmak için a etiketi ve href niteliği kullanılır. Bu durumda, https://services.eye-able.com/ sayfasına bağlantı oluşturulur. img öğesinde yine Eye-Able logosunu görüyoruz, ancak bu kez alt ve title nitelikleri grafiği değil, işlevi tanımlıyor. "Eye-Able anasayfası" içeriği artık yardımcı teknolojiler aracılığıyla çıktılanmaktadır.

 

Aynı durum semboller için de geçerlidir. Örneğin, bir disket kullanılıyorsa, simgenin görünümü, kaydetme işlevini sembolize ettiği için ekran okuyuculu çıktı için uygun değildir. Arama simgeleri de bir başka örnektir. Büyüteç olup olmaması önemsizdir. Arkasındaki eylem çok daha ilginçtir. Bu, bir arama seçeneğini veya bir aramanın başlangıcını sembolize eder.

 

Düğmeler için de benzer bir durum söz konusudur. Sağa işaret eden bir ok gösteren bir düğme, alternatif metinde asla "sağa işaret eden ok" olarak etiketlenmemelidir. Gören bir kişi için, üzerine tıkladığınızda bir sonraki sayfanın açıldığı açıktır, ancak görme engelli kişiler için bu geçerli değildir. Bunun nedeni, ses çıkışı yoluyla yalnızca "sağa ok" ifadesini duymalarıdır. Bu yeterince açık değildir veya düğmeye tıklandığında bir sonraki sayfanın açılacağını göstermez. Bu nedenle, bu alternatif metinleri "sonraki sayfaya" veya "kaydırmaya devam et" şeklinde sunmak daha mantıklıdır.

Dekoratif resimler

Bir başka grafik türü de dekoratif görüntülerdir. Bunlar bir web sitesini süslemek için kullanılır. Burada alternatif metin oluşturma prosedürü çok basittir. Alternatif metnin içeriği boş bırakılır. Alternatif metin özelliğinin hala mevcut olması önemlidir. Burada sadece metin içeriği boş bırakılır. Sonuç olarak, ekran okuyucu çıktıdaki bu alakasız grafiği atlar.

İyi alternatif metinler nasıl yazılır?

Çeşitli grafikler sunulduğuna göre geriye tek bir soru kalıyor: "En uygun alternatif metinleri nasıl formüle edersiniz?" Tüm bu incelikleri ve görseller arasındaki farklılıkları öğrendikten sonra, takip etmeniz gereken sadece birkaç kural vardır. Aşağıdaki ipuçları size yardımcı olabilir:

  1. Bir metin alternatifinin başlangıcı:

    Burada mükerrerlik olmamasına dikkat edilmelidir. Bu nedenle başlangıç şu şekilde başlamamalıdır: "Resim ...", "Grafik ...", "Fotoğraf ..." veya "Bağlantı" .... Bunun bir grafik mi yoksa bir bağlantı mı olduğu ekran okuyucular tarafından zaten tanınmakta ve çıktısı alınmaktadır. Bu nedenle bu kısım atlanmalıdır.

  2. Metinlerin uzunluğu:

    Alternatif bir metnin ne kadar uzun olması gerektiği belirtilmemiştir. Ancak, bir grafiği tanımlamak için bir veya iki cümle yeterli olmalıdır. İdeal uzunluk 80 karakterdir. Neden 80? Görme engelli kişiler bu metinleri genellikle bir Braille ekran yardımıyla okurlar. Braille ekranlar bir seferde 40 ile 80 karakter arasında çıktı verebilir. Bu nedenle anlaşılırlık açısından bu sınıra sadık kalınması tavsiye edilir. Elbette bir metin daha uzun da olabilir. Ancak 120 karakteri geçmemelidir.

  3. Yazım ve noktalama:

    Yazımın doğru olduğundan emin olun. Bir sözcük yazım hatası içeriyorsa, ekran okuyucu alternatif metinde depolananları tam olarak çıktıladığından, sözcük hızla anlaşılmaz hale gelebilir. Doğru dilbilgisi de görüntülerin anlaşılmasında önemli bir rol oynar. Ancak doğru noktalama işaretleri de önemlidir. Yanlış veya eksik noktalama işaretleri dinleyicinin grafiği anlamasını zorlaştırır. Bu nedenle, metin içeriği eklenmeden önce yazım ve dilbilgisi kontrolü yapılmalıdır.

  4. Telif hakkı:

    Birçok grafikte telif hakkı bildirimi bulunur. Ancak bu bilgi bir resmi anlamak için önemli midir? Cevap: Hayır! Bir resim açıklaması yalnızca en önemli bilgileri içerdiğinden, bu bilgiler metin alternatiflerinin iyi bir formülasyonu için ilgi çekici değildir. Bu nedenle bu bilgi atlanmalıdır.

  5. Geri bildirim:

    Görsel açıklamasının başarılı olup olmadığını hızlı bir şekilde belirleyebilirsiniz. Ama nasıl? Bu soruya cevap vermek kolaydır. Büyük bir çaba gerektirmez. Kör veya görme engelli bir kişiden alınan kısa geri bildirim, metin içeriğinin mantıklı bir şekilde formüle edilip edilmediği hakkında bilgi sağlar. Ancak herkes görme engelli bir kişiyi tanımıyor. Bu da farklı bir şekilde çözülebilir. Resmi henüz görmemiş olan herkese sorular sorulabilir. Bu elbette yazılı olarak yapılabileceği gibi telefonla da yapılabilir. "Olumlu" bir yanıt alınır alınmaz, açıklama başarılı olmuş demektir.

Alternatif metinler eksikse gerçekte ne olur?

 

Görseller için alternatif metinlerin olmaması özellikle görme engelli kullanıcılar için can sıkıcı olabilir. Bu, grafiğin içeriğini tanıyamayacakları anlamına gelecektir. Aynı zamanda, ekran okuyucu böyle bir durumda yalnızca dosya adını görüntüleyecektir, örneğin: "img123.jpg". Böyle bir açıklama kimseye yardımcı olmayacaktır. Bu nedenle geliştiriciler her zaman metin içeriği kullandıklarından emin olmalıdır. Bununla birlikte, görüntüleri ve grafikleri anlamlı bir şekilde tanımlayabilmek için farklılıkları bilmek de önemlidir. Yardımcı teknolojiler daha sonra bunları metin alternatifleri yardımıyla yeniden üretebilir. Bu aynı zamanda interneti herkes için daha erişilebilir hale getirir.

Herkes için kolay

İlgileniyor musunuz? Size yardımcı olmaktan mutluluk duyarız.

Dijital erişilebilirlikle ilgili 25'ten fazla fonksiyona sahip olan Eye-Able, uzun vadede engellerinizi azaltmanıza da yardımcı olur. Bilgilerinizi herkes için erişilebilir hale getirebilir ve hiçbir ziyaretçiyi dışlamayabilirsiniz - kısacası: yüksek pazarlama hacimleri olmadan yeni bir hedef kitleye ulaşabilirsiniz.

Simge erişilebilirlik şeklini gösterir

Danışmanlık görüşmesi

Genel olarak dijital erişilebilirliğe ilişkin bağlayıcı olmayan istişare

Simge erişilebilirlik şeklini gösterir

Analiz

Web sitenizdeki olası optimizasyon potansiyelinin tartışılması

Simge erişilebilirlik şeklini gösterir

Canlı demo

Yardım yazılımının doğrudan web sitenizde sunulması

Diğer katkılar

Biraz daha istersen: