Daha iyi anlaşılması için görüntülere ve grafiklere ayrıntılı açıklama ekleyin

Görüntüler, ziyaretçilerinizin katılımını sağlamanın mükemmel bir yolu olabileceği gibi, karmaşık düşünceleri iletmeye de yardımcı olabilir.

Görüntü açıklamalarına çoğunlukla "alternatif açıklama" veya "alternatif metin" denir. Görüntü açıklamaları, görüntüye metin tabanlı, açıklayıcı bir alternatif sağlar.Görüntünün içeriğini bildiren açıklamalar, görme bozukluğu olan öğrencilerin öğrenimleri açısından çok önemlidir. Yazılı açıklamalar, tüm öğrencilerin içeriği daha iyi anlaması için daha derin bağlamlar sağlayabilir.

Ally, görüntü bulunan her yerde görüntü açıklamaları olup olmadığını kontrol eder. Ally, bir web sayfasındaki veya ekli bir dosyadaki görüntüleri kontrol eder.

Ally, sorunları ciddi, büyük ve küçük olarak sıralar.

  • Ciddi. Bu sorunlar, erişilebilirlik açısından en yüksek riske sahip olan ve en fazla dikkat edilmesi gerekenlerdir.
  • Büyük. Bu sorunlar, erişilebilirliği olumsuz etkiler; ciddi olmasalar bile dikkat edilmesi gereklidir.
  • Küçük. Bu sorunlar, daha iyi bir erişilebilirlik puanı almak için değerlendirilmelidir.

Görüntülerde alternatif metnin bulunmaması büyük bir sorundur.

Açıklamaları olmayan görüntüleri bulmak için Ally'ı kullanma

Sitenizdeki erişilebilirlik sorunlarını keşfetmek ve düzeltmek için Ally'ın erişilebilirlik raporunu kullanın. Rapor için sağlanan bağlantıyı kullanın ve oturum açın. Raporu açın ve Erişilebilirlik Sorunları tablosundaki sorunlar listesine bakın.

Erişilebilirlik Sorunları tablosu, hem Genel Bakış hem de Etki Alanı sekmelerinde yer alır. Bir etki alanına özgü sorunları görmek için Etki Alanı sekmesinden başlayın. 

Alternatif metin veya açıklamalar içermeyen görüntüler kullanılması büyük bir sorundur. Büyük sorunların listesini görüntülemek için Erişilebilirlik Sorunları tablosundaki Büyük sekmesini kullanın. Görüntülerde açıklama olmamasıyla ilgili sorunları seçin.

Genel Bakış sekmesinden başlıyorsanız sorunu ve ardından sorunun yaşandığı etki alanını seçin.

Görüntü açıklaması ile ilgili sorunlar; listede Görüntü, Belge veya HTML ile başlayabilir.

Etki alanındaki görüntü açıklaması sorunları listesinden, sorunlu bir ögenin yanındaki puan göstergesini seçin. İçerik düzenleyicisi geri bildirim paneli açılır.

Açıklamasız görüntüleri ön izleme

Ally'ın geri bildirim paneli, erişilebilirlik sorunlarını çözmenize yardımcı olmak için içeriğin ön izlemesini göstermenin yanı sıra ayrıntılı geri bildirim ve destek de sunar. Açıklamasız görüntüleri görmek için ön izlemeyi kullanın.

Ön izleme, belirli erişilebilirlik sorunlarının belgede bulunabileceği yerleri vurgular. Vurgulamalar, bir sorun türünün yinelendiği tüm noktaları tek seferde gösterir. Örneğin, görüntülerinizde alternatif açıklamalar bulunmuyorsa vurgulamalar bu belirli sorunun ortaya çıktığı her yeri gösterir.

Ön izleme araçları

Belgenizdeki sorunları keşfetmek için ön izleme araçlarını kullanın.

  • Ön izleme sayfaları arasında gezinin.
  • Belirli bir sorunun kaç kez göründüğüne bakın.
  • Sorun vurgulamaları arasında gezinin.
  • Vurgulamaları gizleyin veya gösterin.
  • Ön izleme içeriğini yakınlaştırıp uzaklaştırın.
  • Sorun ekli bir belgede ise orijinal dosyayı indirin.

Görüntü açıklamaları eklemek için Ally'ın yol gösterici adımlarını takip edin

Ally, temel seviyede HTML bilgisine sahip olduğunuzu ve İçerik Yönetim Sisteminizi (CMS) kullanmayı bildiğinizi varsayar. Yol gösterici adımları takip etmek için web sayfasının HTML veya kaynak kodunu CMS'nizde nasıl düzenleyeceğinizi bilmeniz gerekir.

Ally, ön izlemenin yanı sıra sorunun çözümü konusunda size adım adım rehberlik de sağlar. Ally, bu geri bildirimi bir karar ağacında düzenler.Bunun için talimatları okumanız ve istemlere yanıt vermeniz yeterlidir. Sorunun ne olduğunu, niçin önemli olduğunu ve gerektiği şekilde nasıl düzeltileceğini öğrenin.

Açıklama nasıl eklenir? ögesini seçin ve yol gösterici adımları takip edin.

Resimler İçin Alternatif Metin

İyi açıklamalar yazmak

Resimlerinize doğru alternatif metin açıklamaları yazmak için buradaki en iyi uygulamaları izleyin:

  • Sayfa bağlamına göre resmi açıklayın. Resmin tam anlamını aktarın.
  • "... resmi" veya "...'nın resmi" ifadelerinden kaçının. Ekran okuyucular resimleri otomatik olarak resim olarak belirtirler.
  • Sade olun.
  • Bilgi grafikleri gibi karmaşık resimler için hikaye tarzını kullanın. Bu hikayeyi, bilgi grafiğinin hemen arkasından gelen sayfaya yerleştirin. Alternatif metni görüntülemek için sayfanın üstüne bir tutturucu bağlantı ekleyin. Alternatif metne sahip bir bilgi grafiğinin örneğine bakın.
  • Metin resimlerinden kaçının. Bunlardan kaçınamıyorsanız metni alternatif açıklamaya kopyalayın.
  • Yeni bir şeyler söyleyin. Aynı sayfada alternatif açıklamaları tekrarlamayın. Sayfada önceden söylenenleri tekrarlamayın.
  • ilgili içeriği temsil etmeyen resimleri dekoratif olarak belirleyin.

Dekoratif resim nedir?

Bir resim sayfada sunulan bilgiye katkıda bulunmuyorsa dekoratif amaçlıdır. Örneğin, başlıkları ayırmak için kullanılan sanatsal çalışmalar veya iletişim becerilerinden bahsedilirken telefonla konuşan bir kişinin fotoğrafı.

Görsel çekicilik olarak değerli olabilirler ama ekran okuyucuları tarafından okunmalarına gerek yoktur.

Web erişilebilirliği girişimi web sitesinde dekoratif amaçlı resimler hakkında daha fazla bilgi bulunmaktadır


Alternatif resim açıklamaları neden önemlidir?

Resimlerinizde alternatif açıklamaların kullanılmasının birçok sebebi vardır.

  • Alternatif açıklamalar veya metinler WCAG 2.2 yönergelerinde yer almaktadır
  • Öğrenciler bir resmi arayabilirler
  • Görme engelli öğrenciler resimleri algılama güçlüğü yaşarlar
  • Kısıtlı ağ bağlantısına sahip öğrenciler resimleri algılama güçlüğü yaşayabilirler
  • Ekran okuyucular resimleri okuyamazlar
  • Bazı öğrenciler, açıklamalardan resimlere göre daha fazla şey öğrenirler
  • Ekran ya da sayfa büyütüldüğünde metinler çoğu resme göre daha iyi ölçeklenebilirler

Web sayfalarına görüntü açıklamaları eklemenin yolları

Web sayfalarınızda görüntü açıklamaları eklemenin veya düzenlemenin birden fazla yolu vardır.

  • HTML: Ally'ın yol gösterici adımları, HTML'de görüntü açıklamalarını nasıl bulacağınız ve düzenleyeceğiniz konusunda size yardımcı olur. Öncelikle, görüntüyü içeren web sayfasını bulun. Sayfayı düzenleyin. Alternatif metin özniteliği eklemek için görüntü HTML kodunu güncelleştirin. Sayfayı kaydedin.
  • Görüntü ayarları: Çoğu CMS, alternatif metni düzenlemek için görüntü ayarlarında seçenekler sağlar. Web sayfasında veya CMS dosya havuzunda görüntüyü bulun. Görüntüyü düzenlemek için CMS araçlarını kullanın. Görüntü açıklamasını alternatif açıklama veya alternatif metin alanına ekleyin. Görüntüyü kaydedin.

w3schools'u ziyaret ederek HTML ve CSS ile ilgili daha fazla bilgi edinin

HTML'de "img src" ögesini niçin görmüyorum?

Web sayfasına görüntü eklemenin en yaygın yolu, img src HTML özniteliğini kullanmaktır. Img src, görüntüyü web sayfasına yerleştirmek için görüntü dosyasının URL'sini kullanan bir HTML özniteliğidir. Ancak her CMS farklıdır. Sitenizde farklı kod veya öznitelikler kullanılıyor olabilir. 

Örneğin, Drupal'da bunun yerine şuna benzer bir şey görebilirsiniz:

<drupal-entity data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

Alternatif metni özniteliğin başına ekleyin. Örneğin,

<drupal-entity alt="görüntü açıklamasını buraya ekleyin" data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-embed-display-settings="" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

HTML'de img src ifadesini görmüyorsanız görüntü ayarlarını düzenlemek için CMS araçlarını kullanmayı deneyin.Web sayfasında veya CMS dosya havuzunda görüntüyü bulun. Görüntü ayarlarını açmak için CMS araçlarını kullanın. Görüntü açıklamasını alternatif açıklama veya alternatif metin alanına ekleyin. Görüntüyü kaydedin.

Hâlâ nasıl devam edeceğinizi bilmiyorsanız web sitesi yöneticinizle veya geliştiricinizle iletişime geçin. Bu kişilerden, web sayfalarınıza nasıl görüntü ekleyeceğinizi ve bu görüntülere nasıl alternatif metin gireceğinizi göstermelerini rica edin.