Accordion İkonu: Caret, Artı ve Sağ Ok Arasında Seçim
Accordion başlığının yanındaki küçük işaretçi, kullanıcının o satıra tıkladığında ne olacağını önceden bilmesini sağlayan tek ipucudur. Aşağı bakan caret aynı sayfada açılma sözü verir, sağa bakan ok başka bir sayfaya gitme. İkisi karıştırıldığında ortaya çıkan sorun görsel değil davranışsaldır: kullanıcı beklediğinden başka bir şey görür.
Caret, artı ve sağ ok aynı şeyi söylemez
Aşağı bakan caret (▾) accordion için varsayılan olmalı. Sebebi estetik değil, birikmiş alışkanlık: kullanıcı bu işareti yıllardır “altında bir şey var, yerinde açılacak” diye okuyor. Yeni bir işaretçi denemek, kazanılacak bir şey olmadan bu alışkanlığı bozmak demek.
Artı işareti ikinci sırada gelir ve tek şartı vardır. Panel açıkken eksiye dönmeli. Dönmüyorsa kullanıcı bölümün açık mı kapalı mı olduğunu ikondan değil, aşağıdaki içeriğe bakarak anlamak zorunda kalır ve ikon süs haline gelir.
Sağa bakan ok accordion'da yanlıştır. O işaret gezinmenin işaretidir. Bir listede satırlardan biri sağ ok, diğeri caret taşıyorsa kullanıcı ikisini aynı grup sanar, birinde sayfa değişir diğerinde değişmez. İkonsuz başlık ise sadelik tercihi değil, eksiklik: geriye kalan tek şey metindir ve tıklanabilir metin varsayılan olarak bağlantı gibi okunur.
Tıklama hedefi tek parça olmalı
İkon ile etiketi ayrı tıklama hedefleri yapmak, tek satırda iki farklı eylem barındıran split buton kurgusuna dönüşür. Kullanıcı ikisinin de aynı şeyi yapmasını bekler, çünkü ikon başlığın parçası gibi durur.
Başlık satırının tamamını tek bir <button> yapar, caret'i o butonun içine yerleştiririm. İkonu ayrı hedef olarak kurmak, satırın neresine basıldığını ayırt etmesi gereken fazladan bir olay dinleyicisi doğuruyor ve karşılığında hiçbir şey kazandırmıyor.
Dokunmatikte başlık yüksekliği 44 pikselin altına inmesin. Caret'in kendisi 16 piksel olabilir; basılabilir alan satırın tamamıdır.
İkona alternatif metin yazmayın
Erişilebilirlik tarafında en sık yapılan hata, caret'e “aç” ya da “genişlet” gibi bir alternatif metin iliştirmek. Durumu taşıyan şey ikon değil, butonun aria-expanded özniteliğidir. Ekran okuyucu zaten “daraltılmış” veya “genişletilmiş” diye okur; ikona ayrıca metin verirseniz aynı bilgi iki kez duyulur. Üstelik ikisi çelişebilir, çünkü aria-expanded panel açıldığında güncellenir, ikonun alt metni çoğu uygulamada sabit kalır.
<button aria-expanded="false" aria-controls="panel-1"> Kargo ve teslimat <svg aria-hidden="true" focusable="false">…</svg> </button>İkon aria-hidden="true" ile erişilebilirlik ağacından çıkarılır, açılıp kapanırken CSS tarafında transform: rotate(180deg) ile döner. Klavye kullanıcısı için de buton yeterlidir; div üzerine tıklama dinleyicisi koyup tabindex ile kurtarmaya çalışmak, odak sırasını ve boşluk tuşunu elle yönetmek anlamına gelir.
Kapalı panel gizli içerik değildir
Accordion içindeki metin işaretlemede bulunduğu sürece dizine girer; display:none olması onu arama sonuçlarından çıkarmaz. Asıl risk, panel açıldığında içeriği sunucudan çeken kurgulardır. O metin ilk yüklemede belgede yoksa dizine gireceğinin garantisi yoktur. İçeriğin bulunmasını istiyorsanız HTML'de olsun, görünürlüğünü CSS'e bırakın.
Başlık metinleri de bu yüzden dürüst olmalı. Kullanıcının aradığı bilgi “Detaylar” başlığının altındaysa ne kullanıcı ne tarayıcı orada ne olduğunu bilir. Kısa ve içeriği söyleyen bir başlık, ikon tercihinden daha çok iş görür.