Görseller, simgeler, grafikler ve diğer metinsel olmayan içeriğin, onları göremeyen veya duyamayan kullanıcılara eşdeğer amaca hizmet eden bir metin alternatifiyle aktarılmasını ister.
Ekran okuyucu bir görseli göremez; ona ne söylendiyse onu okur. Alternatif metin yoksa kullanıcı çoğu zaman "grafik" ya da dosya adını duyar, görselin taşıdığı bilgiyi ise kaçırır.
Bu kriter, kullanıcıya sunulan her metinsel olmayan içeriğin (fotoğraf, simge, grafik, ses kaydı, animasyon) aynı amaca hizmet eden bir metin alternatifine sahip olmasını ister. Süs amaçlı veya yalnızca biçimlendirme için kullanılan içerik ise yardımcı teknolojinin yok sayabileceği biçimde işaretlenmelidir. Böylece kimse anlamsız bir görseli dinlemek zorunda kalmaz.
Ekran okuyucu kullanan kör ve az gören kullanıcılar görselin bilgisine yalnızca metin alternatifinden ulaşır. Metin braille ekrana da aktarılabildiği için görme ve işitme engeli birlikte olan kullanıcılar için de tek yoldur. Ses kayıtlarında işitme engelli kullanıcılar metin karşılığını okur. Görsellerin anlamını kavramakta zorlanan kullanıcılar için kısa ve net bir açıklama destek olur. Metin alternatifleri ayrıca görsel içeriğin aranabilmesine ve başka biçimlere dönüştürülebilmesine yardımcı olur.
Avrupa Erişilebilirlik Yasası (Direktif (AB) 2019/882) 28 Haziran 2025'ten sonra piyasaya sunulan kapsamdaki ürün ve hizmetler için geçerlidir. Yasanın 47. gerekçesi web siteleri ve mobil uygulamalar için dört ilkeyi sayar: algılanabilirlik, işletilebilirlik, anlaşılabilirlik ve sağlamlık. Metin alternatifi, algılanabilirliğin temel gereğidir.
Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 1.1.1'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.
| Madde | Ortam | Ne ister? |
|---|---|---|
| 9.1.1.1 | Web sayfaları | Web içeriğinin WCAG 1.1.1 kriterini karşılamasını ister. |
| 10.1.1.1 | Web dışı dokümanlar (PDF, Office dosyaları) | Aynı kriterin dokümanlardaki görsellere uygulanmasını ister. |
| 11.1.1.1 | Web dışı yazılım (yerel mobil uygulamalar) | Ekran okuyucuyu destekleyen yazılımda kriterin karşılanmasını ister. |
| 5.1.3.6 | Kapalı işlevsellik (ATM, bilet makinesi, bilgi ekranı) | Metin dışı içeriğin alternatifinin, süs amaçlı olanlar hariç, sesli çıktıyla sunulmasını ister. |
Madde numaraları EN 301 549 V3.2.1'e göredir. V3.2.1'de yazılım maddesi iki parçadır: 11.1.1.1.1 (açık işlevsellik) ve 11.1.1.1.2 (kapalı işlevsellik, 5.1.3.6'ya yönlendirir). V4.1.1'de aynı konular 9.1.1, 10.1.1 ve 11.1.1 başlıkları altında yer alır.
Standart sürümü: EN 301 549 V4.1.1 (Eylül 2026), WCAG 2.2'yi esas alan ve EAA için hazırlanan ilk sürümdür. Henüz AB Resmî Gazetesi'nde atıf almamıştır; bu nedenle EAA gereksinimlerini karşılamanın gönüllü teknik yolu olarak görülmelidir. Atıf yapıldığında EAA ile ilgili uygunluk karinesi sağlayacaktır. 1.1.1 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır.
EAA bağlamında dikkat: Yasa, 28 Haziran 2025'ten önce yayımlanmış önceden kaydedilmiş zamana dayalı medyayı ve şirketin kontrolü ya da finansmanı dışındaki üçüncü taraf içeriği kapsam dışında bırakır (Madde 2/4). Görsellerin metin alternatifi ise bu istisnalarla ortadan kalkmaz.
Directive (EU) 2019/882, EUR-Lex, İngilizce, yeni sekmede açılır
Alt metin, görselin yerine geçecek bilgiyi içermelidir. Dosya adı veya "grafik" gibi genel bir sözcük yeterli değildir.
EN<img src="satis-grafik.png">
<img src="IMG_2041.png" alt="IMG_2041.png"><img src="satis-grafik.png"
alt="2026 ilk çeyrek satışlar: Ocak 120, Şubat 135,
Mart 160 bin TL">Bilgi taşımayan görsel boş alt metinle işaretlenir. Böylece ekran okuyucu onu atlar. "Dekoratif görsel" ya da "boşluk" yazmak, kullanıcıya gereksiz bir şey okutur.
<img src="dalga.svg" alt="dekoratif görsel">
<img src="bosluk.gif" alt="boşluk"><img src="dalga.svg" alt="">
/* Ya da süsü CSS ile ekleyin */
.baslik { background-image: url("dalga.svg"); }Alternatif, simgenin nasıl göründüğünü değil, düğmenin ne yaptığını anlatır.
<button type="button">
<img src="ara.svg">
</button><button type="button" aria-label="Ara">
<svg aria-hidden="true" focusable="false">…</svg>
</button>
<!-- Görselli düğmede alt de kullanılabilir -->
<input type="image" src="gonder.png" alt="Formu gönder">Bağlantının tek içeriği görselse alt metin, bağlantının gideceği yeri anlatmalıdır.
<a href="/">
<img src="logo.svg" alt="logo">
</a><a href="/">
<img src="logo.svg" alt="Örnek Şirket ana sayfa">
</a>Bir grafiğin taşıdığı bilgi kısa bir alt metne sığmıyorsa, kısa bir ad verin ve ayrıntıyı yakında, görünür biçimde sunun. Mümkünse verileri bir tabloyla da verin.
<img src="gelir.png" alt="gelir grafiği"><figure>
<img src="gelir.png"
alt="Aylık gelir çizgi grafiği"
aria-describedby="gelir-ozet">
<figcaption id="gelir-ozet">
Gelir Ocak'ta 120 bin TL iken Mart'ta 160 bin TL'ye
yükseldi. Aylık değerler aşağıdaki tablodadır.
</figcaption>
</figure><svg viewBox="0 0 24 24">…</svg><!-- Bilgi taşıyan SVG -->
<svg role="img" aria-labelledby="uyari-baslik" viewBox="0 0 24 24">
<title id="uyari-baslik">Uyarı: ödeme başarısız</title>
…
</svg>
<!-- Süs amaçlı SVG -->
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">…</svg>Yerel mobil uygulamalarda aynı kural geçerlidir. Bilgi taşıyan görsele bir ad, süs amaçlı görsele hiçbir ad verilmez ve yalnızca simgeden oluşan düğmeye işlevini anlatan bir etiket eklenir.
import SwiftUI
struct UrunKarti: View {
var favoriyeEkle: () -> Void
var body: some View {
VStack(alignment: .leading, spacing: 12) {
// Bilgi taşıyan görsel: eşdeğer bir açıklama
Image("urun-foto")
.resizable()
.scaledToFit()
.accessibilityLabel("Mavi spor ayakkabı, yan görünüm")
// Süs amaçlı görsel: yardımcı teknolojiden gizlenir
Image(decorative: "dalga")
// Yalnızca simgeden oluşan düğme
Button(action: favoriyeEkle) {
Image(systemName: "heart")
}
.accessibilityLabel("Favorilere ekle")
}
}
}import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
@Composable
fun UrunKarti(favoriyeEkle: () -> Unit) {
Column {
// Bilgi taşıyan görsel
Image(
painter = painterResource(R.drawable.urun_foto), // Kendi kaynağınız
contentDescription = "Mavi spor ayakkabı, yan görünüm"
)
// Süs amaçlı görsel: contentDescription null bırakılır
Image(
painter = painterResource(R.drawable.dalga), // Kendi kaynağınız
contentDescription = null
)
// Yalnızca simgeden oluşan düğme
IconButton(onClick = favoriyeEkle) {
Icon(
imageVector = Icons.Filled.Favorite,
contentDescription = "Favorilere ekle"
)
}
}
}img, input type="image" ve area öğelerinde alt özniteliği var mı? Süs amaçlı görsellerde boş mu? Mobilde contentDescription ve accessibilityLabel değerleri doğru mu?Corpowid, dijital erişilebilirlik alanındaki yenilikçi yaklaşımı ve performansı nedeniyle dünyanın önde gelen araştırma ve danışmanlık şirketlerinden biri olan Gartner tarafından takdir edilmiştir. Bu rozetler, yapay zeka destekli ve kapsayıcı web deneyimleri oluşturma konusundaki kararlılığımızı yansıtmaktadır.
