2.1.3 Klavye (İstisnasız)
İçeriğin tüm işlevselliği, hiçbir istisna olmaksızın, bireysel tuş vuruşları için belirli zamanlamalar gerektirmeden bir klavye arayüzü aracılığıyla çalıştırılmalıdır.
Bu kural ne anlama geliyor
WCAG 2.1.3, 2.1.1 (Klavye) kriterinin AAA seviyesindeki versiyonudur. 2.1.1 temelden yol bağımlı giriş gerektiren işlevsellik için istisnalara izin verirken (serbest çizim gibi), 2.1.3 tüm istisnalari kaldırır. Her bir işlevsellik parçası, işlevselliğin nasıl tasarlandigina bakilmaksizin, klavye arayüzü aracılığıyla tamamen çalıştırılmalıdır.
Bu, 2.1.1'den önemli ölçüde daha yüksek bir cubuktur. Bu kriteri karşılamak, serbest çizim, el yazisi girişi veya ucus simulatoru kontrolleri gibi ozelliklerin bile klavye ile calistirilamablair alternatifleri saglamasi gerektiğini ifade eder. AAA uyumluluğunu hedefleyen kuruluşlar, her özelliği bastan itibaren yalnızca klavye ile çalışma gerekliliği ile tasarlamalidir.
Neden önemlidir
2.1.1, doğası gereği yol bağımlı giriş için istisnalara izin vererek pratik duzeltmeler saglarkeni, bu AAA kriteri, maksimum kapsayicilik için bu üç durumların bile klavye alternatifleri olması gerektiğini kabul eder. Bazi kullanıcılar fiziksel olarak herhangi bir işaret aygiti kullanamaz ve tüm bilgisayar etkileşimi için tamamen klavye girisine bağımlıdır.
Bu kriteri karşılamak, giriş yontemlerine bakilmaksizin hiçbir kullanıcının herhangi bir islevsellikten dislanmamasini sağlar. Klavye erisilebilirliginin altin standardi olup özellikle evrensel erişilebilirliğin temel bir gereklilik olducu devlet, saglik ve eğitim platformlari için önemlidir.
İlgili axe-core kuralları
Bu kriter için otomatik axe-core kuralı bulunmamaktadır. 2.1.1'in istisnasiz bir uzantisi olduğundan, test, her etkileşimli ozelligin kapsamlı bir şekilde manuel incelenmesini gerektirir ve hiçbir istisnaya izin verilmez.
Nasıl test edilir
Test, 2.1.1 ile aynıdır ancak daha sıkı gereksinimlerle — hiçbir istisnaya izin verilmez.
- Sitedeki her ozelligin eksiksiz bir yalnızca-klavye denetimini gerçekleştirin. Tüm etkileşimli işlevselliği belirleyin.
- Her özellik için yalnızca klavye girişi (Tab, Shift+Tab, Enter, Bosluk, Ok tuşları, Escape) kullanılarak tam olarak calistirilabildignii doğrulayın.
- 2.1.1 kapsamında muaf tutulabilecek özellikleri özellikle test edin: çizim araçları, sürükle-birak, hareket tabanlı etkilesimler.
- Klavye alternatiflerinin eşdeğer sonuçlar uretigini — işlevselliğin bozulmus versiyonlarini değil — doğrulayın.
- Klavye ile calistirilamazligi olmayan herhangi bir işlevselliği AAA hatası olarak belgeleyin.
Nasıl düzeltilir
2.1.1 kapsamında muaf tutulacak olanlar da dahil olmak üzere her etkileşim için klavye alternatifleri sağlayın.
Klavye alternatifli çizim araçı
<!-- Klavye alternatifi olarak koordinat tabanlı giriş sağlayın -->
<canvas id="çizim-tuvali" aria-label="Cizim alanı"></canvas>
<!-- Klavye erisimli alternatif -->
<div role="group" aria-label="Cizim koordinatlari">
<label for="x-koord">X koordinati:</label>
<input type="number" id="x-koord" min="0" max="500">
<label for="y-koord">Y koordinati:</label>
<input type="number" id="y-koord" min="0" max="500">
<button onclick="noktaEkle()">Nokta Ekle</button>
<button onclick="noktalariBagla()">Noktaları Bagla</button>
<button onclick="sonIslemGeriAl()">Geri Al</button>
</div>
Klavye ile yeniden sıralama destekli sürükle-birak
<!-- Klavye destekli sıralanabilir liste -->
<ul role="listbox" aria-label="Yeniden sıralanabilir liste">
<li role="option" tabindex="0"
aria-grabbed="false"
onkeydown="siralamayiYonet(event, this)">
Öğe 1
<button aria-label="Öğe 1 yukarı tasi"
onclick="yukariTasi(this)">▲</button>
<button aria-label="Öğe 1 aşağı tasi"
onclick="asagiTasi(this)">▼</button>
</li>
</ul>
<script>
function siralamayiYonet(e, öğe) {
if (e.altKey && e.key === 'ArrowUp') {
e.preventDefault();
yukariTasi(öğe);
} else if (e.altKey && e.key === 'ArrowDown') {
e.preventDefault();
asagiTasi(öğe);
}
}
</script>
Sık yapılan hatalar
- Yol bağımlı ozelliklerin (çizim, hareket girişi) A Seviyesi altında muaf olduklari için klavye alternatifleri gerektirmedigini varsaymak.
- Fare tabanlı versiyonla aynı işlevselliği sunmayan düşük kaliteli klavye alternatifleri sağlamak.
- Istisnalarin geçerli olduğunu varsayarak üçüncü parti bileşenler veya gömülü içerik için klavye destegini ihmal etmek.
- Karmaşık etkileşim kalıplarını (çok adımlı iş akışları, sürükle islemleri) klavye ile kapsamlı olarak test etmemek.
- 2.1.1 uyumluluğuna guvenip AAA'nın otomatik olarak karsilandigini varsaymak.
Kaynaklar
- WebAIM: Keyboard Accessibility— WebAIM
- Deque University: Keyboard Accessibility— Deque University
- W3C WAI: ARIA Authoring Practices— W3C WAI