Blogin pääkuva alt-attribuutilla on ratkaistu ongelma. STEM-kaavio ei ole. Tieteellisellä kuvainnolle on kolme ominaisuutta, jotka rikkovat alt-, aria-label- ja ruudunlukuohjelman puhemalliin sisäänrakennetut oletukset.

Ensiksi tietotiheys on niin suuri, ettei yksittäinen lause pysty välittämään sitä. Bentseenirengas on kuusi hiiliatomia, kuusi vetyatomia, vuorottelevat kaksoissidokset, delokaalisoitunut pi-järjestelmä, tasomainen geometria ja 1,39 angströmin sidospituus. Alt-tekstikäytäntö pyytää “lyhyttä tekstuaalista korvaajaa”; bentseeni tarvitsee kappaleen. Pakkaaminen yhteen lauseeseen joko hävittää rakenteellisen tiedon (“bentseenimolekyyli”) tai tuottaa lukukelvottoman virran, jonka ruudunlukuohjelma joutuu tavaamaan 180 sanaa minuutissa.

Toiseksi elementtien väliset suhteet kantavat yhtä paljon merkitystä kuin itse elementit. Vapaan kappaleen piirroksen nuoli laatikosta seinään ei ole koristelu — se on tukivoima, ja sen kulma painovoimavektoriin nähden on tehtävän vastaus. Tasainen kuvaus ei pysty koodaamaan “näiden kahden nuolen välinen kulma on 90 astetta ja siksi ongelma ratkeaa”, koska tasaisella kuvauksella ei ole rakennetta. SVG, käytettynä huolellisesti, on.

Kolmanneksi STEM-opiskelijoiden on pystyttävä navigoimaan kaaviota eikä vain kuulemaan sitä. Opiskelija, joka työstää kolmannen asteen funktion kuvaajaa, ei halua kuulla alt-tekstiä alusta loppuun — hän haluaa päästä paikalliseen maksimiin, kysyä “mikä on kulmakerroin tässä kohdassa” ja siirtyä sitten taitepisteeseen. Se on eri vuorovaikutusmalli kuin se, jonka ruudunlukuohjelmat toimittavat oletuksena. Sen rakentaminen edellyttää näppäimistönkäsittelijöitä yksittäisille SVG-solmuille, ARIA-kuvattua sisältöpuuta ja varavaihtoehtoa niille avustavien teknologioiden pinoille, jotka eivät pysy mukana.

Lähes kaikki julkaistut STEM-oppikirjat toimittavat edelleen kaavionsa PNG- tai JPG-muodossa. Rasterikuva on läpinäkymätön pikseliruudukko: sillä on yksi sisäänpääsypiste avustavalle teknologialle eli alt-attribuutti ja yksi vararatkaisu eli longdesc-attribuutti, jonka selaimet ovat viettäneet kymmenen vuotta poistamassa käytöstä. Kuvan sisällä ei ole rakennetta, johon ruudunlukuohjelma voisi tarttua. Kaavio on mustalaatikko, jonka edessä on etiketti.

SVG kääntää mallin ylösalaisin. Jokainen muoto SVG-dokumentissa on DOM-solmu — osoitettavissa, kohdistettavissa, merkittävissä. Bentseenirengas SVG-muodossa sisältää kuusi circle-elementtiä hiilille, kuusi line-elementtiä sidoksille ja ympäröivän g-elementin, joka nimeää kokonaisuuden. Jokaisella näistä solmuista voi olla role-, aria-label-, aria-labelledby-, aria-describedby- ja tabindex-attribuutit. Ruudunlukuohjelma näkee nimettyjen alueiden saavutettavuuspuun yhden läpinäkymättömän möykyn sijaan.

Vähimmäistasolla saavutettava SVG sisältää kolme asiaa juuri-svg-elementissään: role=“img”, aria-labelledby joka osoittaa title-lapseen, ja aria-describedby joka osoittaa desc-lapseen tai ulkoiseen kappaleeseen tunnuksen perusteella. Jokainen on pieni. Jokainen tekee työtä, jota kaksi muuta eivät pysty tekemään.

Yksi tärkeä varoitus: role=“img” juuri-svg-elementissä muuttaa avustavien teknologioiden toimintaa lapsielementtien suhteen. role=“img”:n kanssa NVDA ja JAWS käsittelevät koko SVG:tä yksittäisenä merkittynä kuvana eivätkä paljasta sisempiä solmuja — vaikka niillä olisi tabindex. Molempien toimintojen saamiseksi — yhteenvetomerkintä ylhäällä ja osoitettavissa olevat lapset sisällä — juurirooli jätetään asettamatta (tai asetetaan role=“graphics-document” W3C Graphics ARIA -moduulista) ja merkintä laitetaan lapsi-g-elementtiin juuren sijaan. Selaimet ja ruudunlukuohjelmat käsittelevät tätä yhdistelmää epätasaisesti. Osion 6 matriisi dokumentoi, mikä toimii missäkin.

longdesc-attribuutti oli alkuperäinen vastaus kysymykseen “alt-attribuutti ei riitä.” Selaimet ovat hiljalleen poistaneet sen tuesta; Firefox poisti sen versiossa 90, Safari ei koskaan toteuttanut sitä, Chrome käsittelee sen toimettomana. Kuka tahansa, joka kirjoittaa longdesc=“benzene-desc.html” vuonna 2026, toimittaa merkintää, jota mikään ei lue. Korvaaja ei ole yksittäinen attribuutti vaan kolmikerroksinen malli, joka yhdistää inline-kuvauksen, näkyvän laajennettavan paneelin ja konekielisen metatiedon.

Ensimmäinen kerros on SVG:n sisäinen desc-elementti. Kaksi neljä lausetta. Ruudunlukuohjelmat lukevat sen SVG-juuren julkistamisen yhteydessä. Tämä on uusi longdesc — kuvaus, joka on osa SVG-dokumenttia ja kulkee sen mukana kaikkialle.

Toinen kerros on näkyvä laajennettava kuvauspaneeli kaavion vieressä, kaikkien lukijoiden käytettävissä, ei vain ruudunlukuohjelman käyttäjien. Yhteenvetorivi ja paljastuspainike, joka avaa pidemmän tekstipohjaisen läpikäynnin — yleensä kolmesta kymmeneen lausetta kemianmolekyylille, enemmän solurakennekaaviolle, jossa on kaksikymmentä nimettyjä organelleja. Näkyvä paneeli ratkaisee ongelman, johon inline-desc ei pysty: opiskelijat, jotka näkevät kaavion mutta eivät pysty tulkitsemaan sitä (heikkonäköiset, dysklektiset opiskelijat, kaikki, jotka opettelevat asiaa ensimmäistä kertaa), tarvitsevat myös pitkän kuvauksen. Sen laittaminen painikkeen taakse ei piilota sitä ruudunlukuohjelmilta — ne luetteloivat paljastuksen, käyttäjä aktivoi sen, ja kuvaus luetaan puskuriin.

Kolmas kerros on strukturoitu metatietona JSON-LD:n avulla. CreativeWork-objekti, jonka accessibilityFeature-taulukko luettelee kaavion tarjoamat ominaisuudet: longDescription, alternativeText, structuralNavigation, describedMath, tactileGraphic (jos tulostettava taktiilikuva on saatavilla). Hakukoneet, sisältösuositteluohjelmat ja saavutettavuusvaatimustenmukaisuusskannerit kaikki käyttävät tätä metatietoa. Se ei tee mitään välittömälle ruudunlukuohjelman lukukokemukselle, mutta tekee kaaviosta löydettävissä olevan saavutettavana sisältönä — mikä on tärkeää, kun oppija valitsee kolmen oppikirjan väliltä ja yksi niistä mainostaa saavutettavuusominaisuuksiaan konekielisessä muodossa.

Staattiset kaaviot ovat helppo tapaus. Vaikea tapaus on animoitu kaavio — mitokondrion 3D-pyöriminen, x-akselin poikki piirrettävä siniaaltokäyrä, kemiallinen reaktio, jossa sidokset katkeavat ja muodostuvat uudelleen neljässä sekunnissa. Tavanomainen vastaus on videotiedosto äänellisineen kuvaustrackineen, mutta se hylkää SVG:n osoitettavuuden: heti kun animaatio paistetaan videoksi, jokainen huolellisesti merkitty solmu lakkaa olemasta DOM-solmu ja muuttuu jälleen pikseliksi.

Saavutettava vaihtoehto on pitää animaatio SVG:nä (tai Canvasina offscreen-saavutettavuuspuulla) ja lähettää kuvailutulkkauksia animaation edetessä, ohjattuna samoilla DOM-mutaatioilla, jotka ohjaavat visuaalista muutosta. Malli: MutationObserver tarkkailee SVG:tä muutosten varalta — uusi transform-attribuutti, ilmestyvä sidos, kiertyvä vektori — ja jokaisen merkittävän muutoksen kohdalla kirjoittaa lyhyen tekstipäivityksen globaaliin aria-live=“polite” -alueeseen. Visuaalinen animaatio ohjaa ääninarraatiota, joka generoidaan lennosta samasta totuuden lähteestä.

Toteutuksessa on kolme liikkuvaa osaa. Ensimmäinen on itse animaatio, ilmaistuna aikataulun avainruutujen sarjana — sama data, jota SVG-renderöijä käyttää. Toinen on annotaatiokerros: jokaisessa avainruudussa on lyhyt teksti, joka kuvaa, mitä kyseisellä hetkellä muuttuu (“sidos muodostuu C1:n ja C2:n välille”, “aalto ylittää nollan alapuolelta”). Kolmas on kuvailutulkkauksen ajuri, joka tilaa aikataulun, poimii jokaisen annotoidun avainruudun ja kirjoittaa sen tekstin live-alueelle muutamia satoja millisekunteja ennen kuin visuaalinen muutos tapahtuu. Etuaika vastaa sitä, mitä tuotantokuvailutulkkaus tekee elokuvassa: kuvaus kuullaan juuri ennen visuaalista tapahtumaa, ei sen jälkeen.

Kolme vikamuotoa on riittävän yleisiä, että ne kannattaa mainita. Ensiksi pursupäivitykset. Animaatio, joka laukaisee 60 mutaatiota sekunnissa, hukuttaa ruudunlukuohjelman syntetisaattorin — ilmoitukset jonottuvat, jättävät jälkeen animaation ja muuttuvat käsittämättömiksi. Annotoi vain semanttisesti merkittävät avainruudut, ei jokainen ruutu, ja rajoita noin yhteen ilmoitukseen 1500 ms:ssa. Toiseksi käynnistymisen puuttuminen. Live-alue, jota ei ollut olemassa ennen animaation alkamista, ei ilmoita ensimmäistä päivitystään luotettavasti (katso aria-live-kehykseen liittyvä artikkeli taustalla olevasta ajastinongelmasta). Kiinnitä live-alue tyhjänä sivun latautuessa. Kolmanneksi ei taukopainiketta. Käyttäjien on pystyttävä keskeyttämään kuvailutulkkaus, hidastamaan sitä tai etenemään se yksi tapahtuma kerrallaan. Rakenna pieni hallintapalkki — toista, keskeytä, edellinen tapahtuma, seuraava tapahtuma — ja kytke sen painikkeet samaan aikatauluajuriin.

Matemaattinen funktiokuvaaja, jota näkevä opiskelija voi selata kursorilla, ei ole saavutettava ennen kuin ei-näkevä opiskelija voi selata sitä näppäimistöllä. Mekanismi on hyvin tunnettu ja huonosti toteutettu käytännössä: jokaisella käyrän merkittävällä datapisteellä on tabindex=“0”, sen koordinaatit ja kaikki nimetyt piirteet kuvaava aria-label (“paikallinen maksimi kohdassa x = -1, y = 4”) sekä näppäimistönkäsittelijä, joka reagoi nuolinäppäimiin vierekkäisten pisteiden väliseen tarkkaan liikkumiseen.

Oikea rakeisuus on tärkeämpää kuin ihmiset tajuavat. Välilehtikulku jokaisen kolmannen asteen käyrän pikselin läpi on vihamielistä — käyttäjä kuulee tuhansia “x on 0,1, y on 0,001” -ilmoituksia ennen kuin saavuttaa mitään mielenkiintoista. Välilehtikulku vain nimettyjen piirteiden läpi (paikalliset maksimit, minimit, taitepisteet, x-leikkauspisteet, y-leikkauspisteet) on liian harvarakenteista. Pragmaattinen kompromissi: kaksi navigointitasoa. Tab-näppäin kiertää vain nimettyjen piirteiden läpi — yleensä kolmesta seitsemään käyrällä — ja nuolinäppäimet, kun piirre on kohdistettu, etenevät vasemmalle ja oikealle käyrää pitkin oppijan määrittelemän askeleen suuruisina, ilmoittaen koordinaatin jokaisella askeleella. Home ja End hyppäävät käyrän vasemmalle ja oikealle rajalle. Page Up ja Page Down hyppäävät seuraavaan nimettyyn piirteeseen.

Monirivistä kaaviota varten — kemiankineettiikan kuvaaja, fysiikan oskillaatiokaavio kahdella aaltomuodolla — lisätään sarjojen välinen vaihtoakseli. Ylös- ja alas-nuolinäppäimet vaihtavat sarjoja nykyisessä x-koordinaatissa; vasen ja oikea siirtyvät nykyistä sarjaa pitkin. Käytäntö rinnastaa taulukkolukulaitteiden tapaan navigoida rivejä ja sarakkeita ja hyödyntää mentaalimallia, joka monilla käyttäjillä jo on.

Yksi yksityiskohta, joka jää usein huomaamatta: kohdistetulla datapisteellä on oltava näkyvä kohdistusindikaattori. Ei-näkevä käyttäjä ei tarvitse sitä, mutta näkevä ruudunlukuohjelman käyttäjä tarvitsee, samoin kuin opiskelijan olkapään yli katsovat ohjaavat opettajat. Renderöi kohdistusrengas kohdistetun SVG-elementin ympärille :focus-visible -tyylityksellä — sama käytäntö kuin painikkeiden kohdistusrenkaissa, sovellettuna SVG-solmuihin, joita selain ei oletuksena tyylitä.

Tämän artikkelin kovin totuus: saavutettavan SVG:n pino ei toimi samalla tavalla eri selainten ja ruudunlukuohjelmien välillä, eivätkä aukot ole virheitä merkinnässäsi. NVDA Firefoxilla on luotettavin yhdistelmä — ainoa, jossa kaikki tämän artikkelin mallit toimivat niin kuin W3C:n SVG-saavutettavuusmappaus sanoo niiden toimivan. Jokaisessa muussa yhdistelmässä on vähintään yksi tunnettu aukko.

Safari macOS:llä VoiceOverin kanssa on suurimmista pinoista ongelmallisin. WebKitin SVG-saavutettavuuspuussa on dokumentoituja aukkoja tavassa, jolla se paljastaa sisäiset g-elementit ARIA-merkinnöillä: merkinnät ovat läsnä DOM:ssa ja tarkasteltavissa saavutettavuustarkastimella, mutta VoiceOver ei aina poimi niitä käyttäjän navigoidessa VO-oikeanpuoleisella nuolella. Käyttäytyminen on epäjohdonmukaista — joskus sisäiset merkinnät ilmoitetaan, joskus vain SVG-juuren merkintä luetaan ilman asiakkaalla näkyvää mallia. WebKitin bugsillaan on avoimia ongelmia tästä vuodesta 2020 lähtien. Käytännön johtopäätös: jos STEM-kaavio toimii Macilla, se on välttämätön mutta ei riittävä ehto. Testaa Windowsilla NVDA:lla ennen julkaisua.

Chrome Windowsilla JAWS:in kanssa on toiseksi luotettavin pino — lähellä NVDA + Firefox, yhdellä vivahteella: JAWS käsittelee SVG:n role=“img” aggressiivisemmin kuin NVDA, tiivistäen sisäisiä solmuja useammin. Korjaus on käyttää role=“graphics-document” W3C Graphics ARIA -moduulista juuri-svg:ssä, jonka JAWS käsittelee oikein. NVDA käsittelee sen myös oikein. Firefox ja Chrome molemmat toimittavat tarvittavat alusta-API-mappaukset.

Mobiili on erillinen ongelma. iOS VoiceOver perii WebKitin SVG-aukot; Android TalkBack Chromella käsittelee sisäisiä solmuja luotettavasti mutta ei vielä tue W3C Graphics ARIA -rooleja, joten se palautuu role=“img” -käyttäytymiseen. Oppikirjakustantajalle, joka kohdistaa sekä pöytäkonetta että mobiilia, turvallisin valinta on toimittaa kaksi SVG-tilaa: rakenteellisesti navigoitava tila pöytäkoneelle ja “yhteenveto plus pitkä kuvaus” -tila, joka poistaa käytöstä sisäisen navigoinnin mobiililla. Tilavalitsin ohjataan user agentilla ja käyttäjäasetuksella, joka tallennetaan istuntojen välillä.

Yksi tapa tulkita matriisia: toimita NVDA + Firefox perusvaatimustenmukaisuuden kohteena, dokumentoi Safari- ja TalkBack-varavaihtoehdot, äläkä koskaan käytä sisäisen solmun ilmoituksen puuttumista Macilla todisteena siitä, että SVG on saavuttamaton. Kaavio saattaa olla täysin saavutettava — alusta vain ei paljasta kirjoittamiasi merkintöjä. Safarin kehittäjävalikon saavutettavuustarkastin näyttää, mitä puussa on, vaikka VoiceOver ei lukisi sitä, ja on oikea työkalu “rikkinäinen merkintä” ja “rikkinäinen alusta” erottamiseen toisistaan.

Suurin osa julkaistusta STEM-kaaviosaavutettavuuteen liittyvästä ohjeistuksesta pysähtyy title-ja-desc -kerrokseen. Se on helppo 30 prosenttia. Jäljellä oleva 70 prosenttia — pitkän kuvauksen paneeli, DOM-mutaatioiden ohjaama kuvailutulkkauksen aikajana, kaksikerroksinen näppäimistönavigointi, alustakohtaiset varavaihtoehdot — on vuorovaikutussuunnittelua yhtä lailla kuin merkintää. Ruudunlukuohjelma on yksi käyttäjä; ei-näkevä oppija, joka käyttää ruudunlukuohjelmaa funktiokuvaajan navigoimiseen näkevän luokkatoverin tahdissa, on eri käyttäjä, jolla on eri tarpeet.

Tuotto on suuri ja epätasainen. Oppikirjakustantaja, joka toimittaa täyden pinon noin 600 kaaviossa laskennon oppikirjassa, palvelee jokaista ei-näkevää oppijaa käyttämässä kyseistä oppikirjaa, jokaista heikkonäköistä oppijaa, joka arvostaa paljastuspaneelia, jokaista dyslektistä oppijaa, joka voi lukea pitkän kuvauksen mutta ei pysty tulkitsemaan visuaalista esitystä, jokaista suomi toisena kielenä opiskelevaa oppijaa, joka löytää strukturoidun kuvauksen helpommaksi kuin alan visuaaliset käytännöt, ja jokaista näkevää opettajaa, joka tuottaa ääneen yhteenvetoja podcasteihin. Sama merkintä palvelee viittä eri kohderyhmää. Hinta on muutama tunti kaaviota kohti, amortisoiduna vuosikymmenien opiskelukäytön yli.

Tämänhetkinen taso on epätasainen, koska saavutettavuuspuun toteutukset eroavat niiden käyttöjärjestelmien välillä, joita opiskelijat todella käyttävät. NVDA ja JAWS Windowsilla ovat sulkeneet suurimman osan SVG-aukoista. Safari macOS:llä ei ole. Kunnes alustat lähentyvät, tuotantomalli on kirjoittaa tiukimmalle kohteelle — NVDA + Firefox — ja dokumentoida varavaihtoehdot alustoille, joissa on tunnettuja aukkoja. Se on enemmän työtä kuin alt-attribuuttimalli ennen vaati. Se on myös ainoa tapa toimittaa STEM-oppikirja, joka ei sulje pois lukijoita, joita sen on tarkoitus opettaa.