1.3.1 Informaatio ja suhteet
Onnistumiskriteerin virallinen kuvaus
Esitystavassa välittyvät informaatio, rakenne ja suhteet voidaan selvittää ohjelmallisesti tai ne ovat saatavilla tekstinä.
Mitä pitää tehdä?
Varmista, että esitystavan välittämät tiedot ja suhteet voidaan määrittää ohjelmallisesti tai että ne ovat saatavilla tekstinä.
Miksi tämä on tärkeää?
Auttaa avustavia teknologioita tulkitsemaan ja esittämään sisällön mielekkäällä tavalla.
Yleisiä sudenkuoppia
Yleisiä puutteita on virheellinen semanttisten HTML-elementtien käyttö. Esimerkiksi käytetään <div> elementtiä <button> tai <a> elementtien sijaan.
ARIA-merkintöjen haasteista osa kuuluu tämän kriteerin alle.
Miten testata?
Tarkasta sisältö otsikoiden käytön osalta:
- Puuttuvat H1-otsikot.
- Virheelliset otsikkotasot jos ne ovat aidosti ongelmalliset (muuten virheelliset otsikkotasot kuuluvat saavutettavuuden parhaisiin käytäntöihin eivätkä aiheuta virhettä tässä kriteerissä).
- Otsikkotagien käyttö sisällössä, joiden ei kuulu olla otsikoita.
Tarkasta valikoista onko visuaalisen aktiivisen polun indikaattorin lisäksi käytetty aria-current attribuuttia. Jos ei, se on virhe. Jos visuaalista indikaattoria ei ole käytetty ilmaisemaan aktiivista valikkoelementtiä, tällöin myöskään ARIAa ei tarvita.
Automaattiset työkalut löytävät melko hyvin puutteita tähän kriteeriin.
Liittyvä kriteeri: 4.1.2.
Miten huomioida tämä kriteeri suunnittelutyössä?
Varmista, että suunnittelet kullekin sivulle loogisen otsikkorakenteen. Jos sisällöntuottajan täytyy lisätä sivulle tietyt elementit otsikkorakenteen muodostamiseksi, se pitää kertoa sisällöntuottajille.
Muista, että otsikko ei ole visuaalinen korostuskeino. Eli jos teksti ei ole otsikko, älä merkitse sitä sellaiseksi. Visuaalisen näyttävämmän tyylin voi lisätä tavalliselle tekstille käyttämällä CSS-tyylejä. Muista, että layout toimii koodarille toimintaohjeena. Eli varmista, että käytät oikeanlaisia merkintöjä eri elementeille.
Miten huomioida tämä kriteeri kehitystyössä?
Jos teet valikon, jossa on visuaalisesti näkyvä aktiivisena olevan polun tyyli, lisää silloin myös aria-current.
Varmista, että otsikkorakenne etenee koodissa loogisesti ja, että sisällöntuottaja voi lisätä sisällössä otsikkotasot oikein.
Jos sivun layout vaatii tiettyjen elementtien käyttöä tietyssä järjestyksessä loogisen otsikkorakenteen saavuttamiseksi, lisää tästä ohje sisällöntuottajalle. Muuten he eivät osaa lisätä oikeita elementtejä eivätkä siten saa sivusta saavutettavaa.
Jos pöydällesi päätyy layout, jossa on epäloogisia otsikkorakenteita tai väärinkäytettyjä otsikoita, älä toteuta näitä, vaan kerro näistä puutteista suunnittelijalle ja pyydä häntä korjaamaan ongelmat.