Een bloghero-afbeelding met een alt-attribuut is een opgelost probleem. Een STEM-diagram niet. Drie eigenschappen van wetenschappelijk beeldmateriaal doorbreken de aannames die zijn ingebakken in alt, aria-label en het spraakmodel van schermlezers.

Ten eerste is de informatiedichtheid hoog genoeg dat één zin het niet kan bevatten. Een benzeenring bestaat uit zes koolstofatomen, zes waterstofatomen, afwisselende dubbele bindingen, een gedelokaliseerd pi-systeem, een vlakke geometrie en een bindingslengte van 1,39 ångström. De conventie voor alternatieve tekst vraagt om “een korte tekstuele vervanging”; benzeen heeft een alinea nodig. Het comprimeren tot één zin verliest ofwel de structurele informatie (“een benzeenmolecuul”) of produceert een onleesbare aaneenschakeling die de schermlezer op 180 woorden per minuut moet uitspellen.

Ten tweede dragen de relaties tussen elementen evenveel betekenis als de elementen zelf. In een vrij-lichaam-diagram is de pijl van het blok naar de wand geen decoratie — het is de normaalkracht, en de hoek ten opzichte van de zwaartekrachtvector is het antwoord op het probleem. Een vlakke beschrijving kan “de hoek tussen deze twee pijlen is 90 graden en daardoor lost het probleem op” niet coderen, omdat vlakke beschrijving geen structuur heeft. SVG, zorgvuldig gebruikt, wel.

Ten derde moeten STEM-studenten door het diagram navigeren, niet alleen ernaar luisteren. Een leerling die werkt aan een grafiek van een derdegraadsfunctie wil niet de alternatieve tekst van begin tot eind horen — ze willen op het lokale maximum landen, vragen “wat is de helling hier,” en dan naar het buigpunt gaan. Dat is een ander interactiemodel dan het model waarmee schermlezers standaard worden geleverd. Het bouwen ervan vereist toetsenbordhandlers op individuele SVG-knooppunten, een ARIA-beschreven inhoudsstructuur en een terugvaloptie voor de hulptechnologie-stacks die dit niet kunnen bijhouden.

Bijna elk gepubliceerd STEM-leerboek levert zijn diagrammen nog steeds als PNG of JPG. Een rasterafbeelding is een ondoorzichtig pixelraster: het heeft één toegangspunt voor hulptechnologie, het alt-attribuut, en één terugvaloptie, het longdesc-attribuut dat browsers tien jaar lang stilletjes hebben afgeschaft. Er zit geen structuur in de afbeelding die een schermlezer kan adresseren. Het diagram is een zwarte doos met een label op de voorkant.

SVG keert het model om. Elke vorm in een SVG-document is een DOM-knooppunt — adresseerbaar, focusbaar, labelbaar. Een benzeenring als SVG heeft zes circle-elementen voor de koolstofatomen, zes line-elementen voor de bindingen en een omsluitend g-element dat het geheel benoemt. Elk van die knooppunten kan role-, aria-label-, aria-labelledby-, aria-describedby- en tabindex-attributen bevatten. De schermlezer ziet een toegankelijkheidsstructuur van benoemde regio’s in plaats van één ondoorzichtige blob.

De minimaal levensvatbare toegankelijke SVG bevat drie zaken op het svg-wortelelement: role=“img”, aria-labelledby verwijzend naar een title-kind en aria-describedby verwijzend naar een desc-kind of naar een externe alinea op basis van id. Elk is klein. Elk doet werk dat de andere twee niet kunnen.

Een scherpe waarschuwing: role=“img” op het svg-wortelelement verandert wat hulptechnologie met de kinderen doet. Met role=“img” behandelen NVDA en JAWS de hele SVG als één gelabelde afbeelding en stellen de innerlijke knooppunten niet bloot — zelfs als die innerlijke knooppunten tabindex hebben. Om beide gedragingen te krijgen — een samenvattingslabel bovenaan en adresseerbare kinderen daarbinnen — laat men de wortelrol leeg (of stelt men role=“graphics-document” in vanuit de W3C Graphics ARIA-module) en plaatst men het label op een kind-g in plaats van de wortel. Browsers en schermlezers verwerken deze combinatie ongelijkmatig. De matrix in sectie 6 documenteert wat waar werkt.

Het longdesc-attribuut was het oorspronkelijke antwoord op “een alt-attribuut is niet genoeg.” Browsers hebben de ondersteuning jarenlang stilletjes verwijderd; Firefox heeft het verwijderd in versie 90, Safari heeft het nooit geïmplementeerd, Chrome behandelt het als een no-op. Wie in 2026 nog steeds longdesc=“benzene-desc.html” schrijft, levert opmaak die niets leest. De vervanging is niet één attribuut maar een drielaags patroon dat een inline beschrijving, een zichtbaar uitbreidbaar paneel en machine-leesbare metadata combineert.

Laag één is het inline desc-element binnen de SVG. Twee tot vier zinnen. Gelezen door schermlezers wanneer de SVG-wortel wordt aangekondigd. Dit is de nieuwe longdesc — een beschrijving die deel uitmaakt van het SVG-document en er overal mee naartoe gaat.

Laag twee is een zichtbaar uitbreidbaar beschrijvingspaneel naast het diagram, beschikbaar voor elke lezer, niet alleen voor schermlezergebruikers. Een samenvattingsregel plus een openingsknop die een langere tekstuele doorloop opent — doorgaans drie tot tien zinnen voor een scheikundemolecuul, langer voor een celstructuurdiagram met twintig gelabelde organellen. Het zichtbare paneel lost een probleem op dat het inline desc-element niet kan oplossen: studenten die het diagram kunnen zien maar het niet kunnen decoderen (slechtziende leerlingen, dyslectische leerlingen, iedereen die het materiaal voor het eerst leert) hebben de lange beschrijving ook nodig. Het achter een knop plaatsen verbergt het niet voor schermlezers — zij tellen de openbaring op, de gebruiker activeert het en de beschrijving wordt in de buffer gelezen.

Laag drie is gestructureerde metadata via JSON-LD. Een CreativeWork-object waarvan de accessibilityFeature-array opsomt wat het diagram biedt: longDescription, alternativeText, structuralNavigation, describedMath, tactileGraphic (als een afdrukbaar tactiel beschikbaar is). Zoekmachines, inhoudsaanbevelaars en scanners voor toegankelijkheidsconformiteit verwerken deze metadata allemaal. Het doet niets voor de directe leeservaring van de schermlezer, maar maakt het diagram vindbaar als toegankelijke inhoud — wat van belang is wanneer een leerling kiest tussen drie leerboeken en één ervan zijn toegankelijkheidsfuncties in machine-leesbare vorm adverteert.

Statische diagrammen zijn het eenvoudige geval. Het moeilijke geval is het geanimeerde diagram — een mitochondrion dat in 3D roteert, een sinusgolf die over de x-as wordt getekend, een chemische reactie waarbij bindingen over vier seconden worden verbroken en hervormd. Het conventionele antwoord is een videobestand met een audiodescriptietrack, maar dat geeft de adresseerbaarheid van SVG op: het moment dat men de animatie in een video bakt, houdt elk knooppunt dat zorgvuldig is gelabeld op een DOM-knooppunt te zijn en wordt het weer een pixel.

Het toegankelijke alternatief is de animatie als SVG (of Canvas met een offscreen toegankelijkheidsstructuur) te houden en audiodescripties te verzenden naarmate de animatie vordert, aangestuurd door dezelfde DOM-mutaties die de visuele wijziging aansturen. Het patroon: een MutationObserver bewaakt de SVG op wijzigingen — een nieuw transform-attribuut, een verschijnende binding, een roterende vector — en schrijft bij elke significante wijziging een korte tekstupdate naar een globale aria-live=“polite”-regio. De visuele animatie stuurt een audiobeschrijving aan, gegenereerd op de vluchtige basis van dezelfde waarheid.

De implementatie heeft drie bewegende onderdelen. Het eerste is de animatie zelf, uitgedrukt als een reeks tijdlijn-keyframes — dezelfde gegevens die de SVG-renderer verbruikt. Het tweede is een annotatielaag: elk keyframe bevat een korte tekst die beschrijft wat op dat moment verandert (“binding vormt zich tussen C1 en C2,” “golf passeert nul van onderen”). Het derde is de audiodescriptiestuurder, die zich abonneert op de tijdlijn, elk geannoteerd keyframe oppikt en de tekst een paar honderd milliseconden voor de visuele wijziging naar de live-regio schrijft. De doorlooptijd komt overeen met wat productiemaatige audiodescriptie bij film doet: de beschrijving wordt gehoord vlak voordat de visuele gebeurtenis plaatsvindt, niet erna.

Drie storingmodi zijn algemeen genoeg om te vermelden. Ten eerste burstende updates. Een animatie die 60 mutaties per seconde vuurt, overspoelt de synthesizer van de schermlezer — de aankondigingen stapelen op, vertragen de animatie en worden onverstaanbaar. Annoteer alleen de semantisch betekenisvolle keyframes, niet elk frame, en beperk tot approx. één aankondiging per 1500 ms. Ten tweede het missen van het begin. Een live-regio die niet bestond voordat de animatie begon, kondigt zijn eerste update niet betrouwbaar aan (zie het aria-live-frameworkstuk voor het onderliggende plannerprobleem). Koppel de live-regio leeg bij het laden van de pagina. Ten derde geen pauzebesturing. Gebruikers moeten de audiodescriptie kunnen pauzeren, vertragen of stap voor stap doorlopen. Bouw een kleine bedieningsbalk — afspelen, pauzeren, vorige-gebeurtenis, volgende-gebeurtenis — en koppel de knoppen aan dezelfde tijdlijnstuurder.

Een wiskundige functiegrafiek die een ziende student met een cursor kan doorscrubben, is pas toegankelijk als een niet-ziende student het met het toetsenbord kan doen. Het mechanisme is bekend en slecht geïmplementeerd in de praktijk: elk significant datapunt op de kromme krijgt tabindex=“0”, een aria-label die de coördinaten en eventuele benoemde kenmerken beschrijft (“lokaal maximum op x = -1, y = 4”), en een toetsenbordhandler die reageert op pijltoetsen voor fijnmazige beweging tussen aangrenzende punten.

De juiste granulariteit is belangrijker dan mensen beseffen. Tabben door elk getekend pixel van een derdegraadskromme is vijandig — de gebruiker hoort duizenden “x gelijk aan 0,1, y gelijk aan 0,001”-aankondigingen voordat er iets interessants is. Tabben door alleen de benoemde kenmerken (lokale maxima, minima, buigpunten, x-snijpunten, y-snijpunten) is te schaars. Het pragmatische compromis: twee navigatielagen. De Tab-toets doorloopt alleen benoemde kenmerken — doorgaans drie tot zeven op een kromme — en de pijltoetsen, zodra een kenmerk is gefocust, stappen links en rechts langs de kromme met een door de leerling gedefinieerde stapgrootte, waarbij op elke stap de coördinaat wordt aangekondigd. Home en End springen naar de linker- en rechtergrenzen van de kromme. Page Up en Page Down springen naar het volgende benoemde kenmerk.

Voor een grafiek met meerdere reeksen — een kinetiekgrafiek in scheikunde, een fysica-oscillatiegrafiek met twee golfvormen — voeg men een reekswisselingsas toe. Pijl-omhoog en pijl-omlaag wisselen tussen reeksen op de huidige x-coördinaat; links en rechts bewegen langs de huidige reeks. De conventie is parallel aan de manier waarop spreadsheetlezers rijen en kolommen navigeren en hergebruikt een mentaal model dat veel gebruikers al hebben.

Een detail dat wordt gemist: het gefocuste datapunt heeft een zichtbare focusindicator nodig. Een niet-ziende gebruiker heeft die niet nodig, maar een ziende schermlezergebruiker wel, evenals partnerinstructeurs die meekijken over de schouder van de student. Render een focusring rondom het gefocuste SVG-element met :focus-visible-stijl — dezelfde conventie als knopfocusringen, toegepast op SVG-knooppunten die de browser standaard niet stijlt.

De hardste waarheid in dit stuk: de toegankelijke-SVG-stapel werkt niet op dezelfde manier in alle browsers en schermlezers, en de hiaten zijn geen bugs in de opmaak. NVDA op Firefox is de meest betrouwbare combinatie — de enige waarbij elk patroon in dit artikel zich gedraagt zoals de W3C SVG-toegankelijkheidsafbeelding zegt dat het zou moeten. Elke andere combinatie heeft minstens één bekend hiaat.

Safari op macOS met VoiceOver is het meest problematisch van de grote stacks. De SVG-toegankelijkheidsstructuur van WebKit heeft gedocumenteerde gaten in de manier waarop het interne g-elementen met ARIA-labels blootstelt: de labels zijn aanwezig in de DOM en inspecteerbaar met de toegankelijkheidsinspector, maar VoiceOver pikt ze niet altijd op wanneer de gebruiker navigeert met VO-Pijl-Rechts. Het gedrag is inconsistent — soms worden de interne labels aangekondigd, soms wordt alleen het SVG-rootlabel gelezen, zonder een voor de gebruiker zichtbaar patroon. De WebKit-bugzilla heeft open issues over dit onderwerp die teruggaan tot 2020. De praktische implicatie: als uw STEM-diagram werkt op Mac, is dat een noodzakelijke voorwaarde, maar geen voldoende. Test op Windows met NVDA voor levering.

Chrome op Windows met JAWS is de op één na meest betrouwbare stack — dicht bij NVDA + Firefox, met één nuance: JAWS behandelt SVG role=“img” agressiever dan NVDA en klapt interne knooppunten vaker samen. De oplossing is het gebruik van role=“graphics-document” uit de W3C Graphics ARIA-module op het svg-wortelelement, wat JAWS correct verwerkt. NVDA verwerkt het ook correct. Firefox en Chrome leveren beide de benodigde platform-API-afbeeldingen.

Mobiel is een apart probleem. iOS VoiceOver erft de SVG-hiaten van WebKit; Android TalkBack op Chrome verwerkt interne knooppunten betrouwbaar, maar ondersteunt nog geen W3C Graphics ARIA-rollen, dus valt het terug op role=“img”-gedrag. Voor een leerboekuitgever die zowel desktop als mobiel bedient, is de veilige keuze om twee SVG-modi te leveren: een structureel navigeerbare modus voor desktop en een “samenvatting plus lange beschrijving”-modus die interne navigatie op mobiel uitschakelt. De moduswissel wordt aangestuurd door user agent en gebruikersvoorkeur, opgeslagen over sessies heen.

Eén lezing van de matrix: lever NVDA + Firefox als de baseline conformiteits-target, documenteer de Safari- en TalkBack-terugvalopties en gebruik nooit de afwezigheid van een innerlijk-knooppuntaankondiging op een Mac als bewijs dat de SVG ontoegankelijk is. Het diagram kan perfect toegankelijk zijn — het platform legt de labels die men schreef simpelweg niet bloot. De toegankelijkheidsinspector in Safari’s Ontwikkelmenu toont wat er in de structuur staat, zelfs wanneer VoiceOver het niet leest, en is het juiste gereedschap om “kapotte opmaak” te onderscheiden van “kapot platform.”

Het meeste gepubliceerde advies over toegankelijkheid van STEM-diagrammen stopt bij de title-en-desc-laag. Dat is de eenvoudige 30 procent. De overige 70 procent — het langbeschrijvingspaneel, de audiodescriptietijdlijn aangestuurd door DOM-mutaties, de tweegraanulair toetsenbordnavigatie, de platformspecifieke terugvalopties — is net zoveel interactieontwerp als opmaak. De schermlezer is één gebruiker; een niet-ziende leerling die een schermlezer gebruikt om door een functiegrafiek te navigeren op het tempo van een ziende klasgenoot is een andere gebruiker, met andere behoeften.

Het dividend is groot en ongelijk. Een leerboekuitgever die de volledige stapel levert over approx. 600 diagrammen in een calculus-leerboek bedient elke niet-ziende leerling die dat leerboek gebruikt, elke slechtziende leerling die het openingspaneel waardeert, elke dyslectische leerling die de lange beschrijving kan lezen maar de visuele niet kan decoderen, elke leerling met Engels als tweede taal die de gestructureerde beschrijving gemakkelijker vindt dan de visuele conventies van het vakgebied, en elke ziende instructeur die audiossamenvattingen voor podcasts produceert. Dezelfde opmaak bedient vijf verschillende doelgroepen. De kosten zijn een paar uur per diagram, afgeschreven over decennia van studentgebruik.

De huidige stand van de techniek is ongelijk omdat de toegankelijkheidsstructuurimplementaties verschillen op de besturingssystemen die studenten daadwerkelijk gebruiken. NVDA en JAWS op Windows hebben de meeste SVG-hiaten gesloten. Safari op macOS niet. Totdat de platformen convergeren, is het productieparatroon om te schrijven voor de strengste target — NVDA + Firefox — en de terugvalopties te documenteren voor de platformen met bekende hiaten. Dat is meer werk dan het alt-attribuutmodel ooit vereiste. Het is ook de enige manier om een STEM-leerboek te leveren dat de lezers die het bedoelt te onderwijzen niet uitsluit.