Osoittaminen, kohdennus ja aktiivinen tila

 

Sanoista “hover”, eli osoittimen vieminen elementin päälle ja “focus” eli kohdistaminen keskustellaan laajasti WCAG:ssa,  ja ne ovatkin merkittäviä saavutettavuuden kannalta.

Vuorovaikutteisia verkkoelementtejä on monia: linkit, painikkeet, syöttökentät jne. Vuorovaikutuksessa voi olla minkä tahansa näiden elementtien kanssa seuraavasti:

  • Osoittimen vieminen elementin päälle (hover): viemällä osoittimen elementin päälle, elementti aktivoituu hiiren painalluksesta tai jollakin muulla teknologialla, jota voi käyttää hiiren sijaan, kuten katseen- ja liikkeenseuranta
  • Kohdentaminen: kohdennettua elementtiä voi aktivoida joko näppäimistöllä tai muulla teknologialla, jota käytetään näppäimistön sijaan, kuten erilaiset ohjaimet.
    • Näppäimistöllä tai vastaavalla laitteella voit käyttää Tab-painiketta, kunnes pääset kyseiseen elementtiin. “Tabbaus” voi tarkoittaa yksinkertaisesti Tab-näppäimen painamista tai monimutkaisemman näppäinyhdistelmän painamista selaimesta ja asetuksista riippuen.
    • Jotkut ruudunlukijat siirtävät tarkennuksen tarkennettavaan elementtiin, kun ne lukevat sen. Tarkennus pysyy sitten kyseisessä elementissä, kunnes lukija kohtaa toisen tarkennettavan elementin.
    • Useimmissa selaimissa painikkeen aktivoinnin jälkeen se pysyy tarkennettuna.
  • Aktivointi: elementti on aktiivinen kun se on, no, aktiivinen.
    • Hiirellä tai hiirenkaltaisella työkalulla voit klikata elementtiä kun viet osoittimen elementin päälle.
    • Näppäimistöllä tai näppäimistön kaltaisella työkalulla:
      • Linkit: voit painaa Enter-näppäintä kun elementti on kohdennettuna.
      • Painikkeet, alasvetovalikko ja monet syöttökentät: voit painaa Välilyönti-näppäintä kun elementti on kohdennettuna.

Osoittamisen, kohdistuksen ja aktiivisten tilojen suunnittelu ja kehittäminen

Osoittamisen tyylit (hover-tyylit) auttavat meitä ymmärtämään, että voimme olla vuorovaikutuksessa elementin kanssa. Tämä on erityisen hyödyllistä ihmisille, joilla on oppimisvaikeuksia, kognitiivisia vammoja ​​ja rajoitettuja tietokoneen lukutaitoja.

Tarkennustyylit ovat niin tärkeitä näppäimistöjä ja näppäimistöön verrattavia laitteita, että kaikkien selainten on tarjottava oletusarvoiset tarkennustyylit. Tavanomaisesti käytetäänoutline CSS-ominaisuutta koska se ei vaikuta asetteluun tai liikkuta lähellä olevia elementtejä. Valitettavasti emme voi luottaa pelkästään oletustyyleihin seuraavista syistä:

  • Jotkut selaimen oletusasetukset eivät yksinkertaisesti ole riittävän havaittavia.
  • Suurin osa selaimen oletusasetuksista on suunniteltu erottumaan vaaleista taustoista, eikä niitä pysty havaitsemaan tarpeeksi hyvin tummassa taustassa.

Tässä on joitain vinkkejä lisätarkennustyylien toteuttamiseen:

  • Varmista, että suunnittelet tarkennustyylejä, jotka ovat riittävän havaittavia, etenkin ihmisille, joilla on näkörajoitteita. Kun käyttäjä käy verkkopalvelua Tab-painikkeella läpi, hän ei voi ennustaa, missä seuraava tarkennettava kohde on. Tästä syystä tarkennustyyli on kiinnitettävä heidän huomionsa.
  • Älä muokkaa oletustarkennustyylejä: älä käytä outline: none saadaksesi ne häviämään, äläkä käytä outline ominaisuutta lisäkohdistuksen korostamiseen tai muuhun. Moni ihminen, joka luottaa näkyvään tarkennukseen navigoidessaan sivustolla, on omat mieltymyksensä ja käyttävät outline ominaisuutta ylikirjoittamaan selaimen oletustyylejä. Jos myös sinä käytätoutline ominaisuutta, saatat sekoittaa käyttäjän valintoja tai valinta voi johtaa tahattomiin tuloksiin.
  • Jos sinä tai asiakas ette pidä selaimen oletusarvoisesta tyylien ulkoasusta, voit käyttää :focus-visible polyfill. Se perustuu uuteen CSS-pseudoluokkaan, joka voidaan lisätä seuraavaan CSS-versioon täydentämään osoitusta, kohdistusta ja aktiivisia pseudoluokkia. Kun käytät :focus-visible, selain näyttää tarkennustyyliä vain, jos se toteaa, että sellaista tarvitaan (esimerkiksi jos käyttäjä navigoi näppäimistön avulla).

Aktiiviset tyylit auttavat käyttäjiä ymmärtämään, että he pystyivät aktivoimaan elementin onnistuneesti. Koska aktivointiaika on yleensä melko lyhyt (hiiren napsautuksen tai näppäimen painalluksen ajan), näiden tyylien tulisi olla havaittavissa, mutta huomaamattomia.

Tutustu myös: