Tiedot ja suhteet

Mitä vaaditaan

Kaikki, mitä voi havaita silmäyksellä — että tämä iso lihavoitu teksti on otsikko, että nämä rivit muodostavat datataulukon, että tämä kenttäryhmä on „laskutusosoite“, että tämä tähti tarkoittaa pakollista — on myös löydyttävä taustakoodista. Ruudunlukuohjelmat, ääniohjausohjelmistot ja uudelleenasettamisohjelmat näkevät vain merkinnän. Jos suhde on pelkästään visuaalinen (suurempi fontti, paksumpi reunus, sisennys), avustava teknologia ei havaitse mitään.

Toteutustapa

• Käytä todellisia otsikkoelementtejä (<h1>–<h6>) loogisessa sisäkkäisessä järjestyksessä — ei koskaan tyyliteltyä <div>-elementtiä otsikon jäljittelyyn.
• Merkitse luettelot <ul>-, <ol>- ja <li>-elementeillä — ei rivinvaihdoin tai luettelomerkkimerkeillä erotettuina kappaleina.
• Käytä <table>-elementtiä, jossa on <th scope="col"> / <th scope="row"> datataulukoihin sekä taulukon tarkoitusta kuvaava <caption>.
• Jokainen lomakeohjain tarvitsee ohjelmallisen merkinnän: <label for="...">, aria-labelledby tai aria-label. Paikkamerkki ei ole merkintä.
• Ryhmittele toisiinsa liittyvät lomakekentät <fieldset>-elementin sisälle <legend>-elementillä tai käytä role="group" ja aria-labelledby mukautetuille widgeteille.
• Kuvioille ja kuvateksteille käytä <figure>- ja <figcaption>-elementtejä. Määritelmäpareille käytä <dl> / <dt> / <dd>.
• Ilmaise pakolliset kentät sekä visuaalisesti (tähti) että ohjelmallisesti (aria-required="true" tai required-attribuutti).

Yleisiä puutteita

• <div class="heading-1"> <h1>-elementin sijaan — näyttää oikealta, ilmoitetaan ohjelmallisesti ei minkäänlaiseksi.
• Asettelu taulukoita visuaalisille sarakkeille tai datataulukkoja <div>-ruudukoista ilman <th>-soluja.
• Lomakekentät, joissa on vain paikkamerkkimerkinnät — merkintä katoaa kohdistuksen yhteydessä eivätkä ruudunlukuohjelmat ehkä ilmoita sitä.
• Luettelomerkinnät toteutettu <p>•&nbsp;Kohde</p>-muodossa oikeiden luettelomerkintöjen sijaan.
• Pakolliset kentät merkitty punaisella CSS-tähdellä ilman aria-required- tai required-attribuuttia.
• Visuaalisesti ryhmitellyt valintanapit ilman <fieldset>-/<legend>-elementtiä, jolloin ruudunlukuohjelman käyttäjät kuulevat kelluvia vaihtoehtoja ilman kysymystä.
• Datataulukoita, joissa otsikkorivi on tyylitelty lihavoiduksi mutta käyttää <td>-elementtiä, ei <th>-elementtiä.

Miksi tällä on merkitystä

1.3.1 on useimmin mainittu onnistumiskriteeri WCAG-auditoinneissa 1.1.1:n ja 1.4.3:n jälkeen. Jokaisessa CMS:n luomassa sivussa, markkinoinnin aloitussivussa ja mukautetussa lomakelomakkeessa on taipumus epäonnistua ainakin yhdessä kohdassa. Korjaus on lähes aina semanttinen HTML, ei ARIA — jos päädyt role="heading" käyttämiseen korjataksesi <div>-elementtiä, joka olisi pitänyt olla <h2>, olet jo harhautunut.