Dříve jsem si myslel, že přístupnost je v nejlepším případě vylepšením UX a v nejhorším „práce s dodržováním předpisů“. Ale jak pandemie proměnila Boxed.com na nezbytnou službu pro mnoho našich zákazníků, přečetl jsem si spoustu srdcervoucích lístků zákaznického servisu, které odhalily mé předsudky a nezamýšlené vyloučení způsobené mým kódem. Nyní jsem přesvědčen, že zpřístupnění webu je správná věc
Přístupnost je široké téma a podmnožina vznešenějších inkluzivních principů designu, na které nebudu předstírat, že jsem odborník. Právě sdílím jednu z mnoha lekcí, které jsem se jako vývojář naučil.
Pojďme tedy k hlavnímu tématu.
Milujeme naše div značky. Ale jednoduše z hlediska vývojářské zkušenosti, aniž bychom diskutovali o výhodách sémantického HTML (které si zaslouží svůj vlastní článek), a button je dostupnější s menším množstvím kódu ve srovnání s kliknutím div . Pro ilustraci pojďme do toho a vytvořte klikací prvek div.
<div>Click me</div>
<script>
function doSomething() {
console.log('do something');
}
document.querySelector('div').onclick = doSomething;
</script>
Není to dost dobré, musíme vizuálně pomocí typu kurzoru naznačit, že na div lze kliknout (což je zřejmě také diskutabilní). Přidejme nějaké CSS.
<style>
.someDiv {
cursor: pointer;
}
</style>
<div class='someDiv'>Click me</div>
Není to dost dobré, musíme prostřednictvím čtečky obrazovky slovně naznačit, že div je tlačítko, na které lze kliknout, a musí být přístupné z klávesnice přes navigaci Tabbing. Pojďme přidat atributy role a tabindex.
<div class='someDiv' tabindex='0' role='button'>Click me</div>
Ne dost dobrý, div také musí být klávesnice přístupná pomocí kláves Enter a mezerníku. Pojďme přidat další JavaScript (který nemusí být ani 100% kompatibilní s různými prohlížeči).
<script>
function doSomething() {
console.log('do something');
}
function handleKeydown(e) {
if (e.key === 'Enter' || e.key === ' ') {
doSomething();
}
}
document.querySelector('div').onclick = doSomething;
document.querySelector('div').onkeydown = handleKeydown;
</script>
Tak to nakonec skončíme.
<style>
.someDiv {
cursor: pointer;
}
</style>
<div class='someDiv' tabindex='0' role='button'>Click me</div>
<script>
function doSomething() {
console.log('do something');
}
handleKeydown(e) {
if (e.key === 'Enter' || e.key === 'Space Bar') {
doSomething();
}
}
document.querySelector('div').onclick = doSomething;
document.querySelector('div').onkeydown = handleKeydown;
</script>
Zatímco button verze, která je stejně přístupná vypadá takto.
<button>Click here</button>
<script>
function doSomething() {
console.log('do something');
}
document.querySelector('button').onclick = doSomething;
</script>
Jaký je váš přístup k vytváření klikacích komponent uživatelského rozhraní? Dejte mi vědět v komentářích.
Poznámka:Rozhodl jsem se nediskutovat o atributech árie, protože si myslím, že si zaslouží svůj vlastní článek.
📫 Zavolejte mi LinkedIn nebo Twitter !