Görsellerin erişilebilir bir şekilde okunması nasıl mümkün olabilir!

Dijitalleşme çağında erişilebilirlik konusu göz ardı edilmemelidir. Engelli bireylerin internet içeriğine erişimini kolaylaştırmanın bir yolu da alternatif metinler olarak adlandırılan içeriklerdir. Bu metinler, belirli engellere sahip kişilere bir web sitesinin içeriğini anlayabilecekleri bir biçimde sunmak üzere tasarlanmıştır. Peki: Tam olarak böyle bir alternatif metin nedir? Kimin ihtiyacı var? Ve nasıl oluşturulur?

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 açısından çok önemlidir. Bu metinler, görme engelli ve az gören kişilerin yanı sıra fiziksel veya bilişsel engelli kişiler için de bilgi ve işlevleri iletir. Ayrıca, insanların grafikleri, fotoğrafları ve kontrolleri anlamalarına yardımcı olurlar. Ekran okuyucular veya Braille ekranları, metin alternatiflerini kullanarak 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 resim hakkındaki bilgileri arama motorlarına aktarır. Bu da bulunabilirliği artırır.

Metin alternatifleri nasıl oluşturulur?

Alternatif metin oluşturmanın cevabı oldukça basittir: Bunu yapmak için, alternatif metni, bu tür bir metnin verileceği öğenin uygun alanına eklemeniz yeterlidir. Çoğu geliştirici bunu CMS adı verilen bir yazılımda uygular. CMS kısaltması İçerik Yönetim Sistemi anlamına gelir. Bu, web içeriğinin oluşturulması ve yönetimi için kullanılan bir yazılımdır.

HTML programlama dili de bunun için kullanılabilir. İşte burada alt özniteliği veya alt etiketi devreye giriyor. Bu öznitelik, img etiketinin içine yerleştirilir. Metin, alt özniteliğinin iç alanına yazılır ve daha sonra yardımcı teknolojiler aracılığıyla çıktı olarak verilir.

Ancak bu tek başına yeterli değil. Başlık (title) özniteliği de unutulmamalıdır, çünkü bazı ekran okuyucular alt özniteliğinin açıklamasını değil, başlık özniteliğinin açıklamasını okur. Bu nedenle, her iki etiket için de aynı metni belirtmek mantıklıdır. Ayrıca, bu, fare imleci alanın üzerine getirildiğinde içeriğin öğe hakkında ek bilgi olarak görüntülenmesi işlevini de yerine getirir.

Ayrıca, aria özniteliği de mevcuttur. 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 daha dijital hale geldiğimiz bir dünyada, sadece metin alternatifleri oluşturmak yeterli değil. Görüntülerin farklı türlerini doğru bir şekilde tanımlamak çok daha etkili olur, çünkü işlevleri de farklılık gösterir. Ancak, öncelikle bunların tanınması gerekir. Bir görüntünün işlevini yansıtamayan tanımlamalar işe yaramaz. Bu nedenle şu soru ortaya çıkıyor: 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 farkları öğrenmelisiniz. Bir grafiğin amacını anlamak önemlidir. Genel olarak, bilgilendirici, işlevsel ve dekoratif grafikler arasında bir ayrım yapılır. Ayrıca, yazı tipleri de vardır. Burada açıklama çok basittir, diyagramda görülecek metni buraya yerleştirmeniz yeterlidir.

Bilgilendirici görseller

Bilgilendirici görsellerde, bir grafiğin görünür içeriği alternatif metinlerle iletilir. Görselin mesajıyla ilgili bilgilere dikkat edilir. Bunun bir örneği logo açıklamasıdır. Burada, logonun nasıl göründüğü ve kim tarafından tasarlandığı hakkında kısa bir açıklama verilir.

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

<img

src="logo.jpg"

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

Başlık="Eye-Able logosu. Bir gözü temsil eder.">

</img>

Burada, img elementi kullanılarak HTML'ye bir resim dosyası yerleştirilir ve src özniteliği resmin kaynağını belirtir. Grafiğin açıklaması, alt ve title özniteliklerine tırnak içinde eklenir. Bu şekilde, ekran okuyucu veya Braille ekranı aracılığıyla "Eye-Able logosu. Bir gözü temsil eder" metin içeriği görüntülenir.

Bu sayede engel ortadan kalkar ve yardımcı teknolojileri kullanan herkes bu grafikte görülenleri anlayabilir.

Diyagramlar

Ancak, eğer bir diyagram söz konusuysa, bu her zaman duruma göre değerlendirilmelidir. Bu genellikle türüne ve içerdiği bilgilere bağlıdır. Grafik yalnızca az miktarda bilgi içeriyorsa, bu bilgi alternatif metne eklenebilir. Örneğin, "Partilerin seçim sonuçlarını çubuk grafikte gösterir. A Partisi: %40, B Partisi: %30, C Partisi: %20, vb." Ancak, daha karmaşık veya uzun bir şey sunuluyorsa, ayrıntılı bilgilerin daha sonraki bir metne eklenmesi önerilir. Alternatif metin daha sonra yalnızca diyagramın türünü ve amacını belirtmelidir. Ek olarak, daha ayrıntılı açıklamanın aşağıda yer aldığı belirtilebilir. Bir örnek, Alman eyaletlerinin nüfus rakamlarını gösteren bir grafik olabilir. İçerik şu şekilde olabilir: "16 federal eyaletin nüfus rakamlarını çubuk grafikte gösterir. Not: Daha ayrıntılı açıklama metnin devamında yer almaktadır."

İşlevsel görüntüler

Şimdi de işlevsel görselleri ele alalım. Bunlar bağlantılı grafiklerdir. Bağlantılar, öğeler veya düğmeler olarak ayrılırlar. Metin alternatiflerinde, neyin tanınacağını değil, işlevini tanımlarsınız. Bunun yerine, belirtirsiniz. Neresi Bağlantı şuraya yönlendiriyor.

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

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

<img src="logo.jpg">

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

başlık="Eye-Able'in ana sayfası"

</img>

</a>

HTML'de bağlantı oluşturmak için `a` etiketi ve `href` özniteliği kullanılır. Bu örnekte, sayfaya bir bağlantı oluşturulmuştur. https://eye-able.com/ `img` öğesinde yine Eye-Able logosunu görüyoruz, ancak bu sefer `alt` ve `title` öznitelikleri grafik yerine işlevi açıklıyor. Böylece, "Eye-Able ana sayfası" içeriği artık yardımcı teknolojiler aracılığıyla görüntüleniyor.

Aynı durum semboller için de geçerlidir. Örneğin, disket kullanılıyorsa, simgenin görünümü ekran okuyucu ile çıktı için önemli değildir çünkü kaydetme işlevini sembolize eder. Başka bir örnek de arama simgeleridir. Bunun büyüteç olup olmaması önemsizdir. Çok daha ilginç olan, arkasındaki eylemdir. Bu, bir arama seçeneğini veya bir aramanın başlangıcını temsil eder.

Butonlarda da durum benzerdir. Sağa doğru ok işaretini temsil eden bir butonun alternatif metninde asla "sağa doğru ok" ifadesi yer almamalıdır. Görme engeli olmayan bir kişi için, buton üzerine tıklandığında bir sonraki sayfanın açılacağı açıktır, ancak görme engelli kişiler için durum böyle değildir. Çünkü onlar sadece sesli çıktı yoluyla "sağa doğru ok" ifadesini duyarlar. Bu yeterince açık değildir veya buton basıldığında bir sonraki sayfanın açıldığını göstermez. Bu nedenle, bu alternatif metinlere "sonraki sayfaya git" veya "kaydırmaya devam et" gibi ifadeler eklemek daha mantıklıdır.

Dekoratif resimler

Bir diğer grafik türü de dekoratif resimlerdir. Bunlar bir web sayfasını süslemek için kullanılır. Alternatif metin oluşturma prosedürü burada çok basittir. Burada alternatif metnin içeriği boş bırakılır. Alternatif metinlerin özniteliğinin hala mevcut olması önemlidir. Burada sadece metin içeriği boş bırakılır. Bunun sonucu olarak ekran okuyucu, çıktıda bu alakasız grafiği atlar.

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

Çeşitli görseller tanıtıldıktan sonra geriye tek bir soru kalıyor: "En uygun alternatif metinleri nasıl oluşturursunuz?" Görsellerin tüm bu inceliklerini ve farklılıklarını öğrendikten sonra, izlenecek birkaç kural kalıyor. Aşağıdaki ipuçları yardımcı olabilir:

1. Metin alternatifinin başlangıcı:

   Burada tekrarların oluşmamasına dikkat edilmelidir. Bu nedenle başlangıç "Resim...", "Grafik...", "Fotoğraf..." veya "Bağlantı..." gibi ifadelerle başlamamalıdır. Grafik veya bağlantı olması fark etmeksizin, ekran okuyucular tarafından zaten tanınıp görüntülenmektedir. Bu nedenle, bu ifadelerden vazgeçilmelidir.

2. Metinlerin uzunluğu:

   Alternatif metnin ne kadar uzun olması gerektiği belirtilmemiştir. Ancak, bir grafiğin açıklaması 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 Braille ekranı yardımıyla okurlar. Braille ekranları bir seferde 40 ila 80 karakter arasında çıktı verebilir. Bu nedenle, netlik açısından bu sınıra uyulması tavsiye edilir. Elbette, bir metin daha uzun olabilir. Ancak, 120 karakteri geçmemelidir.

3. Yazım ve noktalama:

   Doğru yazım kurallarına dikkat edilmelidir. Bir kelimede yazım hatası varsa, ekran okuyucu alternatif metinde saklananı aynen gösterdiği için hızla belirsizliğe yol açabilir. Benzer şekilde, doğru dilbilgisi görsellerin anlaşılmasında önemli bir rol oynar. Ancak doğru noktalama da önemlidir. Yanlış veya eksik noktalama, 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 hakları:

   Birçok görselde telif hakkı uyarısı bulunur. Peki bu bilgi bir görseli anlamak için önemli midir? Cevap: Hayır! İyi bir metin alternatifi oluşturmak için bu bilgi önemsizdir, çünkü bir resim açıklamasında yalnızca en önemli şeyler yazılır. Bu nedenle, bu bilgi atlanmalıdır.

5. Geri bildirim:

   Görsel açıklamasının başarılı olup olmadığını belirlemek kolaydır. Peki nasıl? Bu sorunun cevabı da kolaydır. Çok fazla çaba gerektirmez. Görme engelli veya az gören bir kişiden alınacak kısa bir geri bildirim, metin içeriğinin mantıklı bir şekilde oluşturulup oluşturulmadığı konusunda bilgi sağlar. Ancak herkes görme engelli birini tanımaz. Bu da başka bir şekilde çözülebilir. Resmi henüz görmemiş olan herkes burada sorgulanabilir. Bu elbette yazılı olarak yapılabilir, ancak telefonla da yapılabilir. "Olumlu" bir geri bildirim geldiği anda, açıklama başarılı demektir.

Alternatif metinler eksik olduğunda aslında ne olur?

Görseller için alternatif metinlerin olmaması, özellikle görme engelli kullanıcılar için oldukça rahatsız edici olabilir. Bu, grafiğin içeriğini göremeyecekleri anlamına gelir. Aynı zamanda, ekran okuyucu bu durumda yalnızca dosya adını, örneğin: "img123.jpg" şeklinde gösterecektir. Bu tür bir açıklama kimseye yardımcı olmaz. Bu nedenle geliştiriciler her zaman metin içeriği kullanmaya özen göstermelidir. Bununla birlikte, görselleri ve grafikleri anlamlı bir şekilde tanımlayabilmek için farklılıkları bilmek de önemlidir. Yardımcı teknolojiler daha sonra bunları metin alternatiflerini kullanarak işleyebilir. Bu da interneti herkes için biraz daha erişilebilir hale getirir.