Lokalisointi ja saavutettavuus
· Blogi · IT-alan teemat · Eeva-Jonna Panula
Kyselin taannoin Instagramissa toiveita teknisempien postausten aiheista. Yksi toive, jonka sain, oli lokalisoinnin ja saavutettavuuden rajapinnoista, ja mitä olisi hyvä ottaa huomioon kun tehdään monikielistä sivustoa. Tämä onkin mielenkiintoinen aihe!
Ennen kuin sukellamme syvemmälle aiheeseen, haluan sanoa sen verran, että katson tätä aihetta nimenomaan saavutettavuuden näkökulmasta. En ole asiantuntija lokalisoinnissa, enkä myöskään käy läpi kaikkia lokalisointiin liittyviä puolia.
Mitä tämä postaus sitten pitää sisällään? Ensin katsotaan hieman sitä, mitä lokalisointi on, ja sen jälkeen tarkastellaan konkreettisia asioita, joita lokalisoinnissa tulee huomioida saavutettavuuden näkökulmasta. Viimeisenä teemana on yksi erityisesti lokalisoinnin ja saavutettavuuden kannalta erityistapaus – Single Page Application, ja mitä se voi aiheuttaa lokalisoinnin ja saavutettavuuden osalta. Tämä postaus keskittyy pääasiassa web-kehitykseen, mutta moni näistä periaatteista voidaan, ja tuleekin, huomioida mobiilissa.
Mitä on lokalisointi?
Lokalisointi on lyhykäisyydessään esimerkiksi sivuston tai sovelluksen sovittamista eri ympäristöihin. Yleensä tämä tarkoittaa eri maiden ympäristöjä ja kulttuureita. Lokalisoinnin yhteydessä käsitellään esimerkiksi kellonajan ja päivän näyttämistä, valuuttaa, kulttuuria, titteleitä, mittayksiköitä, osoitteita ja monia muita asioita, joiden esittämistapa eroaa eri kulttuureissa ja kielissä.
Lokalisoinnin yksi osa-alue on kääntäminen, ja tässä blogipostauksessa pureudummekin paljolti juuri siihen liittyviin asioihin. Kääntäminen itsessään lisää saavutettavuutta, sillä meidän eri kielten taitotasomme vaihtelee, ja esimerkiksi englanti ei ole jokaiselle helppoa. Näin ollen hyvä käännös voi tuoda sivuston saavutettavammaksi isommalle yleisölle – niin kohdemaassa kuin muuallakin.
Mitä asioita lokalisoinnissa täytyy huomioida?
Saavutettavuus ja lokalisointi kohtaavat erityisesti seuraavissa asioissa. Tämä lista ei ole kaikenkattava, mutta näillä pääsee jo alkuun.
Kieli
Ensimmäinen asia, josta haluan kirjoittaa, on kielen merkitys. Jos käännösten kieli on huonoa tai epäselvää, saattaa se jopa huonontaa sivuston käytettävyyttä ja saavutettavuutta. Näin saattaa erityisesti käydä jos käytetään automatisoituja käännöstyökaluja. Ne koetaan usein halvaksi tavaksi toteuttaa käännöksiä, mutta hyvin harvoin teksti on oikeasti saavutettavaa. Kun puhutaan saavutettavuudesta, kielellä on iso merkitys.
Kuvien tekstivastineet
Kuville tulee kirjoittaa tekstivastineet – paitsi jos kuvat on tarkoitettu koristeellisiksi. Nämä tekstivastineet tulee myös lokalisoida. Koska nämä tekstit eivät näy visuaalisesti, niiden kääntäminen usein unohdetaan. Tämän seurauksena sivut saattavat muuten olla kielellä B, mutta kuvien tekstivastineet ovat kielellä A koska ne unohdettiin kääntää.
Sivujen otsikot
Tarkoitan tässä osioissa sivujen otsikoilla nimenomaan title-attribuutilla määriteltyä otsikkoa, joka näkyy välilehden nimenä, en siis jokaista näkyvää h1/h2/h3 jne. otsikkoa.
Sivujen otsikoiden lokalisointi saattaa joskus unohtua – nekään kun eivät aina ole kovin näkyviä. Toki, riippuen alustasta ja teknologiasta, jolla sivua tehdään, nämä saatetaan muistaa ihan hakukonenäkyvyyden ja jakolinkkien takia, usein kun ne ovat tekstinä yksi ja sama. Mutta ei aina, joten haluan painottaa että sivujen otsikoita ei saa unohtaa kääntää.
Attribuuttien lokalisointi
Samoin kuin kuvien tekstivastineiden kanssa, ei-näkyvien attribuuttien, kuten esimerkiksi aria-label, käännökset usein unohtuvat. Nämä ovat kuitenkin todella tärkeitä tiedonlähteitä avustavia teknologioita käyttäville, ja jos näitä ei käännetä, voi sivuston käyttö olla jopa mahdotonta.
Lang-attribuuttien käyttö
HTML-elementeille määritellään kieli lang-attribuutin avulla. Esimerkiksi ruudunlukijat käyttävät tätä tietoa siihen, että ne päättelevät millä kieltä puhesyntetisaattorin pitää käyttää tekstiä lukiessaan.
Sivun pääkieli tulee määritellä html-tagiin, eli jos sivuston pääkieli on suomi, merkitään seuraavasti:
<html lang=”fi”>
Sivuilla voi kuitenkin olla pieniä pätkiä pääkielestä poikkeavia tekstejä, ja näille tulisi asettaa myös lang-attribuutti, jotta ruudunlukija osaa ääntää kyseiset sanat oikein ja viesti välittyy. Samaista lang-attribuuttia voi käyttää myös esimerkiksi p, span ja a-elementtien kanssa:
<p lang=”en”>
Esimerkissä kappaleen kieli asetetaan englanniksi.
Status-ilmoitukset
Jos sovelluksessa on status-ilmoituksia, tulee myös ne lokalisoida. Status-ilmoitukset ovat erilaisia ilmoituksia tai viestejä, joilla kerrotaan siitä, mitä sivulla tapahtuu. Esimerkiksi ilmoitus siitä, että dataa haettaessa tai tallennettaessa jokin meni pieleen, on tällainen status-ilmoitus.
Todennäköisesti kaikille näkyvät ilmoitukset, kuten virheviestit, on helppo muistaa kääntää, mutta on olemassa myös visuaalisesti näkymättömiä status-ilmoituksia.
Esimerkkinä tällaisesta ilmoituksesta voisi olla vaikkapa verkkokauppa; kun käyttäjä lisää tuotteen ostoskoriin, se usein näkyy visuaalisesti esimerkiksi ostoskorin kuvakkeen muutoksena, ja sen yhteydessä muuttuvana numerona. Jos tätä ei kommunikoida myös sanallisesti, jää tieto esimerkiksi näkövammaiselta ruudunlukijakäyttäjältä saamatta.
Teknisesti tämän voi tehdä monella tapaa, mutta otan esimerkiksi nyt aria-liven. Se on attribuutti, jolla voidaan kertoa asioita niin, että tieto välittyy avustavalle teknologialle, muttei välttämättä näy ruudulla. Jos aria-live kiinnostaa, tässä muutama linkki:
Palatakseni verkkokauppaesimerkkiin, ostoksen lisääminen voidaan kommunikoida esimerkiksi päivittämällä teksti elementtiin, jolla on attribuuttina aria-live. Tämä teksti voisi olla esimerkiksi “Tuote [tuotteen nimi] on lisätty ostoskoriin”.
Sivustoa lokalisoidessa ja käännöksiä lisätessä täytyy myös tällaiset piilotetut tekstit muistaa kääntää. Jos ne unohdetaan, ja käännökset ovat sillisalaatti eri kieliä, huonontaa se luottamusta sivuun – ja pahimmillaan tekee sivustosta käyttökelvottoman.
Single Page Application ja lokalisointi
Single Page Application eli SPA tuo omat haasteensa lokalisointiin. Riippuen tavasta, jolla lokalisointi toteutetaan, kaikki attribuutit eivät välttämättä saa käännöksiään. SPAt ovat dynaamisia sivuja, ja kun päivitykset ovat dynaamisia, selaimen saavutettavuuspuu (accessibility tree) ei välttämättä päivity.
Näin ollen vinkki Single Page Applicationien kanssa toimimiseen on sama, kuin oikeastaan minkä tahansa saavutettavuusasian kanssa: Testaus, testaus ja vielä kerran testaus.
Helpoin tapa tarkistaa, onko jokin ruudulla näkymätön attribuutti kääntynyt, on katsoa selaimen kehittäjän työkaluista, miltä koodi sillä hetkellä näyttää, ja mikä kyseisen attribuutin arvo on. Kun HTML-koodi on tarkistettu, on hyvä katsoa myös kyseisen elementin saavutettavuusominaisuuksia. Nämä löytyvät Chromen kehittäjätyökaluista “Elements” tabin alta, “Accessibility”-osiosta. Lisäksi ruudunlukijalla testaaminen kannattaa.
Lopuksi
Sivustojen ja sovellusten lokalisaatio on tärkeää, ja se on itsessään osa saavutettavuutta. Usein kuitenkin erityisesti näytöllä näkymättömät tekstit (kuten vain ruudunlukijalle tarkoitetut tekstit, erilaiset attribuutit ja muut vastaavat) jäävät käännösprosessissa huomiotta.
Muista siis palvella kaikenlaisia käyttäjiä – ei vain niitä, jotka näkevät, kuulevat, joilla on hyvä hienomotoriikka ja jotka ovat tottuneita tietotekniikan käyttäjiä!
Postauksen pääkuva: Kelly Sikkema // Unsplash
Leave a Reply