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.

Alternative Text on Images

Writing good descriptions

Follow these best practices to write good alternative text descriptions for your images:

  • Describe the image based on the page context. Convey the full meaning of the image.
  • Avoid saying "image of" or "picture of". Screen readers automatically announce images as images.
  • Be concise.
  • Write narratives for complex images like infographics. Put this narrative on the page immediately following the infographic. Include an anchor link at the top of the page to view the text alternative. See an example of an infographic with a text alternative.
  • Avoid images of text. If you can't avoid it, copy the text into the alternative description.
  • Say something new. Don't repeat alternative descriptions on the same page. Don't repeat what is already said on the page.
  • Identify images that don't represent relevant content as decorative.

What is a decorative image?

An image is decorative when it doesn't add to the information on the page. For example, art work used to separate topics or a photo of someone on the phone when discussing communication skills.

They are valuable in their visual appeal but may not need to be read by screen readers.

More on decorative images on the web accessibility initiative website

Why are alternative image descriptions important?

There are many reasons to use alternative descriptions with your images.

  • Alternative descriptions, or text, are in the WCAG 2.2 guidelines
  • Students can search for an image
  • Students with visual impairments have difficulty perceiving images
  • Student with a poor network connection may have difficulty perceiving images
  • Screen readers can't read images
  • Some students learn better from descriptions than images
  • Text scales better than most images when the screen or page is enlarged

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.