Bilgiyi sunmak için metin görseli yerine gerçek metin kullanılmasını ister; yalnızca metin özelleştirilebiliyorsa ya da görsel logo gibi zorunluysa istisna vardır.
Bir görseldeki metin bulanıklaşmadan büyütülemez, kullanıcının kontrast ihtiyacına göre renk değiştiremez, çevrilemez, seçilemez ya da aranamaz ve yeniden akmaz. Az gören kişiler için en büyük engellerden biridir.
Bu kriter, kullanılan teknolojiler görsel sunumu üretebiliyorsa, bilgiyi aktarmak için metin görselleri yerine gerçek metin kullanılmasını ister. İki istisna vardır: kullanıcının özelleştirebildiği metin görselleri ve logo gibi zorunlu olan metin görselleri.
Metin görselini keskinliğini kaybetmeden büyütemeyen az gören kişiler. Yazı tipini ya da rengi değiştiren disleksili ya da başka okuma farklılıkları olan kişiler. Yüksek kontrast modlarını, çeviri araçlarını ya da metin okumayı kullananlar. Metni aramak, kopyalamak ya da seçmek isteyen herkes.
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. Gerçek metin, "algılanabilirlik" ve "sağlamlık" ilkelerinin parçasıdır.
Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 1.4.5'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.
| Madde | Ortam | Ne ister? |
|---|---|---|
| 9.1.4.5 | Web sayfaları | Web içeriğinin WCAG 1.4.5 kriterini karşılamasını ister. |
| 11.1.4.5 | Web dışı yazılım (yerel mobil uygulamalar) | Yazılımın, zorunlu olanlar dışında metin görselleri yerine gerçek metin kullanmasını ister. |
Kriterin web dışı dokümanlara uygulanıp uygulanmadığı ve nasıl uygulandığı standardın 10. maddesinde belirtilir. Madde numaraları EN 301 549'un "9. + WCAG numarası" düzenine göredir. V3.2.1'de yazılım maddesi, açık ve kapalı işlevsellik için ayrı alt maddelere bölünmüştür. Kaynak gösterirken tam numaraları standarttan kontrol edin.
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.4.5 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır. AA düzeyinde bir kriterdir.
EAA bağlamında dikkat: Yasanın Madde 2/4 hükmü bazı içerikleri gereksinimlerin dışında bırakır; örneğin 28 Haziran 2025'ten önce yayımlanmış ofis dosya biçimleri ve bu tarihten sonra güncellenmeyen arşivler. Bu tarihten sonra yayımladığınız ya da değiştirdiğiniz içerik bu istisnaların kapsamında değildir.
Directive (EU) 2019/882, EUR-Lex, İngilizce, yeni sekmede açılır
Afiş görselindeki metin büyütüldüğünde bulanıklaşır ve çevrilemez. Bir arka plan görseli ve üstünde gerçek metin kullanın.
EN<img src="bahar-indirimi-afis.png" alt="Bahar indirimi, %20 indirim"><div class="afis">
<h2>Bahar indirimi</h2>
<p>Cuma gününe kadar %20 indirim</p>
</div>
.afis {
background: url("bahar-arka.jpg") center / cover;
color: #ffffff;
}Görseldeki bir başlık, ekran okuyucu için başlık değildir.
<img src="hakkimizda-baslik.png" alt="Hakkımızda"><h1>Hakkımızda</h1>Bir düğme metin olmalıdır; böylece büyütülebilir ve yeniden renklendirilebilir.
<a href="/satin-al"><img src="simdi-al-dugme.png" alt="Şimdi al"></a><a class="btn" href="/satin-al">Şimdi al</a>
.btn {
background: #2e7d32;
color: #ffffff;
padding: 12px 20px;
border-radius: 8px;
}Belirli bir yazı tipini elde etmek için görsel değil, web yazı tipleri kullanın.
<img src="slogan-ozel-font.png" alt="Herkes için erişilebilirlik">@font-face {
font-family: "MarkaSans";
src: url("marka-sans.woff2") format("woff2");
font-display: swap;
}
.slogan { font-family: "MarkaSans", sans-serif; }Gölgeler, gradyanlar ve çerçeveler CSS ile, süs şekilleri SVG ile yapılabilir; metin gerçek kalır.
<img src="golgeli-baslik.png" alt="Yaz">.baslik {
font-size: 3rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}Bir logo görsel olarak kalabilir. Alternatif metni olarak marka adını verin.
<img src="logo.png" alt="logo"><img src="logo.png" alt="Corpowid">Yerel mobil uygulamalarda aynı kural geçerlidir. Metnin sistem metin boyutunu izlemesi için metin içeren görseller yerine özel yazı tipli metin görünümleri kullanın.
import SwiftUI
struct TanitimBasligi: View {
var body: some View {
// Kaçının: metni içeren bir görsel
// Image("tanitim-afis")
// Ölçeklenen özel bir yazı tipiyle gerçek metin kullanın
VStack(alignment: .leading, spacing: 4) {
Text("Bahar indirimi")
.font(.custom("MarkaSans-Bold", size: 28, relativeTo: .title))
Text("Cuma gününe kadar %20 indirim")
.font(.body)
}
.padding()
.background(Color("TanitimArkaPlan"))
}
}import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.unit.dp
val MarkaSans = FontFamily(Font(R.font.marka_sans_bold)) // Kendi yazı tipi kaynağınız
@Composable
fun TanitimBasligi() {
// Kaçının: metni içeren bir Image
Column(
modifier = Modifier
.background(Color(0xFF2E7D32))
.padding(16.dp)
) {
Text(
text = "Bahar indirimi",
fontFamily = MarkaSans,
style = MaterialTheme.typography.headlineSmall,
color = Color.White
)
Text("Cuma gününe kadar %20 indirim", color = Color.White)
}
}img öğeleri, CSS arka planları ve SVG görselleri metin taşıyor mu? Metin alternatifte tekrarlanıyor 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.
