Tee sivustostasi helppokäyttöisempi laajalle kirjolle kävijöitä esim. näytönlukuohjelmia, suurennuslaseja käyttäville henkilöille jne.
Editori on optimoitu auttamaan käyttöä helpottavia toimintoja käyttäviä käyttäjiä saamaan parhaimman mahdollisen selauskokemuksen. Tämä saavutetaan kolmella toiminnolla:
- ARIA-tunnisteiden (Accessible Rich Internet Applications) lisääminen sivuston koodiin, jotta näkörajoitteiset henkilöt voivat ymmärtää elementtejä, joissa ei ole tekstitunnisteita.
- Siirry suoraan sisältöön -toiminto, jonka avulla näytönlukuohjelmat voivat ohittaa sivuston pääsiirtymisvalikon, jolloin vältetään sen näkyminen kävijöille joka kerta, kun he avaavat uuden sivun.
- Korostus-ääriviiva, joka selkeästi ilmaisee käyttäjille käyttöä helpottavista toiminnoista sivuston aktiivisessa elementissä.
Löydät helppokäyttöisyysvalikon editorista painamalla käyttöliittymän oikeassa yläkulmassa olevaa kolmea pistettä ja valitsemalla Asetukset.
Valitse vasemmalla olevasta valikosta Helppokäyttöisyysasetukset.
ARIA-tunnisteiden käyttöönotto
ARIA-tunnisteet on jo lisätty kaikkiin sivustosi asiaankuuluviin elementteihin, mutta niitä ei ole aktivoitu ja näytönlukijat eivät voi käyttää niitä, ennen kuin olet merkinnyt kohdan Ota ARIA käyttöön.
Sivuston koodissa merkkijono määritetään aria-label -määriteellä, joka merkitsee sivuston elementin. Se lisätään sivuston koodiin tapauksissa, joissa tekstitunniste ei näy elementissä esim. kuvake, kartta tai painike. ARIA-tunnisteet eivät näy sivustolla, mutta näytönlukuohjelmat löytävät ne ja lukevat ne ääneen.
Esimerkki 1: Kartta
Editorin karttamoduulilla yritykset voivat helposti näyttää sijaintinsa kävijöille. Sijainti ilmaistaan visuaalisesti kartassa olevalla nastalla. Toisin sanoen sijaintia ei ilmaista tekstillä, jos nastaa ei paineta. Tämä tarkoittaa, että vaikka näytönlukuohjelmat pystyvät tunnistamaan elementin olevan kartta, ne eivät pysty lukemaan ääneen sen sijaintia. Jos ARIA on käytössä sivustolla, näytönlukuohjelmia kehoitetaan lukemaan ääneen vaihtoehtoinen teksti, joka on asetettu antamaan karttaan merkitty osoite. Se näyttää tältä, kun näytönlukuohjelma on aktiivinen karttaelementin kohdalla:
Jos ARIA ei ole käytössä, näytönlukuohjelma ei anna yhtä hyödyllistä vastausta:
Esimerkki 2: Sosiaalisen median kuvakkeet
Voit lisätä kuvakkeita useisiin paikkoihin sivustollasi esim. sosiaalisen median linkit -moduuliin, josta voit linkittää sivusi Facebookiin, Twitteriin jne. Linkit näytetään kuvakkeina ilman tekstitunnisteita. Kun ARIA on käytössä, näytönlukuohjelmat lukevat ääneen kuvakkeen toimintoa kuvaavan tekstin:
Jos ARIA ei ole käytössä, näytönlukuohjelma ei pysty kuvailemaan kuvakeobjektia:
Esimerkki 3: Digitaalinen käyntikorttimoduuli
Tässä esimerkissä olemme lisänneet sivustoon digitaalisen käyntikorttimoduulin. Moduuli lisää automaattisesti kuvakkeita luokittelemaan käyntikortin tietoja esim. nasta merkitsemään osoitteen, kirjekuoren ilmaisemaan sähköpostin jne. Koska näissä kuvakkeissa ei ole ääneen luettavaa tekstiä, käytetään aria-label -määritettä, joka antaa käyttöä helpottaville toiminnoille tekstiä luettavaksi. Tässä esimerkissä koodissa oleva tunniste on "osoite", joten tämä on sana, jonka näytönlukuohjelma lukee ääneen elementin ollessa aktiivinen.
Jos kohta Ota ARIA käyttöön ei ole merkittynä editorissa, näytönlukuohjelma ei lue mitään elementin ollessa aktiivinen:
Sama logiikka pätee kaikkiin muihin elementteihin, joissa ei ole tekstitunnisteita esim. valintaikkunoiden X-sulkemiskuvake, jolle on annettu aria-label -määrite "Sulje".
"Siirry suoraan sisältöön"-toiminnon käyttöönotto
Kun pelkkää näppäimistöä käyttävät käyttäjät ovat sivustollasi, he siirtyvät sarkaimella elementistä toiseen. Tämän takia joka kerta, kun he avaavat uuden sivun sivustollasi, heidän täytyy käydä läpi pääsiirtymisvalikon (ylätunnisteen) kaikki linkit painamalla sarkainta päästäkseen sivun pääsisältöön. Ottamalla käyttöön asetuksen Siirry suoraan sisältöön kohdasta Asetukset > Helppokäyttöisyysasetukset nämä käyttäjät voivat helposti välttää tämänkaltaisen tilanteen, jolloin heidän selauskokemus on miellyttävämpi.
ARIA täytyy olla käytössä
Huomaa, että Siirry suoraan sisältöön toimii sivustollasi vain, jos olet myös merkinnyt kohdan Ota ARIA käyttöön.
Käytännössä siirry suoraan sisältöön -asetus on toteutettu lisäämällä tabindex -1 -toiminto sivuston siirtymiskoodiin, joka kertoo käyttöä helpottaville toiminnoille ohittamaan kyseisen elementin. Kuten mainittiin aiemmin, tämä ei vaikuta muiden kävijöiden sivuston ulkoasuun.
Minkälainen on käyttäjäkokemus?
Kun näytönlukuohjelmaa käyttävä käyttäjä avaa uuden sivun sivustolla, ilmestyy selainikkunan vasempaan yläkulmaan automaattisesti "Ohita siirtyminen"-elementti. Se on ensimmäinen käytettävä elementti, jonka näytönlukuohjelma lukee ääneen. Jos käyttäjä painaa välilyöntiä hänen ollessa elementin kohdalla, siirtymisvalikko ohitetaan ja seuraava korostettava elementti on sivuston leipätekstin alussa.
Korostuksen käyttöönotto
Korostus on värillinen reunus, joka ilmaisee kohdistetun elementin sivustossa. Näin kävijät tietävät sijaintinsa sivussa sillä hetkellä.
Korostus näkyy kaikille kävijöille
Huomaa, että jos tämä asetus on käytössä, reunojen korostus näkyy kohdistetussa elementissä kaikille sivuston kävijöille, ei vain käyttöä helpottavien toimintojen käyttäjille.