Klavyeyle Gezinilebilen Etkileşimli Grafikler

Etkileşimli grafikler çoğu zaman değerleri yalnızca üzerine gelindiğinde gösterir. Klavye ve dokunmatik ekran kullanıcıları üzerine gelemediği için bu veriler onlara kapalı kalır.

Kullanıcıların her veri noktasına veya serisine Sekme tuşuyla ulaşmasını tabindex="0" vererek sağlayın. Böylece klavye, farenin üzerine geldiği verilere ulaşabilir.

Hiçbir şey duyurmayan odaklanabilir bir nokta işe yaramaz. Her birine etiketini ve değerini belirten bir erişilebilir ad verin; örneğin Mart, 240 satış.

100 noktanın arasında Sekme tuşuyla ilerlemek yorucudur. Noktadan noktaya geçmek için ok tuşlarını kullanın; Sekme tuşunu grafiğe girip çıkmak için ayırın.

Bir noktayı tabindex 0'da, diğerlerini -1'de tutun ve ok tuşlarına basıldıkça 0'ı taşıyın. Bu gezinen tabindex, Sekme duraklarının sayısını makul tutar.

Bir araç ipucu üzerine gelindiğinde ne gösteriyorsa odakta da gösterin. Her mouseenter işleyicisini bir odak işleyicisiyle eşleştirerek her iki girdi türünün aynı davranmasını sağlayın.

O anda odakta olan noktayı belirgin bir anahat veya işaretçiyle vurgulayın. Bu olmadan klavye kullanıcıları nerede olduklarını anlayamaz.

Odak yeni bir noktaya taşındığında bir aria-live bölgesi değeri seslendirebilir. Etiket görsel olarak oluşturuluyor ancak DOM içinde yer almıyorsa bu özellik yardımcı olur.

Tüm yapıyı adlı bir figure içine alın. Böylece kullanıcılar grafiği bulabilir ve incelemeyi bitirdiklerinde tek bir birim olarak atlayabilir.

Etkileşim bir avantajdır, yerine geçecek bir çözüm değildir. Ok tuşlarıyla ilerlemek çok yavaş olduğunda kullanıcıların basit bir yolunun olması için düz veri tablosunu her zaman koruyun.

Fareyi bırakın ve grafiği yalnızca Sekme ve ok tuşlarıyla kullanın. Her değere ulaşamıyorsanız kullanıcılarınız da ulaşamaz. ⌨️

Noktaları odaklanabilir ve adlandırılmış hâle getirmeyi, gezinen tabindex ile ok tuşlarıyla ilerlemeyi, üzerine gelme davranışını odakta da göstermeyi ve her zaman bir tablo yedeği bulundurmayı öğrendiniz. 🚀