Helppokäyttötila ja osallistava design - Kuviot
Lue lisää Hyvin rakennettu hyvinvointi → Lightningin ja Experience Cloudin saavutettavuus
Kuvio
| Mistä etsiä | Miltä hyvä näyttää |
|---|---|
| Sovellusalusta | Suunnittelun standardit | ✅ WCAG 2.2 Level AA on rakennusryhmän vahvistama vähimmäiskäyttötilan pylväs mukautetuille töille (Experience Cloud, LWC, mukautetut teemat) |
| Sovellusalusta | Suunnittelun standardit | ✅ Huomautettava periaate: Kuville ja kuvakkeille on olemassa tekstivaihtoehtoja. Videot liitetään tekstiviesteihin. |
| Sovellusalusta | Suunnittelun standardit | ✅ Toimintaperiaate: Kaikki ominaisuudet ovat käytettävissä vain näppäimistöllä ilman hiirtä tai kosketusnäppäintä — ääniohjaimet ja vaihto-käyttöoikeuden avustavat teknologiat ovat riippuvaisia samasta näppäimistön/keskityksen mallista |
| Sovellusalusta | LWC | ✅ Lightning käytetään suunnitellusti, mikä tarjoaa peruskäyttötilan automaattisesti |
| Sovellusalusta | LWC | ✅ Mukautetut komponentit tarjoavat selkeän käytettävyyden, joka vahvistetaan testaamalla ruudunlukijoita |
| Sovellusalusta | Testisuunnitelmat | ✅ Helppokäyttötestaus sisältyy kaikkiin testausvaiheisiin (ei ad hoc- tai valinnaisiin) |
Anti-Mallit
| Mistä etsiä | Miltä huono näyttää |
|---|---|
| Sovellusalusta | Suunnittelun standardit | ⚡️ WCAG 2.2 -tasoa AA käsitellään valinnaisena tai “hyväksyttävänä” vähimmäisvaatimuksena |
| Sovellusalusta | Suunnittelun standardit | ⚡️ Kuvista ja kuvakkeista puuttuu tekstiä vaihtoehtoisesti, videoista puuttuu tekstitykset |
| Sovellusalusta | Suunnittelun standardit | ⚡️ Toiminto vaatii hiiren tai kosketusnäppäimen vuorovaikutuksen ilman näppäimistön vaihtoehtoja |
| Sovellusalusta | LWC | ⚡️ Mukautetut komponentit on laadittu ilman helppokäyttötoteutusta tai vahvistusta |
| Sovellusalusta | LWC | ⚡️ Mukautetut syöttökomponentit käyttävät div-elementtejä ja CSS-tyylejä ilman semanttista merkitystä tai näppäimistön käytettävyyttä |
| Sovellusalusta | Testisuunnitelmat | ⚡️ Helppokäyttötestaus on ad hoc -testi, valinnainen tai suoritettu vain ennen julkaisua (ei koko kehityksen aikana) |
Kuvio
| Mistä etsiä | Miltä hyvä näyttää |
|---|---|
| Sovellusalusta | LWC | ✅ Semanttisia HTML-elementtejä (ylätunniste, navigointi, päätieto, sivu, alatunniste, artikkeli, osio) käytetään mukautetuissa Lightning |
| Sovellusalusta | LWC | ✅ ARIA-maamerkkejä, rooleja ja ominaisuuksia sovelletaan paikoissa, joissa semanttinen HTML ei voi yksinään välittää käyttöliittymän toimintatapaa |
| Sovellusalusta | LWC | ✅ Dynaamiset sisältöpäivitykset käyttävät aria-live-alueita ilmoittaakseen muutoksista ruudunlukijoiden käyttäjille |
| Sovellusalusta | LWC | ✅ Mukautetuilla interaktiivisilla komponenteilla on selkeät roolien määritelmät, jotka vastaavat heidän toimintatapaansa |
| Sovellusalusta | LWC | ✅ Lomakkeen otsikot liitetään suoraan kaikkiin lomakkeen syötteisiin käyttämällä oikeita otsikkoelementtejä tai aria-labelledby-attribuutteja |
| Sovellusalusta | LWC | ✅ Lightning on määritetty pakollisilla otsikoiden attribuuteilla, jotka tarjoavat sisäänrakennetun otsikoiden liitännän |
| Sovellusalusta | Testisuunnitelmat | ✅ Testaus suoritetaan todellisilla ruudunlukijoilla: JAWS ja NVDA Windowsilla, VoiceOver macOS- ja iOS-laitteilla, TalkBack Androidilla |
| Sovellusalusta | Testisuunnitelmat | ✅ Manuaalinen testaus todellisella apulaitteella suoritetaan ihmisillä, jotka ymmärtävät, miten ruudunlukijoiden käyttäjät navigoivat |
| Sovellusalusta | Suunnittelun standardit | ✅ Paikanpitäjätekstiä ei koskaan käytetä ainoana otsikkona, koska paikanpitäjät katoavat keskityksen yhteydessä ja eivät tarjoa riittävästi kontekstia ruudunlukijoille |
Anti-Mallit
| Mistä etsiä | Miltä huono näyttää |
|---|---|
| Sovellusalusta | LWC | ⚡️ Div-heavy-merkkijonot, jotka sisältöhierarkiasta pakottavat ruudunlukijoiden käyttäjiä navigoimaan lineaarisesti |
| Sovellusalusta | LWC | ⚡️ ARIA:ta ei käytetä paikoissa, joissa semanttinen HTML ei voi yksinään välittää käyttöliittymän toimintatapaa |
| Sovellusalusta | LWC | ⚡️ Dynaamiset sisältöpäivitykset eivät käytä aria-live-alueita, ruudunlukijoiden käyttäjät ohittavat tärkeät muutokset |
| Sovellusalusta | LWC | ⚡️ Mukautetuilla interaktiivisilla komponenteilla ei ole selkeitä roolien määritelmiä; ruudunlukijat ilmoittavat niistä väärin |
| Sovellusalusta | LWC | ⚡️ Lomakkeen syötteet eivät sisällä suoraa otsikkoa; paikanpitäjätekstiä käytetään vain otsikkona |
| Sovellusalusta | Testisuunnitelmat | ⚡️ Automatisoituja helppokäyttötyökaluja käytetään vain, ruudunlukijan testausta ei suoriteta manuaalisesti |
| Sovellusalusta | Testisuunnitelmat | ⚡️ Testaus suoritetaan käyttäjille, jotka eivät ole perehtyneet ruudunlukijoiden käyttäjien todelliseen navigointitapaan |
Kuvio
| Mistä etsiä | Miltä hyvä näyttää |
|---|---|
| Sovellusalusta | Suunnittelun standardit | ✅ Täydet ominaisuudet ovat käytettävissä näppäimistöllä ilman, että sinun täytyisi käyttää hiirtä tai koskettaa toimintoja milloin tahansa käyttäjien matkoilla |
| Sovellusalusta | LWC | ✅ Looginen keskitysjärjestys noudattaa visuaalista asettelua ja vuorovaikutuskulkua |
| Sovellusalusta | LWC | ✅ Kun dynaaminen sisältö latautuu tai modaalit avataan, keskitystä hallitaan ohjelmallisesti ohjatakseen näppäimistön käyttäjiä uuteen sisältöön |
| Sovellusalusta | LWC | ✅ Modaali- ja ponnahdusikkuna-komponentit siirtävät keskityksen modaalin otsikkoon tai ensimmäiseen interaktiiviseen elementtiin avoinna; palauttavat keskityksen käynnistimen painikkeeseen suljettaessa |
| Sovellusalusta | Suunnittelun standardit | ✅ Näkyvät keskitysosoittimet näyttävät selkeästi, millä elementillä on näppäimistön keskitys aina |
| Sovellusalusta | Suunnittelun standardit | ✅ Keskityksen osoittimet täyttävät 3:1- kontrastin vaatimuksen ympäröivään sisältöön nähden |
| Sovellusalusta | LWC | ✅ Käyttäjät voivat siirtyä ja poistua kaikista komponenteista käyttämällä vain näppäimistöä pysähtymättä |
| Sovellusalusta | LWC | ✅ Modaaliset dialogit tallentavat keskityksen modaaliin, kun ne ovat avoinna (estävät piilotetun sisällön käytön), mutta vapauttavat keskityksen suljettaessa |
| Sovellusalusta | Suunnittelun standardit | ✅ Useiden toimintojen näppäimistön pikavalinnat välttyvät ristiriidoilta ruudunlukijan pikavalintojen ja selaimen pikavalintojen kanssa |
| Sovellusalusta | Suunnittelun standardit | ✅ Yksikirjaimiset pikavalinnat aktivoidaan vain, kun tietyt komponentit on keskittynyt (ei globaalisti) välttyäkseen ristiriidoilta ruudunlukijan navigointikomentojen kanssa |
| Sovellusalusta | Dokumentaatio | ✅ Kaikki mukautetut näppäimistön pikavalinnat on dokumentoitu helppokäyttöiseen ohjesisältöön |
| Sovellusalusta | Testisuunnitelmat | ✅ Testausvaiheet sisältävät näppäimistön navigoinnin kaikkien käyttäjämatkojen läpi ilman hiirtä tai kosketusta |
Anti-Mallit
| Mistä etsiä | Miltä huono näyttää |
|---|---|
| Sovellusalusta | Suunnittelun standardit | ⚡️ Ominaisuudet vaativat hiiren tai kosketusnäppäimen toimintaa. Vain näppäimistö -käyttäjät eivät voi suorittaa tärkeimpiä tehtäviä |
| Sovellusalusta | LWC | ⚡️ Keskitysjärjestys ei noudata loogista visuaalista asettelua. Käyttäjät selaavat elementtejä odottamattomassa järjestyksessä |
| Sovellusalusta | LWC | ⚡️ Modalit avautuvat ilman keskityksen hallintaa; näppäimistön käyttäjät ovat jumissa nyt piilotetussa käynnistimen painikkeessa |
| Sovellusalusta | LWC | ⚡️ Modaalin sulkeminen ei palauta keskitystä käynnistimen painikkeeseen. Käyttäjien täytyy etsiä paikkansa sivulla |
| Sovellusalusta | Suunnittelun standardit | ⚡️ Keskityksen osoittimet estetään esteettisistä syistä. Käyttäjät eivät näe, kumpi elementistä on keskitetty |
| Sovellusalusta | Suunnittelun standardit | ⚡️ Tarkennusosoittimilla ei ole riittävää kontrastia (<3:1) |
| Sovellusalusta | LWC | ⚡️ Käyttäjät ovat jumissa käyttöliittymäalueilla, joissa ei ole välttymismekanismia (näppäimistön kaappaukset) |
| Sovellusalusta | LWC | ⚡️ Upotettu sisältö (iframes, kolmansien osapuolten widgetit) tallentaa näppäimistön keskityksen pysyvästi |
| Sovellusalusta | Suunnittelun standardit | ⚡️ Yksikirjaimiset pikavalinnat aktivoivat globaalin ristiriidan ruudunlukijan yksikirjaimisten navigointikomentojen kanssa |
| Sovellusalusta | Dokumentaatio | ⚡️ Mukautetut näppäimistön pikavalinnat ovat asiattomasti dokumentoituja. Käyttäjät eivät löydä niitä |
Kuvio
| Mistä etsiä | Miltä hyvä näyttää |
|---|---|
| Sovellusalusta | Suunnittelun standardit | ✅ Vähintään 4,5:1 kontrastisuhde normaaliin tekstiin, joka on alle 18pt tai 14pt lihavoitu |
| Sovellusalusta | Suunnittelun standardit | ✅ Kontrastisuhde vähintään 3:1 suurelle tekstille ja hyödyllisille käyttöliittymäkomponenteille ja grafiikoille (lomakkeen reunat, infokuvakkeet); puhtaasti koristeelliset ja käytöstä poistetut elementit ovat vapautettuja |
| Sovellusalusta | Experience Cloud | ✅ Mukautetut teemat ja brändätyt Experience Cloud -sivustot sisältävät selkeän kontrastin vahvistuksen käyttämällä selainkehittäjien työkaluja tai automatisoituja tarkistuksia |
| Sovellusalusta | Suunnittelun standardit | ✅ Tekstin koon muuttamista 200 %:iin tuetaan ilman, että sisältö tai toiminnot häviävät (WCAG-vaatimus) |
Anti-Mallit
| Mistä etsiä | Miltä huono näyttää |
|---|---|
| Sovellusalusta | Suunnittelun standardit | ⚡️ Tekstin kontrastisuhteet ovat alle 4,5:1 (normaali teksti) tai 3:1 (suuri teksti ja käyttöliittymäkomponentit) |
| Sovellusalusta | Experience Cloud | ⚡️ Mukautetut teemat otetaan käyttöön ilman kontrastinvahvistusta, heikkonäköiset käyttäjät eivät voi lukea sisältöä |
| Sovellusalusta | Suunnittelun standardit | ⚡️ Tekstin koon muuttaminen yli 200 % rikkoo asettelut, jotka menettävät sisältöä tai toimintoja |
Kuvio
| Mistä etsiä | Miltä hyvä näyttää |
|---|---|
| Sovellusalusta | CI/CD | ✅ Akselin ydin- tai Lighthouse-käytettävyyden skannaus on integroitu CI/CD-putkiin, joka havaitsee rakenteelliset ongelmat jokaisessa käyttöönotossa |
| Sovellusalusta | CI/CD | ✅ Rakennukset epäonnistuvat, kun kriittisiä saavutettavuusongelmia havaitaan |
| Sovellusalusta | Testisuunnitelmat | ✅ Manuaalinen testaus ruudunlukijoilla, näppäimistön navigointi ja selaimen zoomaus 200 %:iin suoritetaan säännöllisesti kehityksen aikana |
| Sovellusalusta | Testisuunnitelmat | ✅ Testaaminen paljastaa vuorovaikutusongelmia, kuten hämmentävän ilmoitusjärjestyksen, keskityksen hallintavirheet ja näppäimistön kaappaukset |
| Sovellusalusta | Yritys | ✅ Käytettävyystestit sisältävät vammaiset käyttäjät koko suunnitteluprosessin ajan |
| Sovellusalusta | Yritys | ✅ Käytettävyystestit paljastavat käytännön esteitä, joita automatisoitu ja manuaalinen ja asiantuntija-testaus eivät näe |
| Sovellusalusta | Testisuunnitelmat | ✅ Automatisoidut testit (~57 % ongelmista määrän mukaan), manuaaliset testit (vuorovaikutusongelmat) ja käyttäjien testit (todelliset esteet) suoritetaan kaikki |
Anti-Mallit
| Mistä etsiä | Miltä huono näyttää |
|---|---|
| Sovellusalusta | CI/CD | ⚡️ Helppokäyttötilan skannausta ei ole integroitu CI/CD-putkiin |
| Sovellusalusta | CI/CD | ⚡️ Rakentaminen jatkuu kriittisistä saavutettavuusongelmista huolimatta |
| Sovellusalusta | Testisuunnitelmat | ⚡️ Manuaalista testausta apulaitteilla ei suoriteta, vaan käytetään vain automatisoitua skannausta |
| Sovellusalusta | Yritys | ⚡️ Käyttöoikeustesteihin ei sisällytetä vammaisia käyttäjiä |
| Sovellusalusta | Testisuunnitelmat | ⚡️ Automatisoitu helppokäyttötarkistus suoritetaan kerran ennen käynnistystä ja helppokäyttötestauksen katsotaan olevan valmis |