Sette fokus til ikke-fokuserbare elementer
Når du trykker Tab fra element til element vil du normalt få tab-stopp på interaktive elementer. Du får altså eksempelvis tab-stopp på lenker og knapper, men ikke på overskrifter og avsnitt.
Er det lurt å sette fokus med script?
Mange er skeptiske til å sette fokus med script, dvs. ta valg for brukeren om hva det er sannsynlig at han/hun ønsker å gjøre. Jeg er tildels ganske uenig i dette. I native programvare er bevisst styring av fokus helt vanlig, og på mange måter er det derfor native programvare oppfattes som mer effektivt (i alle fall av meg).
På mortentollefsen.no setter jeg bevisst fokus på h1 tag'en når en side lastes. Dermed slipper brukeren å navigere dit (selvsagt mest merkbart for de som bruker skjermleser). Skjermleserbrukere slipper å navigere forbi hovedmenyen på forsiden eller brødsmulestien på andre sider. Ulempen er kanskje at noen da må navigere opp, men min tanke er at de fleste ønsker å sjekke siden de har valgt, og så eventuelt bruke brødsmulestien seinere (og da er det kjapt og greit å gå til toppen av siden). Jeg bruker bevisst fokusstyring en del andre steder også. Poenget er at jeg mener at dette er bra, men det må selvsagt ligge en ordentlig plan bak fokusstyringen.
tabindex=-1
Skal du sette fokus til en overskrift eller et annet interaktivt element brukes tabindex=-1. Du vil da ikke få tab-stopp på elementet, men du kan scripte tab-fokus til dette elementet.
Koden på h1 tag'en på denne siden ser eksempelvis slik ut:
<h1 id="mt_main_heading" tabindex="-1">Sette fokus til ikke-fokuserbare elementer</h1>
Lenken nedenfor vil flytte fokus til h1-tag'en:
For enkelhetsskyld har jeg her lagt koden rett på lenken, og det ser slik ut:
<p><a href="#" onclick="document.getElementById('mt_main_heading').focus(); return false;">Flytt til h1 (overskrift 1)</a></p>
Lenken setter altså fokus til h1, men du vil ikke kunne trykke Tab og komme til denne overskriften.