details/summary med tabstop på details-seksjonen

Det er en utbredt misforståelse at de som bruker skjermleser tabber i et enda kjør! Men i skjemaer er det nok en del som bruker Tab fra felt til felt. Hvis du da har en ReadMore av et eller annet slag tenker jeg at det er en ide med tabstop på det utvidede innholdet. Det gjør at du kan åpne innholdet tabbe dit og så tabbe videre uten å gå ut av skjemamodus (i Jaws eller tilsvarende for andre skjermlesere). Under har jeg prøvd dette med en vanlig details/summary-tagg.

Eksempel 1: div

Nedenfor brukes en div for å få tab-stopp.

Jaws leser hele div-tag'en når du tabber dit, men kun hvis virtuell markør ikke brukes (i så fall leses første avsnitt).

Eksempel 2: section

Når details/summary brukes for å lage accordion eller feks. når det finnes nestede details/summary kan det være nyttig å se start/slutt på det utvidede innholdet med skjermleser. Det kan gjøres vha. eksempelvis section. Da vil imidlertid Jaws lese navnet på seksjonen, ikke innholdet (her er det sannsynligvis et wcag-krav som sier at seksjonen må ha en tittel. når du tabber til seksjonen. Det er dermed mindre nyttig enn i Eksempel 1, men absolutt aktuelt der det ikke er lagt inn tab-stopp på ekspandert innhold.