İkon Ne Demek, Arayüzdeki İşlevi Nedir, Nasıl Etiketlenir?

---

Arayüzde küçük bir çöp kutusu resmi görürsünüz ve ne yapacağını bilirsiniz. O resim bir bilgi taşımıyor; bir eylemi temsil ediyor. Bu ayrım, ikonu sıradan bir görselden ayıran şey ve etiketlemesini de belirliyor.

Bu yazı ikonun arayüzdeki işlevini, metin karşılığının neye göre yazılması gerektiğini, boş bırakıldığında ne olduğunu ve tasarım tarafındaki teknik seçimleri W3C'nin erişilebilirlik rehberine dayanarak topluyor.

İkon ne iş görüyor?​

W3C'nin işlevsel görseller rehberi ayrımı net koyuyor: işlevsel görseller bilgi aktarmak için değil, eylem başlatmak için kullanılıyor.

Rehber nerede karşımıza çıktıklarını da sayıyor: düğmelerde, bağlantılarda ve diğer etkileşimli ögelerde. Arayüzdeki ikonların çoğu tam olarak bu tanıma giriyor.

Metin karşılığı neyi anlatmalı?​

Rehberin kuralı sezgiye aykırı gelebilir: görselin metin alternatifi, görselin neye benzediğini değil başlatacağı eylemi anlatmalı.

Sayfa bunu örneklerle veriyor. Metin karşılığı "(bir yazıcı resmi)" değil "bu sayfayı yazdır" olmalı; "büyüteç" değil "ara" olmalı; "Example.com logosu" değil "Example.com ana sayfası" olmalı.

• Yanlış: Görselin neye benzediğini yazmak.
• Doğru: Tıklandığında ne olacağını yazmak.
• Ölçüt: Görseli göremeyen biri, eylemi anlayabiliyor mu?

Boş bırakılırsa ne oluyor?​

Rehber sonucu açıkça yazıyor: eksik veya boş metin karşılıkları ekran okuyucu kullanıcıları için ciddi sorunlar yaratıyor, çünkü işlevsel görseller içeriğin işleyişi için zorunlu.

Sayfa ne olduğunu da tarif ediyor: ekran okuyucular tipik olarak görsel dosyasının adını, görselin adresini ya da bağlantının hedef adresini okuyor. Bunların hiçbiri kullanıcının hangi eylemin başlayacağını anlamasına yardım etmiyor.

Püf nokta' Alıntı:

İkonun metni, resmin adı değil düğmenin işi olmalı.

Genişletmek için tıkla ...

Logo bağlantı olduğunda​

Rehberin ilk örneği sık karşılaşılan bir durumu çözüyor: bir bağlantının tek içeriği logo görseliyse, metin karşılığı bağlantının kullanıcıyı nereye götüreceğini belirtmeli. Örnekte logonun karşılığı "W3C ana sayfası" olarak veriliyor.

Sayfa bir de not düşüyor: bu durumda logo aynı zamanda bir metnin görseli oluyor. Yani hem marka işareti hem gezinme ögesi olarak çalışıyor.

Bir işaretin marka tarafındaki karşılığını ve hazır ikon kullanmanın tescilde çıkarabileceği sorunları ücretsiz ikon yazımızda ele almıştık.

Teknik tarafta ne seçiliyor?​

İkonlar küçük boyutlarda ve çok sayıda ekran yoğunluğunda görüneceği için, ölçeklendiğinde bozulmayan bir biçim tercih ediliyor. Yollar ve eğrilerle çalışan yaklaşımın nasıl işlediğini vektör çizim yazımızda anlatmıştık.

Renk tarafında da bir sınır var: ikon tek başına anlam taşıyorsa, taşıdığı anlamın yalnız renge bırakılmaması gerekiyor. Zeminle arasındaki karşıtlığın nasıl ölçüldüğünü renk kontrastı yazımızda göstermiştik.

İkon tek başına yeterli mi?​

Rehberin mantığı bir soruyu da yanıtlıyor: ikon, eylemi temsil ettiği ölçüde işe yarıyor. Yaygın olmayan bir sembol, kullanıcının tahmin etmesini gerektiriyorsa yanına metin koymak gerekiyor.

Metin karşılığının varlığı ekran okuyucu için çözüm; görünür etiket ise sembolü tanımayan herkes için. İkisi farklı ihtiyaçlara hizmet ediyor ve biri diğerinin yerine geçmiyor.

Bağlantıda zaten metin varsa​

Rehber, logonun tek başına değil bağlantı metninin içinde yer aldığı durumu ayrı bir örnekte ele alıyor. Buradaki ayrım, bağlantıda hedefi tanımlayan bir metin bulunup bulunmadığına dayanıyor.

Pratikte bu şu soruya iniyor: kullanıcı görseli hiç görmeden, bağlantının nereye gittiğini yalnız metinden anlayabiliyor mu? Cevap evetse görselin aynı bilgiyi tekrar etmesi gerekmiyor.

Kendi sitenizi nasıl denetlersiniz?​

Rehberin verdiği davranış, denetim yöntemini de veriyor. Bir ikonun metin karşılığı yoksa ekran okuyucu dosya adını, görsel adresini ya da bağlantı hedefinin adresini okuyor.

Bu yüzden sayfadaki her ikon için tek soru yeterli: "resmi hiç görmeden, bu ögenin ne yapacağını duyduğum metinden anlayabilir miyim?" Cevap hayırsa metin karşılığı ya eksik ya da görseli betimliyor demektir.

Denetimi hızlandıran bir işaret de dosya adları: metin karşılığı olarak dosya adının okunduğu bir arayüzde, ikon isimlerinin anlamlı olması sorunu çözmüyor — kural, karşılığın eylemi anlatması.

Sık Sorulan Sorular​

İkon ne demek?
Arayüzde bilgi aktarmak yerine eylem başlatmak için kullanılan işlevsel görsel; düğmelerde ve bağlantılarda karşımıza çıkıyor.

Metin karşılığına ne yazılmalı?
Görselin neye benzediği değil, başlatacağı eylem: "yazıcı" değil "bu sayfayı yazdır".

Boş bırakırsam ne olur?
Ekran okuyucular dosya adını veya adresi okuyor; kullanıcı hangi eylemin başlayacağını anlayamıyor.

Logo bağlantıysa ne yazılmalı?
Bağlantının götüreceği yer; rehberdeki örnekte "W3C ana sayfası".

İkonun yanına metin koymalı mıyım?
Sembol yaygın değilse evet; görünür etiket ile metin karşılığı farklı ihtiyaçları çözüyor.

Özetle​

İkon, arayüzde bir eylemi temsil eden işlevsel görsel. Metin karşılığı resmi değil eylemi anlatmalı; bu alan boş kaldığında ekran okuyucu kullanıcıları dosya adı ya da adres duyuyor ve ne olacağını anlayamıyor. Logo bir bağlantının tek içeriğiyse karşılığı hedefi belirtmeli. Teknik tarafta ölçeklenebilir biçim, tasarım tarafında ise yeterli karşıtlık gerekiyor.

Sitenizdeki ikonların metin karşılıklarını, "ne olacağını" anlatacak biçimde mi yazdınız?

Güncelleme: 2 Eylül 2026. W3C Web Erişilebilirliği Girişimi'nin işlevsel görseller rehberi kontrol edildi.

---