Nguyen Nguyen, 24/11/2020
Navigation landmark? Main landmark? Tekstin ja kuvien lisäksi verkkosivuilla on kosolti muuta sisältöä auttamassa käyttäjää sivuston selaamisessa. Esimerkiksi perinteiset ja luotettavat navigaatio-alueet kertovat käyttäjälle millä sivuston osa-alueella he liikkuvat. Katsotaanpa tarkemmin saatavilla olevia navigaatio-alueita saavutettavan sivuston rakentamiseksi.
Landmark-alueet
Määritelmällisesti tarkoittaa:
“A type of region on a page to which the user may want quick access. Content in such a region is different from that of other regions on the page and relevant to a specific user purpose, such as navigating, searching, perusing the primary content, etc.”
Käytännössä landmark on verkkosivustolla alue jolle käyttäjä saattaa haluta pääsyn mahdollisimman nopeasti. Tälle alueelle tulisi mahdollistaa pääsy myös käyttäen saavutettavuus ominaisuuksia, kuten vaikkapa ruudunlukijaa hyödyntäen. Web Accessibility Initiativen luoma ARIA-ohjeistus (Accessible Rich Internet Applications suite) määrittelee useita rooleja tähän, kuten role=”navigation”, jotka puolestaan määrittelevät miten saavutettavuusteknologiat tulkitsevat ja käyttävät tietyn roolin alueita sivuilla.
Main landmark
Main landmark ilmaistaan joko role=”main” attribuutilla tai <main>-elementillä. Yhdellä sivulla täytyy olla vain yksi main landmark. Sivusta riippuen main landmark voi sisältää joitain näistä:
- Yhden sivun applikaatiolle <main>-elementin pitäisi olla siellä, mistä sisältö renderöidään.
- Staattisille verkkosivuille informaatiosisällön pitäisi olla <main>-elementin sisällä.
- Tuotesivulla <main>:in pitäisi sisältää kuvaus tuotteesta.
Ruudunlukijoilla, kuten JAWS:illa, on näppäinkomento, jolla voi suoraan hypätä <main>:iin, hypäten suoraan olennaiseen sisältöön.
Navigation landmark
Navigation landmark parantaa sivulta sivulle siirtymistä tehden sivustosta käytännöllisemmän ja nopeamman selata. Se ilmaistaan kirjoittamalla koodiin joko role=”navigation” tai <nav>-elementillä. Navigation landmark eroaa main landmarkista siten, että navigation landmarkkeja voi olla useampia yhdellä sivulla. Lisäksi navigation landmarkin sisällön pitäisi olla sama eri sivujen välillä. Käyttäjälle tulisi varmistaa pääsy myös navigation landmarkiin kaikilta sivuston alueilta. Esimerkiksi NVDA-ruudunlukijat käyttävät D-näppäintä siirtymiseen sivun seuraavaan navigation landmarkkiin.
Rakenne
Landmark-alueiden pitäisi oletusarvoisesti koostua järjestämättömästä listasta linkkejä. Näiden pitäisi osoittaa eri sivuille sivuston sisällä, kun tarkoitus on tuottaa navigaatio koko sivustolle.
<nav>
<ul>
<li><a href="/">Etusivu</a></li>
<li><a href="/services">Palvelut</a></li>
<li><a href="/team">Tiimi</a></li>
<li><a href="/blog">Blogi</a></li>
<li><a href="/cases">Asiakkaat</a></li>
<li><a href="/contact">Ota yhteyttä</a></li>
</ul>
</nav>
Tällä rakenteella voidaan säilyttää keskeiset ja käytännön asettamat HTML4:n ja XHTML:n navigaatio mallit. Tämä takaa taaksepäin yhteensopivuuden. Toiseksi, linkkien sisällyttäminen listaan kertoo että linkeillä on yhteinen tarkoitus toimia navigoimisessa. Lisäksi, jos CSS:n lataaminen epäonnistuu, alue näyttää silti tutulta ja kertoo että kyseessä on linkki, sillä onhan teksti sinistä ja alleviivattua.
Wikipedian ja SmashMagazinen mukaan vastaavaa rajanvetoa kutsutaan myös termillä progressive enhancement. Kyseessä on siis sisällön esittäminen sen mukaan, miten käyttäjä teknisesti selaa sivustoa. Esimerkiksi mitä selainta hän käyttää ja kuinka nopea verkkoyhteys hänellä on.
Eikä unohdeta, että navigation landmarkin käyttäminen tällaisessa rakenteessa antaa paljon hyödyllistä informaatiota ruudunlukijoille. Kun saavutettavuusteknologioita hyödyntävä käyttäjä saapuu sivulle ja fokusoituu ensimmäiseen linkkiin, hän kuulee “navigation landmark”, ja sitten “lista, yksi kuudesta” jonka jälkeen “linkki, koti”. Tämän ansiosta hän tietää olevansa kuudesta linkistä koostuvassa navigaatiossa.
Ulkonäkö ja sijoittelu
Erilaiset kuviot ja kaavat ovat tärkeässä roolissa siinä miten ihmistajunta ottaa vastaan informaatiota. Heydon Pickering kuvailee kirjassaan “Inclusive Design Patterns: Coding Accessibility Into Web Design: “Aivomme käyttävät skeemoiksi kutsuttuja kuvioita ymmärtääkseen annetun tiedon pääpiirteet. Ne pohjautuvat aikaisempiin kokemuksiin, jota vasten nykykokemusta arvioidaan”. Graafisessa suunnittelussa tiettyjen käytäntöjen seuraaminen auttaa käyttäjiä maksimoimaan työmuistinsa ilman pinnistelyjä tietoisessa ajattelussa.
Muista siis aina laittaa navigation landmark jokaisen sivun headeriin ennen <main>:ia, mielellään jopa ennen mitään muuta. Nykypäivän web-suunnittelussa halutaan usein tehdä uusia asioita ja yritetään keksiä pyörää uudestaan näyttämisenhalusta käyttäjiä kohtaan. Jos suunnitelmissasi on tehdä isoja muutoksia, älä unohda että se usein vaatii enemmän aikaa kehitykseen ja riskeeraa vanhaan tottuneiden käyttäjien käyttökokemuksen. Sitäpaitsi sivuston navigaation laittaminen yläreunaan sallii käyttäjien selaamisen sivulta toiselle ilman että heidän tarvitsisi selata sellaista sisältöä, jota he eivät tarvitse.
Lopuksi
Navigaatio-alueet vaikuttavat ehkä simppeleiltä ensisilmäyksellä. Saavutettavuuden näkökulmasta on kuitenkin paljon asioita, joita tulee ottaa huomioon. Seuraavassa osassa käsittelemme navigation landmarkin käytäntöjä ennen siirtymistä toisenlaiseen osaan navigaatiota, eli sisällysluetteloon.