Saavu­tet­tavat verkko­sivut AMKIT-konsortiolle

Suunnit­telin ja toteutin kolmi­kie­lisen, saavu­tet­ta­vuus­vaa­ti­mukset huomioivan WordPress-verkko­si­vuston AMKIT-konsor­tiolle. Projektin myötä pääsin syven­tymään WCAG 2.1 ‑ohjeisiin sekä suunnit­te­lijan että kehit­täjän näkökulmasta.

Projektin tavoite

Tavoit­teena oli suunni­tella ja toteuttaa WordPress-verkko­sivusto AMKIT-konsor­tiolle, sillä konsortion vanhan sivuston ylläpito oli haastavaa, eikä se täyttänyt saavu­tet­ta­vuus­vaa­ti­muksia. Työsken­telin projek­tissa suunnit­telija-kehit­täjänä, ja hoidin myös yhtey­den­pidon asiakkaan kanssa.

Sivus­tosta toivottiin selkeää, nykyai­kaista ja helposti ylläpi­det­tävää. Digipal­ve­lulain velvoit­tamana sivuston täytyi myös täyttää saavu­tet­ta­vuus­vaa­ti­mukset WCAG 2.1:n AA-tason ja EN 301 549 ‑standardin mukai­sesti. Sivusto haluttiin lisäksi julkaista kolmella kielellä. Aikaa projektin toteu­tuk­selle oli noin 3 kuukautta.

Asiakkaan toiveiden täyttä­misen lisäksi omia tavoit­teitani tässä projek­tissa olivat saavu­tet­ta­vuusym­mär­ryksen lisää­minen ja käyttä­jäys­tä­väl­lisen backendin toteut­ta­minen (frontendin lisäksi, tietenkin).

Saavu­tet­tavan sivuston suunnittelu

Aloitin sivuston suunnit­telun kartoit­ta­malla asiakkaan tarpeet ja toiveet. Bench­mark­kasin toimialan muiden toimi­joiden sivuja, ja tutustuin saavu­tet­ta­vuus­vaa­ti­muksiin. Näiden pohjalta loin sivuston rakenteen ja visuaa­lisen ilmeen. Digipal­ve­lulain vaati­musten lisäksi halusin myös varmistaa, että sivusto on kogni­tii­vi­sesti saavu­tettava, selkeä ja helppo­käyt­töinen. Hyödynsin Figmaa luonnosten ja proto­tyyppien luomiseen ja ideoiden esittelyyn.

Selkeys

Sivustoa suunni­tel­lessa ajattelin paljon selkeyttä. Kogni­tii­visen saavu­tet­ta­vuuden kannalta on oleel­lista, että esimer­kiksi samaan asiaan liittyvät elementit ovat visuaa­li­ses­tikin lähellä toisiaan. Toisaalta sivus­tolla tulisi olla riittä­västi tilaa ja etäisyyttä asioiden välillä, jos ne eivät liity toisiinsa. Selkeyttä ajatellen päätin jo alkuvai­heessa rajata sivujen osia laati­koihin: niillä voidaan jäsentää sisältöä helposti ymmär­ret­tä­vällä tavalla.

Johdon­mu­kaisuus

Saavu­tet­ta­vassa suunnit­te­lussa on erityisen tärkeää, että loppu­tulos on johdon­mu­kainen. Silloin esimer­kiksi saman näköiset elementit tekevät aina saman­kal­taisen asian. Johdon­mu­kai­suutta lisätäkseni suunnit­telin perus­e­le­menttejä, joita käytin sivus­tolla mahdol­li­simman paljon uudestaan.

Hierarkia

Yksi keskeinen kogni­tii­vista saavu­tet­ta­vuutta lisäävä asia on hierarkia. Hyvän hierarkian perusta raken­netaan mielestäni jo sivus­to­kartan suunnit­te­lu­vai­heessa, mutta sitä tarvitaan myös sivujen sisällä. Hierarkian paran­ta­mi­seksi AMKIT-konsortion sivuston elementit on järjes­tetty niin, että tärkein asia kohdataan ensin. Suunnit­telin myös johdon­mu­kaiset ja koko sivus­tolla toistuvat otsik­ko­tyylit, jotka ovat visuaa­li­sesti hierarkkisia.

Värien käyttö

Suunnit­telun haasteeksi osoit­tautui olemas­sao­levien brändi­värien käyttö uudella verkko­si­vus­tolla, sillä niiden kontrasti ei ollut riittävä valkoisen kanssa, ja musta taas ei sopinut haluttuun tyyliin. Värit olivat myös melko voimak­kaita, mutta ne haluttiin säilyttää samanlaisina. 

Täydensin sivuston väripa­lettia tumman­vio­le­tilla ja vaalealla beigellä, joiden myötä ei-saavu­tet­tavia brändi­värejä voitiin käyttää vähemmän, lähinnä tehos­teissa ja grafii­kassa. Uusilla väreillä sivus­tolle saatiin myös visuaa­lista rauhal­li­suutta, mikä tekee siitä kogni­tii­vi­sesti saavutettavamman.

Sivuston tekninen toteutus

Toteutin sivuston WordPress-alustalla, joka tarjoaa hyvät työkalut sisällön helppoon hallintaan ja päivi­tykseen. Raken­nus­työ­kaluna käytin Oxygen Builderia ja Advanced Custom Fields ‑lisäosaa, ja lisäksi tein kusto­moituja toimintoja PHP- ja JavaScript-kielillä. Sivuston eri kieli­versiot tein Polylang-lisäosalla.

Saavu­tet­ta­vuuden paran­ta­mi­seksi pyrin käyttämään toteu­tuk­sessa mahdol­li­simman paljon semant­tisia HTML-elementtejä ja tarvit­taessa ARIA-attri­buutteja. Saavu­tet­ta­vuuden testaa­miseen käytin manuaa­lisen tarkas­tuksen lisäksi WAVE‑, QualWeb- ja Lighthouse-työkaluja.

Loppu­tulos

AMKIT-konsortio sai tämän projektin myötä modernit, selkeät ja saavu­tet­ta­vammat verkko­sivut. Käyttä­jäys­tä­väl­listen backend-ratkai­sujen vuoksi sivuston ylläpito ja päivit­tä­minen on helpompaa kuin aiemmin. Kieli­versiot ja saavu­tettava toteutus avasi sivuston laajemman käyttä­jä­kunnan saataville. 

Projekti syvensi ymmär­rystäni saavu­tet­ta­vuus­vaa­ti­muk­sista ja ‑standar­deista sekä monikie­lisen verkko­si­vuston toteut­ta­mi­sesta. Sain myös hyvää kokemusta Figman käytöstä ja asiakkaan kanssa toimi­mi­sesta. Opin lisäksi uusia tapoja kehittää sivuston hallintaa käyttäjäystävällisemmäksi.