Braille

De regel is kort: zet in de HTML wat eerst gelezen moet worden, en gebruik CSS om te bepalen wáár het staat.

Deze drie eigenschappen verplaatsen het beeld zonder de volgorde te veranderen. Ze zijn alle drie nuttig, en worden pas een probleem zodra ze de leesvolgorde omdraaien:

.blok  { order: -1; }
.kaart { grid-row: 1; }
.zij   { position: absolute; top: 0; }

Let ook op CSS-kolommen. Die lezen van boven naar beneden per kolom, niet van links naar rechts. Dat is precies wat je wilt bij lopende tekst, en precies wat je niet wilt bij een lijst met stappen:

.tekst { columns: 2; }

De veilige gewoonte is om eerst zonder opmaak te bouwen. Lees de pagina van boven naar beneden; klopt het verhaal, dan mag de opmaak erop.

Open dit onderwerp op een eigen pagina

Voor deze test is geen schermlezer nodig. Zet de opmaak uit en lees wat er staat.

Plak dit in de console van de browser. Alle stijlen gaan uit en de pagina komt in de volgorde van de code te staan:

document.querySelectorAll('style, link[rel=stylesheet]')
  .forEach(function (el) { el.disabled = true; });

Waar je op let:

• Lees van boven naar beneden. Klopt de volgorde met wat je gewend bent?
• Staan koppen boven de tekst waar ze bij horen?
• Komt bij een kaart eerst de naam en dan de prijs, of andersom?
• Staat een bijschrift onder de juiste afbeelding?
• Komt het menu vóór de inhoud, en de voettekst erna?

De tweede test is het venster versmallen tot 320 pixels. Alles komt dan onder elkaar te staan, in de volgorde van de code. Springt er iets naar een onverwachte plek, dan is de fout gevonden — en meteen ook een afwijking op 1.4.10.

Ververs de pagina om de stijlen terug te krijgen.

Open dit onderwerp op een eigen pagina

In een pdf speelt hetzelfde als op een website, maar met een eigen oorzaak. Een tweekolomsopmaak leest voor het oog van linksboven naar linksonder. Een schermlezer volgt de tagboom. Staat daar de eerste regel links, dan de eerste regel rechts, dan hoort de lezer twee verhalen door elkaar.

Waar dat vandaan komt:

• Tekstvakken in Word. Die belanden vaak achteraan of op een willekeurige plek.
• Kolommen die met tabs zijn gemaakt in plaats van met een kolomindeling.
• Een document dat is afgedrukt naar pdf. Dan is er geen structuur, alleen plaatsing.
• Automatisch taggen in Acrobat, dat bij kolommen vaak misgokt.

In Acrobat zijn er twee panelen die over volgorde gaan. Het tagpaneel is leidend: de volgorde van de tags is de volgorde waarin wordt voorgelezen. Het leesvolgordepaneel onder Toegankelijkheid toont genummerde blokken en is handig om snel te controleren, maar bij twijfel geldt het tagpaneel.

De echte oplossing zit in het bronbestand. Gebruik in Word een echte kolomindeling in plaats van tekstvakken, en zet afbeeldingen in de tekstregel in plaats van zwevend. Dan klopt de volgorde vanzelf.

Open dit onderwerp op een eigen pagina

Een schermlezer leest een pagina voor in de volgorde van de code, van de eerste regel naar de laatste. Op het scherm staat alles tegelijk, maar wie de pagina hoort of met een vergroting strook voor strook afleest, krijgt hem als een rij. Zorg daarom dat de volgorde in de code overeenkomt met de volgorde waarin de pagina gelezen moet worden.

Een veelvoorkomend voorbeeld is een prijskaart met de prijs boven de naam, terwijl in de code de prijs eerst staat. Op het scherm staat er “Basispakket — 39 euro”. De schermlezer leest “39 euro. Basispakket.” Bij één kaart is dat te volgen, bij vijf kaarten naast elkaar niet meer.

Wie hier tegenaan loopt:

• Bezoekers die blind zijn en de pagina horen in plaats van zien.
• Bezoekers die een schermvergroting gebruiken en de pagina strook voor strook afleiden.
• Bezoekers die de pagina laten voorlezen omdat lezen moeite kost.
• Iedereen op een smal scherm, want dan komt alles onder elkaar te staan in de volgorde van de code.

Open dit onderwerp op een eigen pagina