Kuinka kuvailla monimutkaisia ​​malleja vammaisille

Olet kehittäjä, jolle on juuri annettu monimutkainen suunnittelu. Tiedät, että mallit tukevat saavutettavuutta, koska UX-ryhmäsi lukee muutama kuukausi sitten Medium-viestin esteettömästä suunnittelusta. Nyt sinun on rakennettava saavutettava kokemus, mutta mistä aloitat?

Siellä on WCAG 2.0, jota arvostetaan laajalti "totuudeksi", koska se liittyy kansainvälisiin saavutettavuusstandardeihin. Siellä on myös WAI-ARIA -määritys, joka on tärkeä osa kaikkeen esteettömyyskeskeiseen kehittäjän työkalupakkiin. Ajassa taaksepäin on olemassa Yhdysvaltain liittohallituksen standardi, kuntoutuslain 508 §.

Vaikka jaksossa 508 olevia teknisiä saavutettavuusstandardeja ei tiedetä kestävästä merkityksestä, ne sisältävät yhden erittäin viisaan ehdotuksen. Siinä todetaan, että

"... avustavan tekniikan on oltava riittävästi tietoja käyttöliittymäelementistä, mukaan lukien elementin identiteetti, toiminta ja tila."

Alun perin ohjelmistoille kirjoitetut sanat ovat entistä merkityksellisempiä nykyään, kun otetaan huomioon verkkopohjaiset sovellukset. Ne kuvaavat, minkä tyyppisiä tietoja vammaiset käyttäjät tarvitsevat tehtävän suorittamiseen onnistuneesti. Tämä voi olla sokea käyttäjä, jolla on näytönlukija, äänitulon käyttäjä, jolla on fyysinen vamma, tai mikä tahansa määrä muun tyyppisiä käyttäjiä, joilla on monenlaisia ​​avustekniikoita.

Perusperiaatteet minkä tahansa vuorovaikutuksen saavuttamiseksi sekä näppäimistön että näytönlukijan käyttäjien kannalta on kolme perustietoa: identiteetti, toiminta ja tila.

Käyttäjien, jotka ovat vuorovaikutuksessa elementin kanssa, joka on perustana valintaruudussa tai yhtä monimutkainen kuin vedä ja pudota -kokemus, on harkittava näitä kolmea kysymystä:

  1. Identiteetti: Mihin olen vuorovaikutuksessa?
  2. Käyttö: Kuinka käyttää tätä asiaa?
  3. Tila: Mikä on tämän asian nykyinen tila?

Tarkempi valintaruutu

Näkevälle käyttäjälle annetaan monia visioita, jotka liittyvät identiteettiin, toimintaan ja tilaan. Katsotaanpa esimerkkiä yksinkertaisesta valintaruudusta.

Valintaruutu, jossa merkintä

Kun näen ruudun sanojen ”Hyväksyn nämä ehdot ja ehdot” vieressä, olen tunnistanut valintaruudun.

Sama valintaruutu hiirellä, joka on valmis napsauttamaan.

Osaan käyttää valintaruutua napsauttamalla ruutua. Jos näin tehdään, se voidaan muuttaa valittuna valittuna.

Valittu valintaruutu merkinnällä

Jos näen valintamerkin neliön sisällä, tiedän, että sen tila on ”valittu”.

Kuinka sokea käyttäjä saa nämä tiedot?

”Hyväksyn nämä ehdot. Valintaruutu, valitsematta. Paina välilyöntiä tarkistaaksesi. ”

Jos näytönlukija lukee tämän sokealle käyttäjälle, heille annetaan kolme tärkeää tietoa.

  1. Objektin tunnistetiedot: valintaruutu ilmoittamaan, olenko samaa mieltä
  2. Tila: ei ole valittu
  3. Toimenpide: välilyönnin painaminen vaihtaa tilan

Tarkastellaan tätä silmällä pitäen kolmea menetelmää, mieluiten suosituimmista, ainakin edullisimmista identiteetin, toiminnan ja tilan tarjoamiseksi avustavalle tekniikalle: natiiviohjainten käyttäminen, ARIA: n käyttö ja viimeisenä keinona älykäs piilotetun tekstin ja live-alueiden kanssa.

Alkuperäinen valvonta

Alkuperäiset säätimet, kuten lomakesäätimet ja painikkeet, ovat aina paras vaihtoehto. Yllä olevassa esimerkissä todellinen valintaruutu on ihanteellinen, koska se tekee kaiken työn puolestasi. Sinun ei tarvitse luoda operaatiota JavaScriptin avulla, valintaruutu tunnistaa jo itsensä ja sen tilan, ja lisäksi ihmiset tietävät kuinka niitä käytetään.

Jos haluat monimutkaisempia vuorovaikutuksia, kuten vedä ja pudota, harkitse, voidaanko natiivia elementtiä käyttää kulissien takana. Harkitse taulukon sarakkeiden leveyden muuttamista:

Vedä ja pudota muuttaaksesi sarakkeen leveyttä

Liukusäädin tai etäisyyden sisääntulo on täydellinen alkuperäinen vastaavuus tälle käyttäytymiselle ja se tarjoaa oman identiteettinsä, toiminnon ja tilan.

Alueen liukusäädin

Tämä voidaan piilottaa visuaalisesti CSS: llä, vaikka se olisi silti käytettävissä näytönlukijakäyttäjille. Synkronoi sen arvo sarakkeen leveyteen ja sokea käyttäjä saa vuorovaikutuksessa tutun lomakkeenhallinnan kanssa. Näkevä käyttäjä vetää ja pudottaa edelleen odotetusti.

WAI-ARIA

Paikoissa, joissa natiiviohjaimen käyttäminen ei ole mahdollista, noudata ARIA: n (Accessible Rich Internet Applications) parhaita käytäntöjä yleisille suunnittelumalleille, kuten valikot, valintaikkunat ja automaattiset täydennykset.

Nämä ohjeet on kirjoitettu siten, että käyttöliittymämallit, joita ei ole saatavana alkuperäisenä HTML-muodossa, tunnistavat silti itsensä apuvälineiden käyttäjille.

Otetaan esimerkiksi vakiovalintaelementti:

Perusvalintaelementti.

Tämä on luonnollisesti saatavissa oleva elementti. Se on täydellinen käytettäväksi lomakkeissa, valittaessa vaihtoehto luettelosta. Ne voivat jopa tuplata valikoina. Valitettavasti ne ovat ”ruma” monien suunnittelutiimien silmissä, ja niitä on erittäin vaikea muotoilla ja pitää johdonmukaisina selaimissa. Tämän vuoksi niiden käyttö hylätään laajasti nykyaikaisissa web-sovelluksissa. Sen sijaan ihmiset luovat omat avattavat valikot.

Valikko rakennettu ARIA: n kanssa

Jos rakennat oman interaktiivisen käyttöliittymän tyhjästä, on erittäin tärkeää käyttää asianmukaista merkintää, antaa asianmukaiset näppäimistökäyttäytymiset ja sisällyttää sekä päivittää ARIA-määritteet. Tämä on ainoa tapa tarjota asianmukainen identiteetti, toiminta ja tila avustavan tekniikan käyttäjille.

Live-alueet ja piilotettu teksti

Jos rakennettavalle elementille ei ole vastaavaa alkuperäistä elementtiä eikä ARIA-ohjeita ole, sinun on annettava tieto tarkoituksellisesti tietoja yhdistelmällä tekniikoita.

  • , joka on visuaalisesti piilotettu CSS: llä, mutta näytönlukijakäyttäjien silti luettavissa
  • "Aria-live" -alue
  • JavaScript-menetelmä tämän alueen tekstisisällön päivittämiseksi

Kun teksti lisätään elävään alueeseen, se sijoitetaan suoraan näytönlukijajonoon ja puhutaan käyttäjille. Piilottamalla tämän alueen visuaalisesti luomme menetelmän kommunikoida suoraan näytönlukijakäyttäjien kanssa.

Jos rakennat monimutkaista käyttöliittymää, kuten lajiteltavaa luetteloa, joka käyttää vetämistä ja pudottamista, nämä menetelmät ovat pakollisia.

Järjestä luettelo vetämällä ja pudottamalla.

Tunnistaa vetäminen ja liittäminen käyttämällä arian kuvaamia ohjeita liittääksesi piilotetun tekstin jokaiseen luettelon kohtaan, jossa lukee ”Paina välilyöntinäppäintä tarttuaksesi tähän esineeseen.” Tämä antaa henkilöllisyyden. Kun käyttäjät tarttuvat esineeseen, suorita toiminta ja tila asettamalla teksti aktiiviselle alueelle:

“{Tuotteen nimi} tarttui, käytä nuolinäppäimiä järjestääksesi, välilyönti pudottaaksesi. Escape peruuttaaksesi. Nykyinen sijainti luettelossa, 1/7 ”.

Voit antaa lopullisen tilan myös kohteen pudottamisen jälkeen:

”{Tuotteen nimi} putosi. Lopullinen sijainti luettelossa, 4/7 ”.

Toistettava, että tätä menetelmää tulisi käyttää vasta sen jälkeen, kun natiivit elementit on suljettu pois ja ARIA: n määrittelemiä komponentteja ei joko ole olemassa tai ne eivät toimi. Kun tarjoat henkilöllisyyden, toiminnan ja tilan yksin, käyttäjän testaaminen on tarpeen, jotta voidaan selvittää paras tapa välittää nämä tiedot käyttäjillesi.

Ota nyt ne helposti saavutettavat mallit ja luo kokemus, josta voi nauttia kaikille käyttäjille, myös vammaisille. Näiden menetelmien avulla pystyt tarjoamaan identiteettiä, toimintaa ja tilaa koskevia tietoja kaikille käyttäjillesi riippumatta siitä, kuinka yksinkertainen tai monimutkainen vuorovaikutus on.

Jesse on Salesforcen tärkein saavutettavuusasiantuntija. Lähetä hänelle twiitti @jessehausler, hänen puhelimensa on yksinäinen.

Seuraa meitä @SalesforceUX.
Haluatko työskennellä kanssamme? Ota yhteyttä uxcareers@salesforce.com
Tutustu Salesforce Lightning -suunnittelujärjestelmään