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:

  1. ARIA-tunnisteiden (Accessible Rich Internet Applications) lisääminen sivuston koodiin, jotta näkörajoitteiset henkilöt voivat ymmärtää elementtejä, joissa ei ole tekstitunnisteita.
  2. 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.
  3. 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.

Screen_Shot_2018-10-10_at_12.47.28.png


Valitse vasemmalla olevasta valikosta Helppokäyttöisyysasetukset.

Screen_Shot_2020-04-23_at_15.51.30.png

 

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:

1554894164060-map1.png


Jos ARIA ei ole käytössä, näytönlukuohjelma ei anna yhtä hyödyllistä vastausta:

1554894190943-map2.png

 

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:

1554894237130-social1.png


Jos ARIA ei ole käytössä, näytönlukuohjelma ei pysty kuvailemaan kuvakeobjektia:

1554894286759-social2.png

 

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.

1554894384876-dbc1.png


Jos kohta Ota ARIA käyttöön ei ole merkittynä editorissa, näytönlukuohjelma ei lue mitään elementin ollessa aktiivinen:

1554894429885-dbc2.png

 

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.

1554894647515-skipnav1.png

 

 

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ä.

1554894986821-focus1.png 

  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.

Oliko tämä artikkeli hyödyllinen?
0/0 koki tästä olevan apua