Teorija

Semantika — orientyrai, mygtukai, antraštės

Praėjusioje pamokoje apiforminai puslapį. Dabar nuimk apiforminimą ir pažiūrėk, kas lieka.

Naršyklės įrankiuose trumpam išjunk style.css (Network ar Sources skydelyje, arba tiesiog užkomentuok <link>). Puslapis netenka spalvų ir išdėstymo — bet jeigu jis sudėtas iš tinkamų elementų, jis vis tiek skaitosi kaip dokumentas: antraštė, navigacija, paveikslėlių sąrašas. Puslapis, sudėtas vien iš <div>, virsta nediferencijuota koše. Tas skirtumas ir yra visa šios pamokos esmė.

„Div košė"

<div> nieko nereiškia. Tai tuščia dėžė. Kai kiekviena puslapio dalis yra <div>, naršyklė, ekrano skaitytuvas, paieškos sistema ir tu pats ateityje matote tą patį: dėžes, jokios prasmės.

<!-- div košė: techniškai atsivaizduoja, nieko nereiškia -->
<div class="navbar">…</div>
<div class="main">
  <div class="card">…</div>
</div>

HTML duoda elementų, kurie NEŠA prasmę. Juos ir naudok:

<nav>…</nav>
<main>
  <article class="picture-card">…</article>
</main>

<nav>, <main>, <header>, <section>, <article> yra orientyrai (landmarks). Ekrano skaitytuvo naudotojas gali šokti tiesiai nuo vieno orientyro prie kito; <div> puslapyje šokti nėra į ką. Viename puslapyje yra lygiai vienas <main> — pagrindinis turinys — ir naršyklė tai žino.

Netikras mygtukas

Štai spąstai, į kuriuos pakliūva visi. Kortelės „mėgstamų" valdiklis atrodo kaip mygtukas, tad kyla pagunda jį sudėti iš <div>:

<!-- mygtukas tik iš išvaizdos -->
<div class="fav-btn">♡</div>

Jis gražiai apiforminamas. Bet prie jo negali nueiti Tab klavišu, Enter ir tarpas nieko nedaro, o ekrano skaitytuvas jo niekada nepavadina mygtuku. Kiekvieną iš tų dalykų tektų prisidėti ranka — tabindex, klavišų apdorojimą, role="button" — kad iš naujo išrastum tai, ką vienas elementas jau duoda:

<button class="fav-btn" aria-label="Save to collection">♡</button>

Tikras <button> yra fokusuojamas, veikia klaviatūra ir praneša savo vaidmenį — nemokamai. Būtent tokį ir sudėsi ant kortelės kitame žingsnyje.

Kuris turėtų būti <button>, o kuris nuoroda? „Mėgstamų" jungiklis ir Gallery navigacijoje — pagalvok pirma. — „Mėgstamų" kažką daro šiame puslapyje, tad tai <button>. Gallery kažkur nuveda, tad tai nuoroda, <a>. Nykščio taisyklė: nuveda → <a>, veikia → <button>.

Antraštės yra planas, ne dydžiai

Antraštės aprašo struktūrą. <h1> — viena puslapio antraštė; <h2> — skyrius po ja; <h3> — poskyris po tuo. Jos sudaro planą (outline), tarsi turinį.

Klaida — rinktis antraštę pagal tai, kokia ji didelė atrodo. Nesigriebk <h3>, todėl kad <h2> „per didelis" — pasirink lygį, kurio reikalauja struktūra, o dydį nustatyk CSS. Ir nepraleisk lygių (<h1> iškart į <h3>): ekrano skaitytuvo naudotojas, keliaudamas per antraštes, išgirsta tarpą ten, kur dingo skyrius.

Sąrašai ir „praleidimo" nuoroda

Susijusių elementų rinkinys yra sąrašas — <ul>, kai eiliškumas nesvarbus, <ol>, kai svarbus. Navigacija konceptualiai yra nuorodų sąrašas, ir kai kurios komandos rašo ją kaip <nav><ul><li><a>…. Ši programa apiformina nuorodas kaip paprastą <a> eilę <nav> viduje — irgi teisinga; darbą atlieka <nav> orientyras. Taisyklė tik viena: kai turi sąrašą — naudok sąrašą, niekada nesuklastok jo su <br>.

Galiausiai — „praleidimo" nuoroda (skip link), pats pirmas dalykas, prie kurio klaviatūros naudotojas prieina paspaudęs Tab:

<a href="#main-content" class="skip-link">Skip to main content</a>

Ji nematoma, kol nefokusuota, ir peršoka visą navigaciją tiesiai prie <main>. Be jos kiekvienas apsilankymas klaviatūra prasideda perbėgant per kiekvieną navigacijos nuorodą po vieną. Ją įdėsi kaip pirmą elementą <body> viduje.