Jaksojen otsikot

Mitä vaaditaan

Kun sivu on jaettu jaksoihin, jokaisella jaksolla on oltava ohjelmallinen otsikko. Onnistumiskriteeri ei vaadi, että jokainen sivu olisi jaettu jaksoihin — lyhyet yksitarkoitteiset sivut (kirjautumissivu) ovat riittäviä ilman alaotsikoitakin. Mutta missä jaksoja on, niillä on oltava todellinen <h1>–<h6>-merkintä, jotta avustava teknologia voi rakentaa otsikkorakenteen.

Tämä onnistumiskriteeri on AAA-tasolla, mutta taustalla oleva käytäntö — todellisten otsikoiden käyttö — seuraa myös onnistumiskriteeristä 1.3.1 (Tieto ja suhteet) tasolla A, joten useimmat saavutettavat sivustot täyttävät sen sivutuotteena.

Kuinka vaatimus täytetään

• Käytä <h1>-otsikkoa sivun otsikossa (kerran per sivu) ja siirry hierarkkisesti alaspäin <h2>, <h3>-otsikoiden kautta sisäkkäisissä jaksoissa hyppäämättä tasoja yli.
• Korvaa <div class="heading"> ja tyylitellyt <p>-„otsikot“ todellisilla otsikkoelementeillä.
• Aloita jokainen erillinen jakso pitkän muodon sisällöstä (artikkeli, dokumentaatiosivu, asetuspaneeli välilehdillä) otsikolla.
• Korttikomponenteille, jotka toimivat samankaltaisten jaksojen kokoelmina, anna jokaiselle kortille otsikko asianmukaisella tasolla.
• Validoi otsikkorakenne HTML5-rakennealgoritmilla (axe DevTools, headingsMap-selainlaajennus tai W3C-validaattori).

Yleisiä virheitä

• Lihavoituja kappaleita, jotka naamioituvat otsikoiksi — typografisesti vakuuttavia, mutta näkymättömiä ruudunlukuohjelman otsikkoluettelossa.
• Otsikkotasot, jotka hyppäävät (<h1> hyppää suoraan <h4>-tasolle), koska julkaisujärjestelmän tiimi valitsi tasot fonttikoon perusteella hierarkian sijaan.
• Useita <h1>-elementtejä yhdellä sivulla (hyväksyttävä HTML5-rakenteiden näkökulmasta, mutta rikkoo navigoinnin useimmissa avustavissa teknologioissa).
• Jokainen jakso merkitty <h2>-otsikolla riippumatta sisäkkäistamisen syvyydestä, mikä litistää rakenteen.
• Sankariteksti merkitty <h1>-elementillä, kun sivun varsinainen otsikko sijaitsee sen alla <h2>-elementtinä.

Miksi tämä on tärkeää

Ruudunlukijakäyttäjille otsikkorakenne on sisällysluettelo. JAWS ja NVDA tarjoavat sen valintaikkunassa (Insert+F6 JAWSissa); VoiceOver tarjoaa sen pyörijässä. Sivu, jolla ei ole otsikoita tai jonka otsikot ovat vain visuaalista korostusta varten, pakottaa käyttäjän selaamaan rivi riviltä. Jopa pelkkään AA-tasoon sitoutuneet tiimit hyötyvät jaksojen otsikoiden pitämisestä peruskirjoitussääntönä — se tuottaa lisäarvoa SEO:n, sisällön uudelleenkäytön ja toimittajien työtyytyväisyyden kannalta.