- Katılım
- 21 May 2023
- Mesajlar
- 743
- Tepki
- 17
- Puan
- 18
Arayüzdeki en tanıdık öge butondur; tıklanır, bir şey olur. Standart tarafında ise butonun tanımı çok daha kesin ve bu kesinlik, ekran okuyucuların ne söyleyeceğini de belirliyor.
Aşağıda buton rolünün standarttaki tanımını, hangi durumda kullanılacağını, açık-kapalı hâl tutan butonların nasıl ayrıldığını ve görünüm standartlaşmasının neden önemli sayıldığını W3C belirtimine bakarak topluyoruz.
Standarttaki tanım
WAI-ARIA 1.2 buton rolünü şöyle tanımlıyor: tıklandığında veya basıldığında kullanıcı tarafından tetiklenen eylemlere imkân veren bir girdi.
Tanımın merkezinde eylem var. Buton bilgi göstermiyor, bir işi başlatıyor.
Belirtim kullanım alanını da daraltıyor: butonlar çoğunlukla ayrık eylemler için kullanılıyor.
Temel karşılığı da veriliyor: bu rolün HTML'deki temel kavramı buton ögesi.
- Ne yapıyor: Kullanıcının tetiklediği eylemi başlatıyor.
- Nerede kullanılıyor: Ayrık eylemlerde.
- Karşılığı: HTML'deki buton ögesi.
Görünümün standartlaşması neden önemli?
Belirtim estetik değil işlevsel bir gerekçe sunuyor: butonların görünümünün standartlaşması, kullanıcının bu ögeleri buton olarak tanımasını güçlendiriyor.
İkinci fayda da yazılı: araç çubuklarında daha derli toplu bir gösterim mümkün oluyor.
Bu, tasarımdaki tutarlılık tartışmasına somut bir gerekçe veriyor. Aynı işi yapan ögelerin aynı görünmesi, öğrenme yükünü azaltıyor.
Tersi de geçerli: butona benzemeyen bir buton, kullanıcının onu denemesini geciktiriyor.
Püf nokta' Alıntı:Bir ögenin buton olduğunu kullanıcı görünümünden, yardımcı teknoloji ise rolünden anlıyor. İkisi de doğru olmalı.
Bağlantı mı, buton mu?
Arayüzde en sık karışan ikili bu. Belirtimin buton tanımı eylem üzerine kurulu; bağlantı ise başka bir kaynağa gitmeyi ifade ediyor.
Ayrım kullanıcının beklentisini belirliyor. Bağlantıya tıklayan kişi bir yere gitmeyi bekliyor; butona basan kişi bir şeyin olmasını bekliyor.
Bu beklenti klavye davranışında da karşılık buluyor. İki öge farklı tuşlarla tetikleniyor ve yardımcı teknolojiler kullanıcıya bunu farklı biçimde bildiriyor.
Pratikte kural basit: sayfa değiştiriyorsa bağlantı, işlem yapıyorsa buton kullanılıyor.
Basılı durum tutan butonlar
Belirtim butonların isteğe bağlı bir özniteliği desteklediğini söylüyor: basılı durum bilgisi.
Ayrım da tanımlı. Bu öznitelik boş olmayan bir değer taşıyorsa buton bir aç-kapa butonu sayılıyor.
Değer doğruysa buton basılı durumda; yanlışsa basılı değil.
Öznitelik hiç yoksa buton, basit bir komut butonu oluyor.
Bu ayrım arayüz tasarımında sık karıştırılan iki ögeyi ayırıyor: bir eylemi çalıştıran buton ile bir ayarı açıp kapatan buton aynı şey değil.
Durum bilgisi neden ayrı tutuluyor?
Bir butonun basılı olup olmadığı görsel olarak renkle ya da çerçeveyle anlatılabiliyor. Ama bu görsel fark, yardımcı teknolojiye bir bilgi taşımıyor.
Belirtimin ayrı bir durum özniteliği tanımlaması bu boşluğu kapatıyor: durum, işaretlemede açıkça belirtiliyor ve ekran okuyucu butonun basılı olduğunu söyleyebiliyor.
Aynı ilke arayüzdeki bütün durum bilgileri için geçerli. Yalnız renkle anlatılan bir fark, o rengi göremeyen kullanıcı için yok hükmünde.
Rol neden bildiriliyor?
Belirtimin genel amacı, arayüz ögelerinin anlamını makineye aktarmak. Belgeye göre web içeriğinin erişilebilirliği; yardımcı teknolojilerin engelli kişilere uygun bilgiyi iletebilmesi için bileşenler, yapılar ve davranışlar hakkında anlamsal bilgi gerektiriyor.
Belirtim bu ihtiyacı karşılamak için erişilebilir arayüz ögelerini tanımlayan roller, durumlar ve özellikler ontolojisi sunuyor.
Amaç da açık: yazarın, arayüz davranışlarını ve yapısal bilgiyi yardımcı teknolojilere belge düzeyindeki işaretleme üzerinden düzgün biçimde iletebilmesi.
Belirtim kendisini tamamlayıcı olarak konumlandırıyor: hem HTML hem SVG belirtimlerini tamamlıyor.
Uygulamada nelere dikkat ediliyor?
Birincisi doğru öge seçimi. HTML'de zaten bir buton ögesi varken başka bir ögeye buton davranışı eklemek, rolün ayrıca bildirilmesini gerektiriyor.
İkincisi klavye. Tıklamayla çalışan bir öge klavyeyle de çalışmıyorsa, buton görünümü işlevi tamamlamıyor.
Üçüncüsü ad. Butonun ne yaptığı, üzerindeki metinden ya da erişilebilir adından anlaşılabilmeli; yalnız bir simge taşıyan butonlarda bu ad ayrıca verilmek zorunda kalıyor.
Dördüncüsü geri bildirim. Basıldıktan sonra bir şeyin olduğu görünmüyorsa kullanıcı aynı işlemi tekrarlıyor; bu da yinelenen istek anlamına geliyor.
Erişilebilirlik ilkelerini erişilebilirlik yazımızda, klavyeyle kullanım testini klavye testi yazımızda ele almıştık.
Simgelerin arayüzdeki işlevini ise ikon yazımızda anlatmıştık.
Sık Sorulan Sorular
Buton ne demek?
Tıklandığında veya basıldığında kullanıcının tetiklediği eylemlere imkân veren girdi ögesi.
Nerede kullanılıyor?
Belirtime göre çoğunlukla ayrık eylemlerde.
Aç-kapa butonu nasıl ayrılıyor?
Basılı durum özniteliği boş değilse buton bir aç-kapa butonu sayılıyor.
Öznitelik yoksa ne oluyor?
Buton basit bir komut butonu olarak değerlendiriliyor.
Görünüm neden standart olmalı?
Belirtim, standart görünümün kullanıcının ögeyi buton olarak tanımasını güçlendirdiğini söylüyor.
Özetle
Buton, kullanıcının tetiklediği bir eylemi başlatan arayüz ögesi. Standart onu ayrık eylemler için tanımlıyor ve görünümün tutarlı olmasını tanınabilirlik gerekçesiyle savunuyor. Basılı durum özniteliği taşıyan butonlar aç-kapa butonu sayılıyor; taşımayanlar komut butonu. Rolün doğru bildirilmesi, yardımcı teknolojilerin ögeyi doğru anlatmasını sağlıyor.
Sitenizdeki butonlar klavyeyle de çalışıyor mu?
Güncelleme: 3 Eylül 2026. W3C WAI-ARIA 1.2 belirtimi kontrol edildi.
Dijital Dünyanıza Yön Veren Pusula