iPhone erişilebilirlik: Erişilebilirlik ayarlarından en iyi şekilde nasıl yararlanılır?

Alternatif metin (alt text), bir resimde ne görülebileceğini açıklayan bir metindir. Görme engelliler veya görme bozukluğu olanlar da dahil olmak üzere herkesin web sitenize erişebilmesini sağlamak için kullanılır.

Ekran okuyucular alternatif metni sesli olarak okuyarak kullanıcıların bir görüntünün neyi temsil ettiğini anlamalarını sağlar. Bu, alternatif metnin dijital erişilebilirliğe doğrudan katkıda bulunduğu ve web sitenizin WCAG yönergelerine uymasına yardımcı olduğu anlamına gelir.

Alternatif metin (alt metin) yalnızca erişilebilirliği iyileştirmekle kalmaz, aynı zamanda SEO'nuzu da güçlendirir. Açık açıklamalar, arama motorlarının bir görselin neyle ilgili olduğunu anlamasına yardımcı olarak hem kullanılabilirliği hem de web sitesi performansını destekler.

Kısacası

• Alternatif metin, web sitelerini herkes için erişilebilir hale getirir.

• Açık ve anlaşılır açıklamalar, arama motorlarının içeriğinizi daha iyi anlamasına yardımcı olur.

• Alternatif metin, dijital erişilebilirlik yönergelerine uyum için çok önemlidir.

İyi alternatif metin (alt metin) nasıl yazılır?

Açıklamak istediğiniz öğeye kısa bir açıklama ekleyerek alternatif metin (alt text) oluşturursunuz. Bu, kodda veya içerik yönetim sisteminiz (CMS) aracılığıyla yapılabilir. Bir CMS, gelişmiş teknik bilgiye ihtiyaç duymadan web sitesi içeriğini yönetmenizi sağlar.

HTML'de, açıklamayı `img` etiketinin içine `alt` özniteliğini kullanarak eklersiniz. Bu, kullanıcılara ve yardımcı teknolojilere resmin neyi gösterdiğini söyler. Örneğin:

<img src="flower.jpg" alt="vazoda sarı lale" title="vazoda sarı lale">

Alt özelliğine ek olarak, şunları da kullanabilirsiniz: başlık niteliği Bu, kullanıcılar bir öğenin üzerine geldiğinde ek bilgi sağlar. Bazı ekran okuyucular alt metin yerine başlığı okur. Her ikisinde de aynı açıklamayı kullanarak, hiçbir bilginin kaybolmamasını sağlarsınız.

Düğmeler ve formlar için şunu kullanın: ARIA nitelikleri örneğin aria-etiketi veya aria-etiketli . Bunlar, görsel ipuçları olmasa bile bir öğenin işlevini tanımlar.

Bağlanmak

Amaç

Örnek

alternatif

Görüntünün açıklaması

<img alt=" Eye-Able logosu">

başlık

Ek açıklama

<img title="Eye-Able logosu">

aria-etiketi

Tanımlıyor düğmeler veya formlar

<button aria-label="Formu gönder">

Farklı görüntü türleri

Bilgilendirici görseller

Bilgilendirici görseller temel içerik barındırır. Ekran okuyucu kullanıcılarının görsel olarak gösterilenleri anlamalarına yardımcı olurlar.

Bunun yaygın bir örneği logodur. Alternatif metin, logonun neyi gösterdiğini ve hangi kuruluşa ait olduğunu kısaca açıklamalıdır.

<img src="logo.jpg" alt=" Eye-Able logosunda stilize edilmiş bir göz görülmektedir. başlık=" Eye-Able logosunda stilize edilmiş bir göz görülmektedir. ">

“Güzel görüntü” veya “fotoğraf” gibi belirsiz ifadelerden kaçının. Sadece ilgili bilgilere odaklanın.

Ekran okuyucu bu metni sesli olarak okur, böylece görüntüyü göremeyen biri bile bunun Eye-Able logosu olduğunu anlar. Bu, web sitesini erişilebilir kılar ve WCAG yönergelerine uygun olmasını sağlar.

Örnekler:

Kötü örnek

İyi bir örnek

“Grafik görseli”

“2025 yılı satış rakamlarını gösteren çubuk grafik”

"Logo"

“Stilize edilmiş bir göz içeren Eye-Able logosu”

"Fotoğraf"

“Dizüstü bilgisayarında çalışan bir çalışanın portresi”

Grafikler ve diyagramlar

Grafikler verileri ve ilişkileri gösterir. Alternatif metin, grafiğin neyi gösterdiğini ve neden önemli olduğunu açıklamalıdır.

• Basit grafikler için, temel verileri doğrudan alternatif metne ekleyin.

• Karmaşık grafikler için amacını açıklayın ve kullanıcılara ayrıntılar için yakındaki metne yönlendirin.

Şema karmaşık ise, amacını açıklayın ve daha fazla ayrıntı için aşağıdaki metne atıfta bulunun. Bu, alternatif metnin çok uzun olmasını önler.

Örnek:
<img src="election-chart.jpg" alt="Seçim sonuçlarını gösteren çubuk grafik. Daha ayrıntılı açıklama metinde yer almaktadır.">

Önemli rakamların metin olarak da sunulduğundan emin olun, böylece herkes bilgilere erişebilsin.

İşlevsel görüntüler

İşlevsel görseller, düğmeler, simgeler veya bağlantılı logolar gibi eylemleri tetikler. Alternatif metin (alt metin) açıklama içermelidir. resmin yaptığı şey Göründüğü gibi değil.

Örnek:

<a href="https://eye-able.com/"> <img src="logo.jpg" alt="Eye-Able ana sayfasına git" title="Eye-Able ana sayfasına git"</a>

Buradaki alternatif metin, görselin ana sayfaya bağlantı verdiğini gösteriyor. Logonun görünümü önemli değil, işlevi önemli.

İyi örnekler:

• "Aramayı başlat"

• “Formu gönder”

• “Sonraki sayfa”

"Ok" veya "büyüteç" gibi görsel tanımlamalardan kaçının.

Yaygın işlevsel görüntüler:

Görüntü türü

İşlev

Örnek alternatif metin

Arama simgesi

Arama başlat

"Aramayı başlat"

Kaydet simgesi

Belgeyi kaydedin

"Kaydetmek"

Sağa ok

Sonraki sayfaya git

"Sonraki sayfa"

Ana sayfa simgesi

Ana sayfaya git

"Anasayfa"

Bu yaklaşım, ekran okuyucu kullanıcıları da dahil olmak üzere herkesin, resme tıkladıklarında ne olacağını anlamasını sağlar.

Dekoratif resimler

Dekoratif görseller içeriğe herhangi bir katkı sağlamaz. Sadece atmosfer veya tasarım amacıyla oradadırlar. Bu durumda, alt özelliğini boş bırakın:

<img src="background-pattern.jpg" alt="">

Ekran okuyucular bu görüntüleri atlayarak gereksiz kesintilerin önüne geçecektir.

Dekoratif görselleri bilinçli olarak kullanın. Bir fotoğraf veya simge içeriğe dair bir şey anlatıyorsa, dekoratif olmamalıdır. Bu durumda, bir açıklama eklemelisiniz.

Dekoratif görseller için kontrol listesi:

• Görüntü anlam katıyor mu? ?
  Evet → alternatif metin ekle.
  Hayır → alt özelliğini boş bırakın.

• Tamamen dekoratif mi?

  Evet → kullanın alt="" .

• Bu bir düğmenin veya bağlantının parçası mı?

  Hayır → o zaman dekoratif olabilir.

Dekoratif ve bilgilendirici görseller arasında net bir ayrım yapmak, web sitenizin erişilebilirliğini artırmaya yardımcı olur.

Alternatif metin (alt text) kullanımını bu şekilde yaparak web sitenizi herkes için daha anlaşılır ve kullanıcı dostu hale getirirsiniz.

Etkili alternatif metin nasıl yazılır?

İyi yazılmış alternatif metinler, görselleri göremeyen kişilerin içeriği anlamasına yardımcı olur. Görselde ne görülebileceğini kısaca ve net bir şekilde açıklayarak iyi bir alternatif metin yazabilirsiniz.

En iyi uygulamalar:

• Özlü ve açıklayıcı olun.

• “Resmi” veya “fotoğrafı” gibi ifadelerden kaçının.

• Bağlamla ilgili olan şeylere odaklanın.

• Alternatif metni arasına yerleştirin. 80–120 karakter

• Doğru yazım ve dilbilgisi kullanın.

Yönergelerin genel bakışı

Bakış açısı

Kılavuz

Örnek

Açılış

“Görüntü”den kaçının.

"Köy yolunda mavi araba"

Uzunluk

80–120 karakter

“Kütüphanede dizüstü bilgisayarlarında çalışan iki öğrenci”

Dil

Açık ve doğru

Kısaltma veya emoji yok.

Odak

Yalnızca ilgili bağlam

Önemli olanı açıklayın.

Alternatif metin (alt text) aynı zamanda SEO'yu da destekler. Arama motorları, görselleri anlamak için alternatif metni kullanır ve bu da anahtar kelime doldurma işlemine gerek kalmadan görsel arama sonuçlarında görünürlüğü artırır.

Ekran okuyucu kullanan veya görseli bilmeyen birinden geri bildirim isteyin. Verdikleri yanıt, açıklamanızın yeterince açık olup olmadığını gösterecektir. Görselin ne gösterdiğini anlıyorlarsa, alternatif metninizin iyi çalıştığını bilirsiniz. Bu, web sitenizi herkes için daha erişilebilir ve kullanıcı dostu hale getirecektir.

Alternatif metin eksikse ne olur?

Olmadan alternatif metin, Ekran okuyucular img123.jpg gibi dosya adlarını sesli olarak duyurur. Kullanıcılar önemli bilgileri kaçırır ve web siteniz WCAG ve erişilebilirlik mevzuatını ihlal edebilir.

Alternatif metnin eksik olmasının sonuçları:

• Kullanıcılar içeriği anlamıyor

• Siteniz WCAG 2.2 gereksinimlerini karşılamıyor.

• Erişilebilirlik yasaları uyarınca kuruluşlar para cezası riskiyle karşı karşıya kalabilir.

Alternatif metin, eşit erişimi ve Avrupa Erişilebilirlik Yasası'na (EAA) uyumu sağlar.

Dijital erişilebilirlik mevzuatı

Dijital erişilebilirlik yasaları, kuruluşların web sitelerini ve uygulamalarını engelliler de dahil olmak üzere herkes için kullanılabilir hale getirmelerini gerektirir.

• WCAG yönergeleri erişilebilirlik standartlarını tanımlar.

• İtibaren 28 Haziran 2025 , o Avrupa Erişilebilirlik Yasası (EAA) Bu durum birçok dijital ürün ve hizmet için geçerlidir.

• Uygulama, çeşitli (devlet) kurumları veya kuruluşları tarafından denetlenmektedir.

Başlıca yükümlülükler:

• EN 301 549 standardına uygundur.

• Erişilebilirlik bildirimi yayınlayın

• Görseller ve medya için metin alternatifleri sağlayın.

• Erişilebilirliği sürekli olarak izleyin ve koruyun.

WCAG yönergeleri ve alternatif metin

WCAG 2.2, alternatif metnin nasıl kullanılacağını açıklıyor:

• Her anlamlı görselin açıklayıcı bir alternatif metne ihtiyacı vardır.

• Dekoratif resimler alt="" kullanır.

• Bağlam, neyin alakalı olduğunu belirler.

• Erişilebilirlik araçlarını kullanarak düzenli olarak test edin.

WCAG 2.2'den önemli noktalar:

Kılavuz

Açıklama

Alternatif metinler gereklidir.

Anlamlı her görselin altına açıklayıcı alternatif metin eklenmiştir.

Dekoratif resimler

Boş alternatif metin kullanın ( alt="" Resim herhangi bir bilgi eklemiyorsa.

Bağlam önemlidir.

Sayfanın içeriğiyle ilgili olan hususları açıklayın.

İçeriğinizi test edin

Alternatif metinlerinizin gereksinimleri karşıladığını doğrulamak için bir WCAG denetleyicisi kullanın.

Sıkça sorulan sorular

1. Görsellere alternatif metin nasıl eklerim?

HTML koduna veya içerik yönetim sisteminiz (CMS) aracılığıyla kısa ve net bir açıklama içeren `alt` özniteliğini ekleyin.

2. Alternatif metni herkes için nasıl anlaşılır hale getirebilirim? ?

Basit bir dil kullanın, gereksiz ayrıntılardan kaçının ve kullanıcıların aksi takdirde kaçıracakları şeyleri açıklayın.

İyi alternatif metin:

• Görüntü görünmediğinde kişinin neleri kaçırdığını açıklar.

• WCAG'in dijital erişilebilirlik yönergelerini dikkate alır.

• Sayfanın içeriğine uygundur.

3. Hangi hatalardan kaçınmalıyım?

Birçok kişi alternatif metin alanını boş bırakıyor veya çok uzun cümleler yazıyor. Bu da web sitesine erişimi zorlaştırıyor.

Bu hatalardan kaçının:

1. Alternatif metni boş bırakmak

2. Genel tanımlamalar yazmak

3. Anahtar kelime doldurma

4. Tamamen dekoratif amaçlı görsellere alternatif metin ekleme

4. Alternatif metin (alt text) web sitemin SEO'sunu nasıl iyileştirir?

Alternatif metin (alt text), arama motorlarının bir görselin içeriğini anlamasına yardımcı olur. Bu, görselinizin Google Görseller'deki sıralamasını iyileştirebilir.

İyi yazılmış alternatif metin:

• Web sitenizin bulunabilirliğini artırır.

• Arama motorlarına bağlam sağlar.

• Kullanıcıların sitenizi ziyaret etme olasılığını artırır.

5. Alt metnin eksikliği erişilebilirliği etkiler mi?

Evet, alternatif metin olmadan ekran okuyucular görüntünün içeriğini açıklayamaz. Bu durumda görme engelli kişiler bilgiden mahrum kalır.

Alternatif metin (alt text), herkesin, görme yeteneğinden bağımsız olarak aynı içeriği anlamasını sağlar. Bu da web sitenizi daha erişilebilir ve kullanıcı dostu hale getirir.

6. Alternatif metnimi nasıl test edebilirim?

Eksik veya belirsiz alternatif metinleri anında belirlemek için NVDA veya VoiceOver gibi ekran okuyucuları kullanın veya sitenizi Eye-Able erişilebilirlik platformuyla kontrol edin.

Erişilebilirlik kontrolü yapan araçları da kullanabilirsiniz, örneğin Eye-Able Platformumuz. Alternatif metinlerinizin eksik veya anlaşılmaz olup olmadığını hızlı ve kolay bir şekilde gösteriyoruz.