Fyll inn ordet som mangler

Fyll inn ordet som mangler er en vanlig oppgavetype. Hvordan bør dette kodes for å fungere best mulig for flest mulig skjermlesere?

Fyll inn ett sted

• Første delen av setningen skjules med aria-hidden for å unngå dobbel tekst når skjermlesere er i lesemodus.
• Input-feltet har aria-labelledby til første delen av setningen og aria-describedby til siste del av setningen. Dette gjør at eksempelvis Jaws leser bra, både i virtuell modus og hvis du trykker Tab fra felt til felt i ippgaver med mange fyll-inn-ord.
• Siste del av setningen bør ikke skjules fordi den da ikke vil bli lest av alle skjermlesere. Med VoiceOver må du flytte til siste del for å få lest alt (eller trykke Kontroll+Tilvalg+Kommando+-).

<p>
    <span id="s1-1" aria-hidden="true">Krabber må </span>
    <input type="text" aria-labelledby="s1-1" aria-describedby="s1-2">
    <span id="s1-2"> før de spises.</span>
</p>
            

Krabber må før de spises.

Fyll inn flere ord

Dette er mindre smidig for de som bruker skjermleser. Her kan vi tenke oss at hvert input-felt har en aria-label som inneholder id'er til alt innhold før feltet. Jeg synes imidlertid dette blir litt klønete i lesemodus og tror at aria-label kun bør inneholde teksten mellom input-feltene.

Denne måten å kode på blir bra i lesemodus, men er litt mer krevende i skjemamodus. Det er selvsagt mulig å skrive ut hele setningen etter input, kanskje mest aktuelt som en sr-only (her har jeg ikke skjult teksten, men jeg antar at det vil være mest aktuelt i mange tilfeller. Jeg har også lagt tabindex på den hele setningen, så blir det ekstra enkelt å fylle ut og kontrollere svaret med skjermleser.

<p lang="en">
  <span id="s2-1" aria-hidden="true">I come </span>
  <input id="i2-1" type="text" aria-labelledby="s2-1" aria-describedby="s2-2">
  <span id="s2-2" aria-hidden="true"> down in </span>
  <input id="i2-2" type="text" aria-labelledby="s2-2" aria-describedby="s2-3">
  <span id="s2-3"> valley</span>
</p>
            

I come down in valley