Image
Kolme vierekkäistä kuumailmapalloa. Oikeassa yläkulmassa Punos Mobile -logo. Artikkeli aiheena Android-saavutettavuus.

Android-saavutettavuus – kolme kehittäjän vinkkiä

Punos Mobile, 15/08/2020

Seniorikehittäjänä olen työskennellyt lukuisissa projekteissa ja valitettavasti lähes yhtä monessa ei olla otettu ollenkaan huomioon Android-saavutettavuutta. Kohta on kuitenkin jo usealle organisaatiolle pakko: 23. kesäkuuta 2021 astuu voimaan EU:n saavutettavuusdirektiivi, jonka tarkoituksena on edistää EU:n kansalaisten yhdenvertaisuutta ja siksi se tulee koskemaan kaikkia julkishallinnon mobiilipalveluja. Direktiivi koskee lisäksi myös tiettyjä suuria yksityisiä mobiilipalveluja, kuten pankkeja ja vakuutusyhtiöitä. Käytännössä tämä tarkoittaa, että yllä mainituilla toimialoilla mobiilisovellusten tulee olla käyttäjien saavutettavissa, vaikka heillä olisi motorisia tai aistillisia rajoitteita.

Tässä lyhyessä Android-saavutettavuusartikkelissa annan ensimmäiset vinkit, joilla kehittäjä voi nopeasti parantaa Android-sovellusten saavutettavuutta.

1. Oma ärsykkeeni ja motivaatio kirjoitukselle: puuttuva painikkeen teksti!

Saavutettavuus hyödyttää käyttäjää, oli hänellä haasteita sovellusten / älylaitteiden kanssa tai ei. Löydän jatkuvasti uusissa sovelluksissa ikoneja, joiden käyttötarkoitusta en voi luotettavasti tunnistaa.

Ideaalitilanteessa ikonin pitkä painallus tuo hetkeksi näkyviin tekstielementin, joka kertoo minulle, mitä painalluksesta tapahtuu. Käytännössä kuitenkin usein törmään siihen, että ikoni on pakotettu näkyviin ilman tekstiä. Tällöin voin vain kokeilla onneani siitä, mitä ikonin on tarkoitus tehdä…

Kuvankaappaus esimerkkimobiilisovelluksesta, jonka ikoni kuvaa ympyrää ja sirppiä.
Hmm, viittaako tämä ikoni jotenkin maapalloon ja kuuhun? 🤔

Ratkaisu on onneksi helppo: huolehdi, että menu-elementin sisältämällä item-elementillä on attribuutti android:text ja tällä jokin kuvaava teksti.

Esimerkkikoodia Android-saavutettavuudesta.

Vielä parempi olisi, jos ulkoasun määritelmät antavat periksi ja voit asettaa attribuutin app:showAsAction=”ifRoom|withText”. Muista myös android:titleCondensed-attribuutti, jonka avulla voit saada lyhyemmän kuvauksen näkyviin. Esimerkkinä tälle voisivat toimia tekstit “Valitse” ja “Valitse kaikki” – kumpi on mielestäsi kuvaavampi, jos asia liittyy tekstinkäsittelysovellukseen?

Kuvankaappaus esimerkkimobiilisovelluksesta, jonka ikoni kuvaa ympyrää ja sirppiä. Nyt ikonilla näkyy myös kuvaava teksti, kun sitä painaa riittävän pitkään.
Paljon parempi; pitkään painamalla ikonia teksti ilmestyy näkyviin. Nyt myös ruudunlukijat osaavat kertoa käyttäjälle, mitä ikonia painamalla tapahtuu.

Tämä on kuitenkin vain hyvin pieni pintaraapaisu siihen, mitä hyvällä saavutettavuudella voi saada aikaan sovelluksissa. Pienillä muutoksilla voi olla suuri vaikutus kaikkiin käyttäjiin!

2. Kuvien sisällön kuvaus

Seuraavaksi voitkin käydä läpi sovelluksessasi näytettävät kuvat: onko niille asetettu android:contentDescription-attribuutti? Tämä tuntuu jatkuvasti unohtuvan kehittäjiltä ja onhan tuo saattanut välillä lipsahtaa puutteellisena myös koodikatselmoinneista läpi. ContentDescriptionin avulla ruudunlukijat osaavat kertoa käyttäjälle mitä kuvassa näkyy, pitkälti samaan tapaan kuin webbiohjelmoinnissa kuvien alt-tagi.

Jotkin kuvat voivat toki olla vain puhtaasti koristeellisia ja tällöin voit asettaa sisällön kuvauksen arvoksi @null, jolloin ruudunlukijat tietävät hypätä tämän elementin yli. Huomaa, että vaikka moni ruudunlukijoista tekee näin jo automaattisesti, kannattaa arvo silti asettaa parhaiden käytäntöjen vuoksi.

Käytännön esimerkkinä toimikoon näkymä, jossa on henkilön profiilikuva. Älä tyydy asettamaan XML:ssä kuvaukseksi pelkästään tekstiä tyylillä “Henkilön kuva”, voit toki näitä myös asettaa ohjelmallisesti ja saada näin hieman kuvaavammat tekstit.

imageView.contentDescription = user.fullName + " profiilikuva"

3. Staattinen analysointi lintillä

Yllämainituilla esimerkeillä pääset jo vauhtiin, mutta miten voit varmistaa, ettei jotain ole unohtunut? Manuaalinen testaus ruudunlukijoilla ja erilaisilla navigointivälineillä on aina paikallaan viimeistään ennen julkaisua. Samalla kannattaa myös ottaa käyttöön staattinen analysointi lintillä. Ajamalla ./gradlew lint  saat nopeasti kattavan HTML-raportin sovelluksesi tilasta ja voit alkaa yksitellen poimimaan ongelmakohtia. Voit toki myös asettaa kustomoituja sääntöjä lint-tarkistukseen, jolloin esimerkiksi ohjelmointivaiheessa ohjelmointiympäristösi alkaa motkottamaan puutteista. CI-putkessa nämä voivat estää koodin yhdistämisen koodihaaraan käyttämässäsi versionhallintajärjestelmässä..

Loppusanat Android-saavutettavuudesta

Toivottavasti lukemasi esimerkit auttavat sinua ensiaskeleissa Android-saavutettavuuden parantamiseksi. Esimerkkejä, ohjeita ja käytäntöjä on huomattavasti enemmän kuin yhdessä kirjoituksessa sopii esitellä tai mistä kirjoittaja on edes tietoinen. Kirjoituksella halusin auttaa sinua ymmärtämään, että saavutettavuudesta hyötyvät kaikki ja todellisuudessa se ei juurikaan lisää ohjelmoijan työmäärää.

Kehittäjänä olet vastuussa saavutettavuuden toteutumisesta sovelluksessasi. Näyttääkö saamasi ulkoasun suunnitelma mielestäsi liian monimutkaiselta? Sitä se todennäköisesti silloin on, vaadi saavutettavampi versio tilalle! Puskeeko product owner aikatauluja ja pyytää oikomaan mutkia? Puske takaisin ja tuo sovelluksesi kaikkien saataville!

P.S. Lisää tietoa mobiilisaavutettavuudesta löydät sivustoltamme mobiilisaavutettavuus.fi.