@harrasteblogi JUURI NYT
--:--

Tilaa uutiskirje

Saat tuoreimmat 10 uusinta artikkelia kerran viikossa sähköpostiisi.

Tilaa uutiskirje

Drupal ja saavutettavuus: Kuinka rakennat esteettömän verkkosivunSaavutettavuus ei ole enää pelkkä lisäominaisuus verkkosivustoilla, vaan olennainen osa laadukasta digitaalista palvelua. Esteetön verkkosivusto mahdollistaa sen, että mahdollisimman moni käyttäjä voi käyttää palvelua riippumatta esimerkiksi näkö-, kuulo-, liikunta- tai kognitiivisista rajoitteista.

Drupal tunnetaan vahvasta saavutettavuusosaamisestaan, ja saavutettavuus on ollut pitkään yksi sen kehityksen painopistealueista. Oikein toteutettuna Drupal tarjoaa erinomaiset työkalut WCAG-vaatimusten täyttämiseen ja käyttäjäystävällisten verkkopalveluiden rakentamiseen.

Mitä saavutettavuus tarkoittaa?

Saavutettavuus tarkoittaa, että verkkopalvelu on:

  • Havaittava
  • Hallittava
  • Ymmärrettävä
  • Toimintavarma

Tavoitteena on, että mahdollisimman moni voi käyttää palvelua erilaisilla laitteilla ja apuvälineillä.

Miksi saavutettavuus on tärkeää?

Saavutettavuus hyödyttää:

  • Näkövammaisia käyttäjiä
  • Kuulovammaisia käyttäjiä
  • Ikääntyneitä käyttäjiä
  • Mobiilikäyttäjiä
  • Hitaiden yhteyksien käyttäjiä
  • Tilapäisistä rajoitteista kärsiviä käyttäjiä

Esteettömyys parantaa käytettävyyttä lähes kaikille käyttäjille.

Lainsäädäntö asettaa vaatimuksia

Monissa maissa julkishallinnon ja osittain myös yksityisten palveluiden on täytettävä saavutettavuusvaatimukset.

Yleisimmin noudatetaan:

  • WCAG 2.1 -ohjeistusta
  • WCAG 2.2 -suosituksia

Saavutettavuus kannattaa huomioida jo projektin alkuvaiheessa.

Drupalin saavutettavuusominaisuudet

Drupal sisältää useita saavutettavuutta tukevia ominaisuuksia:

  • Näppäimistökäytön tuki
  • ARIA-ominaisuudet
  • Selkeät lomakerakenteet
  • Semanttinen HTML

Monet ominaisuudet ovat käytettävissä suoraan ilman lisämoduuleja.

Käytä semanttista HTML-rakennetta

HTML-rakenne auttaa apuvälineitä ymmärtämään sivun sisällön.

Hyviä käytäntöjä:

  • Käytä otsikkotasoja oikein.
  • Käytä listoja tarkoituksenmukaisesti.
  • Hyödynnä HTML5-elementtejä.

Selkeä rakenne helpottaa sekä käyttäjiä että hakukoneita.

Otsikkorakenne on tärkeä

Hyvä otsikkohierarkia auttaa käyttäjiä hahmottamaan sisällön.

Esimerkiksi:

H1 – Sivun pääotsikko
H2 – Pääosio
H3 – Alaosio

Otsikkotasojen ohittamista kannattaa välttää.

Huolehdi värien kontrasteista

Riittämätön kontrasti vaikeuttaa sisällön lukemista.

Varmista:

  • Riittävä tekstin ja taustan kontrasti
  • Selkeät painikkeet
  • Hyvä luettavuus kaikilla laitteilla

Kontrastiongelmat ovat yksi yleisimmistä saavutettavuuspuutteista.

Lisää vaihtoehtoiset tekstit kuville

Kuvat eivät välity ruudunlukijoille ilman alt-tekstiä.

Hyvä alt-teksti:

  • Kuvaa kuvan tarkoituksen
  • On riittävän informatiivinen
  • Ei toista ympäröivää sisältöä tarpeettomasti

Koristekuville voidaan käyttää tyhjää alt-attribuuttia.

Huomioi näppäimistökäyttö

Kaikki käyttäjät eivät käytä hiirtä.

Sivuston tulisi olla käytettävissä:

  • Tab-näppäimellä
  • Enterillä
  • Nuolinäppäimillä

Kaikkien toimintojen tulee olla saavutettavissa myös ilman hiirtä.

Tee lomakkeista saavutettavia

Lomakkeet ovat yksi yleisimmistä ongelmakohdista.

Muista:

  • Selkeät kenttien nimet
  • Virheilmoitukset
  • Ohjetekstit
  • Looginen tab-järjestys

Drupal tarjoaa hyvät työkalut saavutettavien lomakkeiden rakentamiseen.

Vältä pelkkään väriin perustuvaa viestintää

Älä ilmaise tärkeää tietoa ainoastaan värin avulla.

Esimerkiksi:

❌ Punainen kenttä tarkoittaa virhettä.

Parempi vaihtoehto:

✔ Punainen kenttä ja tekstimuotoinen virheilmoitus.

Tämä auttaa värisokeita käyttäjiä.

Responsiivisuus tukee saavutettavuutta

Saavutettava sivusto toimii:

  • Puhelimilla
  • Tableteilla
  • Tietokoneilla
  • Suurennetuilla näkymillä

Responsiivinen suunnittelu on tärkeä osa esteettömyyttä.

Huolehdi linkkien selkeydestä

Vältä linkkitekstejä kuten:

Lue lisää
Klikkaa tästä

Parempi vaihtoehto:

Lue lisää Drupalin saavutettavuusominaisuuksista

Kuvaavat linkit auttavat erityisesti ruudunlukijoiden käyttäjiä.

Videoiden saavutettavuus

Jos sivustolla on videoita, huomioi:

  • Tekstitykset
  • Transkriptiot
  • Selkeä äänenlaatu

Saavutettava videosisältö palvelee laajempaa käyttäjäryhmää.

Testaa ruudunlukijalla

Tekninen toteutus ei aina kerro koko totuutta.

Hyviä testausmenetelmiä ovat:

  • Näppäimistötestaus
  • Ruudunlukijat
  • Saavutettavuustyökalut

Todellinen käyttökokemus löytyy usein testaamalla.

Hyödynnä automaattisia työkaluja

Saatavilla on useita hyödyllisiä työkaluja:

  • Lighthouse
  • WAVE
  • Axe
  • Browser Developer Tools

Ne auttavat löytämään yleisimpiä ongelmia.

Saavutettavuus ja SEO

Saavutettavuus ja hakukoneoptimointi tukevat usein toisiaan.

Molemmat hyötyvät:

  • Selkeästä rakenteesta
  • Otsikkohierarkiasta
  • Kuvien alt-teksteistä
  • Loogisesta navigaatiosta

Hyvä saavutettavuus voi myös parantaa hakukonenäkyvyyttä.

Kouluta sisällöntuottajat

Tekninen toteutus ei yksin riitä.

Myös sisällöntuottajien tulee ymmärtää:

  • Otsikkorakenteet
  • Alt-tekstit
  • Linkkien merkitys
  • Selkeä kieli

Saavutettavuus on koko organisaation yhteinen tehtävä.

Saavutettavuus on jatkuva prosessi

Esteettömyys ei valmistu kerran.

Sivustoa tulee:

  • Testata säännöllisesti
  • Kehittää jatkuvasti
  • Seurata uusien sisältöjen laatua

Pienetkin muutokset voivat vaikuttaa saavutettavuuteen.

Yhteenveto

Drupal tarjoaa erinomaiset mahdollisuudet esteettömien verkkopalveluiden rakentamiseen. Semanttinen HTML, toimiva otsikkorakenne, saavutettavat lomakkeet, hyvä kontrasti ja näppäimistökäytön huomioiminen muodostavat vahvan perustan saavutettavalle sivustolle.

Saavutettavuus ei ole pelkästään tekninen vaatimus, vaan tapa rakentaa parempia verkkopalveluita kaikille käyttäjille. Kun esteettömyys huomioidaan jo suunnitteluvaiheessa, lopputuloksena syntyy laadukkaampi, käyttäjäystävällisempi ja kestävämpi verkkopalvelu.

🍪