Bu kural neyi kontrol eder
<img> öğelerinin alternatif metni ya da none veya presentation rolü olduğunu denetler.
Neden önemli
WCAG 1.1.1, anlam taşıyan görseller için bir metin alternatifi ister. Bu olmadan ekran okuyucu kullanan biri, bir fotoğrafın hangi ürünü gösterdiğini anlayamaz.
Nasıl düzeltilir
Her web sitesinde
- İçerik yönetim sisteminizde veya şablonunuzda her görselin alternatif metnine kısa ve belirli bir açıklama ekleyin.
- Bir müşteri için önemli olanı açıklayın: ürün adı, renk ve gösterilen açı (örneğin “Zeytin yeşili kanvas çanta, önden görünüm”).
- Dekoratif görsellerde, ekran okuyucuların onları atlaması için boş bir alt özniteliği (alt="") olmalıdır.
Shopify’da
- Shopify yönetici panelinde Ürünler > [ürün] > Medya bölümünü açın, her görsele tıklayın ve “Alternatif metin” alanını doldurun. Bölüm görselleri için Online Mağaza > Temalar > Özelleştir bölümünü açın ve görselin alternatif metnini bölüm ayarlarında belirleyin.
- Bir müşteri için önemli olanı açıklayın: ürün adı, renk ve gösterilen açı (örneğin “Zeytin yeşili kanvas çanta, önden görünüm”).
- Dekoratif görsellerde, ekran okuyucuların onları atlaması için boş bir alt özniteliği (alt="") olmalıdır.
WooCommerce ve WordPress’te
- WordPress’te Ortam > Kütüphane bölümünü açın, her görseli seçin ve “Alternatif metin” alanını doldurun. Ürün galerisi görselleri de aynı alanı kullanır.
- Bir müşteri için önemli olanı açıklayın: ürün adı, renk ve gösterilen açı (örneğin “Zeytin yeşili kanvas çanta, önden görünüm”).
- Dekoratif görsellerde, ekran okuyucuların onları atlaması için boş bir alt özniteliği (alt="") olmalıdır.
Düzeltme nasıl kontrol edilir
- Etkilenen sayfaları yeniden tarayın.
- Ürün görsellerinin nasıl seslendirildiğini duymak için bir ekran okuyucu kullanın (Mac’te VoiceOver: Cmd+F5).
FixReports bunu nasıl bulur
Taramamız, test ettiği her sayfada axe-core’un image-alt kuralını gerçek bir Chrome tarayıcısında çalıştırır ve kuraldan geçemeyen her öğeyi sayfası, işaretlemesi ve uygun olduğunda bir ekran görüntüsüyle birlikte bildirir.
Otomatik bir test, bu belirli sorunun var olduğunu doğrular. Sayfanın geri kalanının erişilebilir olup olmadığını söyleyemez: bazı engeller ancak bir insan sayfayı kontrol ettiğinde ortaya çıkar.