Oikean fontin ja sen esitystavan valinta: A Key to ADA Accessible Websites

Web on julkinen paikka, jossa kaikilla on yhtäläinen oikeus osallistua, käyttää, esittää ja hakea tietoa vammasta huolimatta. Amerikkalaisten vammaislaki (ADA, Americans with Disability Act) hyväksyttiin vammaisten henkilöiden yhtäläisten mahdollisuuksien varmistamiseksi. Vaikka internet oli tuolloin vielä lapsenkengissään, todellisuus on nyt, että se koskee kaikkia virtuaalisia paikkoja, myös digitaalisia palveluja ja verkkosisältöä.

Toteuttaakseen oikeudelliset ja moraaliset velvoitteensa kaikkien organisaatioiden ja yritysten on saatettava verkkosivunsa ja verkkokanavansa vammaisten ulottuville. Yksi esteettömän verkkosivuston suunnittelun peruspilareista on sen tekstisisällön luettavuus ja luettavuus. Tämä on mahdollista vain esteettömien fonttien avulla.

Olemme järjestäneet tämän oppaan auttaaksemme lukijoitamme vastaamaan seuraaviin kysymyksiin: Mitä ovat esteettömät fontit ja mikä on paras fontti käytettäväksi verkkosivustolla? Lue lisää saadaksesi tietoa ADA-hyväksyttyjen fonttien yksityiskohdista ja niiden ominaisuuksista. Käsittelemme myös joitakin ominaisuuksia, joita tarvitaan, jotta verkkosivusto olisi esteetön näkövammaisille, lukihäiriöisille ja lukihäiriöisille henkilöille.

Yleiskatsaus fonttiperheisiin

Fonteilla ja erilaisilla fonttiperheillä on tärkeä asema digitaalisessa typografiassa. Fonttiperhe koostuu joukosta erilaisia fontteja, joilla on samankaltaisia ominaisuuksia ja suunnittelutyyliin liittyviä ominaisuuksia. Niiden ominaisuuksien ymmärtäminen voi auttaa verkkosuunnittelijoita valitsemaan verkkosivuilleen sopivimmat fontit. Vaikka kirjasinperheitä on monia, tässä luetellaan neljä niistä, jotka käyttäjä voi myös määrittää verkkoselaimessa:

• Serif: Serif-fonteissa on kirjaimen tai symbolin viivan lopussa koristeita tai koristeita.
• Sans-Serif: Sans on ranskankielinen sana, joka tarkoittaa ”ilman”. Sans-serif-fontit ovat yksinkertaisempia, eikä niissä ole pidennettyjä viivoja tai koristeita kirjaimen tai symbolin jokaisen viivan lopussa.
• Monospace: Monospace-fonteissa jokaisen kirjaimen tai symbolin leveys on sama. Niitä kutsutaan myös kiinteälehtisiksi tai ei-suhteellisiksi fonteiksi.
• Kursiiviset fontit: Kursiiviset fontit kirjoitetaan virtaavasti muistuttaen käsin kirjoitettuja sanoja. Yksittäisiä kirjaimia voidaan liittää toisiinsa taiteellisen vaikutelman aikaansaamiseksi.

Mittayksiköt

Fonttikokojen määrittelyyn on olemassa erilaisia yksiköitä:

• Ems (em): Tämä yksikkö määrittelee fonttikoon suhteessa HTML-sivun vanhemman elementin kokoon. Esimerkiksi jos HTML:ssä vanhemman elementin koko on 14 px, niin 2 em:llä se olisi 28 px.
• Rems (root ems): Kun käytetään rem-yksiköitä, kaikki fontit määritellään suhteessa HTML:n juurielementin fonttikokoon. Näin ollen kaikki HTML:ssä oleva teksti määritetään suhteessa yhteen perusfonttiin, eikä se riipu siitä, mihin kohtaan teksti on sijoitettu verkkosivujen HTML-hierarkiassa.
• Pikseli (px):
• Pisteet (pt): Pisteet ovat myös absoluuttinen mittayksikkö. WCAG käyttää CSS3-arvoja, joissa 1pt on 1,333 px. Näin ollen 14pt ja 18pt vastaavat 18,5px ja 24px.

Mikä tekee fontista saavuttamattoman?

ADA-yhteensopivien fonttien luettelosta suljetaan pois sellaiset esteettömät fontit, jotka:

• vaikeuttavat tekstin lukemista
• vaikeuttavat eri kirjainten ja merkkien muotojen erottamista toisistaan
• Hidastavat käyttäjän lukunopeutta
• Osaavat päällekkäisiä kirjaimia tai merkkejä, mikä vaikeuttaa kirjaimen erottamista toisesta.

Jos fontti on koristeltu koristeilla, sitä on vaikea lukea. Kaikki fontit, joissa on koristeita viivan lopussa, voivat olla joillekin käyttäjille vaikeammin luettavia. Kursiiviset tai käsinkirjoitustyyliset fontit tekevät tekstistä myös vaikeasti lähestyttävää, eivätkä ne siksi ole parhaita fontteja verkkosivuille.

Mitä ovat esteettömät fontit?

Sivustoa suunniteltaessa yksi tärkeimmistä seikoista on oikean fontin valinta ja sen esitystapa. Valtaosa verkkosivustoista vaatii paljon tekstisisältöä, jonka pitäisi olla hahmotettavissa ja nähtävissä. Esimerkiksi heikkonäköisellä yleisöllä olisi suurempi tarve suuremmalle tekstille. Henkilöt, joiden näkökenttä on heikko mutta joiden näkökenttä on selkeämpi, tarvitsisivat enemmän merkkejä, jotta ne mahtuisivat heidän näkökenttäänsä, mutta tekstin koko pysyisi pienenä. Myös henkilöillä, joilla on lukihäiriö tai lukihäiriö, on omat tarpeensa.

On parasta, että verkkosuunnittelijat tarjoavat joustavuutta, jotta käyttäjät voivat valita omat fonttinsa. Jos verkkosivulla käytetään selaimen oletusarvoista fonttia, lukijan ei tarvitse vaihtaa eri fonttia joka kerta, kun verkkosivu ladataan.

Vaikka ADA:n fonttikokovaatimusta ei ole olemassa, ADA:n vaatimukset täyttävät saavutettavat ADA:n vaatimukset täyttävät fontit ovat selkeitä, siistejä ja erottuvia, toisin kuin kursivoidut kirjasintyylit tai käsinkirjoitustyylit. Yleisesti ollaan yhtä mieltä siitä, että sans-serif-fontit ovat helpommin luettavia ja helpommin saavutettavia kuin serif-fontit. ADA-yhteensopivien fonttien luetteloon kuuluvat muun muassa Arial, Calibri, Century Gothic, Helvetica, Tahoma ja Verdana.

Käyttökelpoisten fonttien merkitys

Verkossa suurin osa tiedosta välitetään ja levitetään tekstisisällön avulla. Yksi tapa esittää tekstiä on .png- tai .bmp-kuvat tekstistä. Tämä ei kuitenkaan ole käyttökelpoinen vaihtoehto monista syistä. Esimerkiksi kun kuvia skaalataan, niiden luettavuus heikkenee. Ruudunlukuohjelmat eivät myöskään pysty lukemaan kuvien sisältämää tekstiä ääneen. Näin ollen verkkosivuston kaiken tekstin tulisi koostua esteettömistä fonteista, jotka ovat luettavissa ja nähtävissä.

Esteettömän verkkosivuston suunnittelu esteettömiä fontteja käyttäen ei ole enää vain suositus tai valinnainen ominaisuus. Se on pakollista; jos verkkosivusto rikkoo saavutettavuusperiaatteita, sen isäntäyritys tai yritys on vaarassa joutua raskaiden rangaistusten, sakkojen tai oikeusjuttujen kohteeksi. Tämä sakko voi olla jopa 75 000 dollaria ensimmäisestä rikkomuksesta ja enemmän myöhemmistä laiminlyönneistä.

National Health Interview Survey (NHIS) -tiedon mukaan näkövammaisia aikuisia on arviolta 32,2 miljoonaa. Tähän eivät kuulu ainoastaan sokeat, vaan myös ihmiset, joilla on heikkonäköisyys huolimatta siitä, että he käyttävät silmälaseja. CDC ennustaa, että tämä määrä kasvaa nopeasti ikään tai sairauteen liittyvien näkövammojen vuoksi.

Sivustojen suunnittelussa yritykset ja yritykset, jotka palvelevat tätä suurta vähemmistöä väestöstä, saavat luonnollisesti laajemman yleisön. On tunnettu tosiasia, että jos tekstiä on vaikeampi lukea verkkosivustolla, sen lukijakunta pienenee ja sivukäyntien määrä vähenee. Näin ollen ADA-hyväksyttyjen fonttien lisääminen verkkosivustolle on olennainen osa menestyvän yrityksen toimintaa.

Erikoisfontit

Britannian dysleksiayhdistys (British Dyslexia Association, BDA) huomauttaa seuraavista tärkeistä näkökohdista, jotka on pidettävä mielessä, kun suunnitellaan verkkosivuja ja valitaan helppokäyttöisiä fontteja dysleksiasta kärsiville henkilöille:

• Valittu fontti olisi suunniteltava niin, että käyttäjät pystyvät helposti hahmottamaan eron erilaisten kirjainten ja numeroiden välillä. Esimerkiksi l (pieni L), 1 ja I (iso i) voivat kaikki näyttää samalta.
• Kirjaimet b ja d sekä p ja q ovat toistensa peilikuvia. Dyslektikkojen voi olla vaikea erottaa niitä toisistaan. Kirjaimet olisi muunnettava niin, etteivät ne ole enää peilikuvia.
• Vähemmistö BDA:n kyselyyn osallistuneista henkilöistä piti parempana pyöristettyä ”g:tä” ja pyöristettyä ”a:ta”. Näiden kirjainten pyöristäminen ei kuitenkaan saisi johtaa siihen, että ne sekoitetaan ”o”-kirjaimeen.
• Kirjainvälien tulisi olla riittävät, jotta eri merkit voidaan erottaa toisistaan, esimerkiksi ”rn” yhdessä voidaan sekoittaa ”m”-kirjaimeen, joten ”learn” voidaan sekoittaa ”leam”-kirjaimeen.

Erikoistuneita kirjasimia on kehitetty dysleksiasta kärsiviä henkilöitä silmälläpitäen, esim. Dyslexie ja OpenDyslexic. Molemmat näistä fonteista ovat vapaasti saatavilla ja ne voi ladata ilmaiseksi. Ne ovat parhaita fontteja käytettäväksi verkkosivulla, kun on kyse dyslektikoille suunnatusta palvelusta. Vastaavasti Fs Me -fontti on tarkoitettu oppimisvaikeuksista kärsiville henkilöille, ja sitä tukee Ison-Britannian oppimisvaikeuksista vastaava hyväntekeväisyysjärjestö Mencap.

Web-sisällön saavutettavuusohjeiden noudattaminen

Web-sisällön saavutettavuusohjeet (Web Content Accessibility Guidelines, WCAG) on kehittänyt ja julkaissut World Wide Web Consortium (World Wide Web Consortium, W3C). Nämä suositukset muodostavat laajalti hyväksytyn standardin esteettömien verkkosivustojen ja verkkosisällön suunnittelulle. Yhdysvalloissa Section 508 final rule edellyttää suoraan WCAG:n noudattamista vähintään tasolla AA. ADA:han liittyvissä oikeudenkäynneissä oikeusministeriö ja yhdysvaltalaiset tuomioistuimet ovat usein viitanneet näihin ohjeisiin arvioidessaan julkisten verkkosivustojen saavutettavuutta.

WCAG:llä on selkeät ohjeet näkövammaisten käyttäjien kannalta saavutettavista fonteista, mukaan lukien attribuutit ja suunnitteluominaisuudet, kuten väri, kontrasti, koko ja tekstin mittasuhteet. Lisäksi on suosituksia tekstisisällön asettelusta ja rakenteesta, jotka tekevät verkkosivusta luettavamman ja saavutettavamman. On tärkeää sisällyttää nämä ominaisuudet verkkosivustoon, jotta ne sopivat käyttäjille, joilla on heikkonäköisyys, lukihäiriö, lukihäiriö tai muu kognitiivinen vamma.

Tässä oppaassa käsitellään W3C:n eri suosituksia parhaiden fonttien valitsemisesta esteettömyyden kannalta, ADA-yhteensopivien fonttien ylläpitämisestä ja niiden tärkeistä ominaisuuksista.

Fontin koko ja mittasuhteet: anna käyttäjän hallita niitä

Tekstiä kirjoitettaessa muoto vaihtelee, ja se riippuu myös kielestä. Jotkin aakkosten muodot ovat monimutkaisia, kun taas toiset ovat yksinkertaisempia ja helpommin luettavissa pienemmälläkin koolla. Tämä on tärkein syy siihen, miksi WCAG:ssä ei ole määritelty fontin vähimmäiskokoa. Seuraavat ovat tärkeitä näkökohtia, jotka on otettava huomioon, kun valitaan esteettömyyden kannalta parhaat fontit ja paras fontti näytöltä luettavaksi:

• Fonttikoot ja -yksiköt: WCAG:n mukaan fonttikoko tulisi määritellä käyttämällä ems- ja rems-kokoja, eli ohje suosii suhteellisia fonttiyksiköitä absoluuttisten yksiköiden sijaan. Verkkosuunnittelijoiden tulisi välttää perusfontin koon asettamista juurielementtiin. Sen sijaan voidaan käyttää selaimen oletusarvoista fonttikokoa, jota voidaan käyttää vertailukohtana kaikkien muiden fonttikokojen määrittelyssä. Jos käyttäjä muuttaa perusfonttikokoa, koko sivu muuttuu vastaavasti.
• Zoomausominaisuus: Käyttäjillä tulisi olla mahdollisuus hallita fonttikokoa, mukaan lukien tekstin zoomaaminen 200 %:iin asti. Tekstin pitäisi pysyä luettavana suurennettuna ilman, että se on liian täynnä tai että siinä on päällekkäisyyksiä. Suurennuksen pitäisi olla mahdollista ilman apuvälineteknologiaa, esimerkiksi verkkosivuille voidaan lisätä yksinkertainen säädin, kuten liukusäädin, jolla tekstin kokoa voidaan suurentaa tai pienentää. Tämän ominaisuuden tulisi olla käytettävissä kaikilla laitteilla, esim, matkapuhelimella, pöytäkoneella, tabletilla jne.

Tekstiväli: tee se suhteelliseksi fonttikokoon nähden

WCAG 2.1:ssä on seuraavat suositukset tekstiväleille:

• Riviväli olisi asetettava vähintään 1,5-kertaiseksi fonttikokoon nähden.
• Kappaleen jälkeisen välin olisi oltava vähintään 2-kertainen fonttikoon nähden.
• Kirjainvälin tulisi olla vähintään 0,2-kertainen fonttikokoon nähden.
• Sanaväli tulisi olla vähintään 0,16-kertainen fonttikokoon nähden.

Rivin leveys: Salli tekstin kietoutuminen

Yleisesti rivin pituuden mittayksikkönä käytetään merkkimäärää. Vammaisuudesta huolimatta ihmisten on vaikeampi lukea pidempiä rivejä kuin lyhyempiä rivejä, koska rivinvaihdot antavat silmille mahdollisuuden levätä. Viime kädessä rivin pituus ei saisi ylittää 80 merkkiä.

Henkilöt, joilla on pienempi näkökenttä, tarvitsevat kapeampia tekstialueita, joissa he voivat helposti erottaa rivin lopun ja seuraavan rivin alun. Näin ollen rivin pituuden tulisi olla käyttäjän säädettävissä. Jos he säätävät katselualuetta, tekstirivien tulisi automaattisesti kiertyä ja virrata uudelleen, jolloin käyttäjä voi lukea tekstiä ilman vaakasuuntaista vieritystä.

Kappaleet: Kohdista kappaleet vasemmalle tai oikealle

Kaiken verkkosisällön tulisi olla jäsenneltyä ja järjestettyä lyhyisiin kappaleisiin, ja pitkiä lauseita tulisi välttää. Kappaleiden tulisi olla joko vasemmalle tai oikealle tasattuja. Vaikka perusteltu teksti voi näyttää visuaalisesti houkuttelevammalta, sitä tulisi välttää, sillä ylimääräiset välilyönnit rivien sisällä tekevät tekstistä vaikeasti lähestyttävää. Sama pätee keskitettyihin kappaleiden muotoiluihin, sillä lukijan voi olla vaikea löytää seuraavan rivin alkua.

Viisas suhtautuminen fontin väriin

Värien tehokas käyttö on tärkeää, jotta käyttäjälle voidaan välittää mielekästä tietoa. Esimerkiksi lomakkeiden pakolliset kentät voidaan merkitä värillisin korostuksin, virheet voidaan näyttää punaisella, sinisellä alleviivatulla tekstillä osoitetaan yleensä hyperlinkkejä, ja harmaata voidaan käyttää osoittamaan käytöstä poistettuja lomakekenttiä.

Vaikka värit lisäävät verkkosivun esteettistä viehättävyyttä, on huolehdittava siitä, että huomioidaan myös henkilöt, joilla on heikko väritaju, sillä he eivät välttämättä pysty erottamaan värieroja. WCAG 2.1:ssä todetaan, että värin lisäksi olisi käytettävä vaihtoehtoisia visuaalisia vihjeitä eri ominaisuuksien erottamiseksi toisistaan.

Värien käyttö on tiiviisti sidoksissa kontrastisuhteisiin. Hyvä värikontrasti on olennaisen tärkeää luettavan ja saavutettavan tekstin kannalta. Seuraavat seikat ovat tärkeitä, kun mietitään näkövammaisille käyttäjille tarkoitettuja helppokäyttöisiä fontteja:

• Värikontrastin tulisi mahdollistaa etualan tekstin erottuminen taustasta. Se ei saisi olla liian matala tai liian kova.
• Tekstin väri harmaa (#777777) valkoisella pohjalla on WCAG-tason AA minimi. Suuremmassa tekstissä 52 prosenttia harmaata (#828282) on hyväksyttävää.
• Käänteistä tekstiä, joka on vaalea etualan tekstiväri tummalla taustalla, tulisi välttää mahdollisimman paljon, koska se on vaikeammin luettavissa.

Kontrastisuhde: tee kaikesta erottuvaa

Kontrastisuhdetta koskevat WCAG 2.1:n suuntaviivat on lueteltu seuraavassa:

1. 1. Otsikot: Tekstiotsikoiden ja suuremman tekstin kontrastisuhteen tulisi olla vähintään 3:1. 18 pisteen tekstiä tai 14 pisteen lihavoitua tekstiä pidetään suurena tekstinä, ja sen tulisi täyttää tämä vaatimus.
2. 2. Pääteksti: Muun tekstin kuin otsikoiden kontrastisuhteen on oltava vähintään 4,5:1.
3. 3. Logotyyppi: Logoon tai brändiin kuuluvalla tekstillä ei ole kontrastivaatimusta.
4. 4. Satunnainen teksti: Tekstillä, joka on osa inaktiivista käyttöliittymää, pelkkää koristelua, näkymätöntä tai osa kuvaa eikä välitä merkityksellistä tietoa, ei ole kontrastivaatimusta.

Suositellun kontrastisuhteen ylläpitämiseksi on useita suositeltavia tapoja. Jos esimerkiksi kirjain tai tekstisymboli on alhaalla vaaleampi, se saattaa rikkoa koko kirjaimen kontrastisuhdetta. Tällöin suunnittelija voi joko tummentaa taustaa tai lisätä kirjaimeen ohuen mustan ääriviivan, jotta vaadittu kontrastisuhde säilyy. Myös etualan kirjainten tai taustan suhteellista kirkkautta voidaan muuttaa halutun tuloksen saavuttamiseksi. Erilaiset työkalut, joita voidaan käyttää kontrastisuhteen tarkistamiseen, on lueteltu WCAG:n verkkosivuilla

Tekstin esittäminen

Naisten näkövammaisten käyttäjien kannalta sopivien fonttien sisällyttämisen lisäksi myös tekstin asetteluun ja rakenteeseen on tärkeää kiinnittää huomiota. Kun kyse on tekstin yleisestä esitystavasta verkkosivulla, tulisi noudattaa seuraavia pääkohtia:

• Dokumentit tulisi kirjoittaa käyttäen samaa fonttia tai mahdollisimman vähän fontteja. Sivu, joka sisältää useita fontteja, vaikka ne olisivatkin ADA-yhteensopivia fontteja, on vaikeammin luettava.
• HTML-otsikkotageja, esim. <h1>, <h2> jne. tulisi käyttää asiakirjan rakenteen ja hierarkian välittämiseen, eikä niitä tulisi käyttää vain siksi, että tiettyä fonttikokoa tarvittiin jonkin elementin visuaaliseen korostamiseen.
• Animoitua ja liikkuvaa tekstiä tulisi välttää kokonaan.
• Tekstisisältö tulisi esittää pikemminkin tekstidatan avulla kuin kuvien tai grafiikan avulla. Tekstin fontit suurennettuna eivät yleensä menetä luettavuuttaan ja säilyttävät laatunsa. Tekstin kuvilla on taipumus käyttäytyä päinvastoin, ja niiden laatu saattaa huonontua, kun niitä suurennetaan.
• Lausekkeiden isoja kirjaimia tulisi käyttää ja pieniä isoja kirjaimia tulisi välttää.
• Lihavointia ja kursivointia ei tulisi yhdistää.
• Tekstilohkoja, joissa on kursivointia, ei voi käyttää, ja niitä on vaikeampi lukea.
• Välttäkää tekstin alleviivaamista, ellei se ole linkki.

Johtopäätökset

Digitaalisten esteiden poistamisen ja samanlaisen internet-kokemuksen tarjoamisen kaikille henkilöille, vammaisille tai vammaisille, tulisi olla kaikkien yritysten ja organisaatioiden ensisijainen tavoite. Tämän saavuttamiseksi WCAG tarjoaa arvokkaita suosituksia parhaiden fonttien valitsemiseksi verkkosivuille, jotka tekevät tekstin luettavaksi kaikille käyttäjille, myös niille, joilla on heikkonäköisyys, lukihäiriö tai lukihäiriö.

Yritykset, joilla on vain vähän tai ei lainkaan ADA-kokemusta, voivat kääntyä asiantuntijoiden puoleen suunnitellessaan ja luodessaan uusia verkkosivuja tai korjatessaan jo olemassa olevia sivustojaan. Ennakoiva toiminta kaiken verkkosisällön ja verkkopalvelujen esteettömyyden varmistamiseksi auttaa välttämään suuret rahalliset sakot ja vahingonkorvaukset.

On järkevää hankkia apua kehittäjien, suunnittelijoiden ja insinöörien tiimiltä, jolla on asiantuntemusta ja kokemusta ADA- ja 508-yhteensopivien verkkosivustojen kehittämisestä. Osana verkkosivujen esteettömyyspalvelujamme tarjoamme täydellisiä paketteja WCAG-standardeihin perustuvien verkkosivujen kehittämiseen, vanhojen verkkosivujen korjaamiseen ja säännöllisten tarkastusten tekemiseen verkkosivujesi esteettömyyden varmistamiseksi.