Saavutettavat verkkosivut hankkeelle
Lähtötilanne
Metropolia Ammattikorkeakoulu Oy Helsingistä lähestyi lomakkeen kautta lähetetyllä tarjouspyynnöllä: ”Tarjouspyyntö rakennusalan tieto- ja taitokeskittymä -hankkeen verkkosivuston toteutuksesta”.
”Hankkeen tavoitteena on lisätä alan mahdollisuuksien tunnettuutta yhteiskunnassa, edistää uuden osaamisen kehittymistä yritysten kilpailukyvyn vahvistamiseksi sekä parantaa rakentamisen toimialan vetovoimaa.
Muutaman selventävän sähköpostin jälkeen jätimme hyväksytyn verkkosivutarjouksen, joka sisältää:
- Verkkosivutaiton saavutettavuus huomioiden (WCAG 2.1 ja AA-taso)
- Sivuston tekninen toteutus ja asiakkaan toimittaman sisällön vieminen verkkosivustolle
- Sivuston sisällön ylläpitokoulutus tilaajalle.
Verkkosivuston ilme ja toiminnot
Saavutettavuus asettaa omat vaatimuksensa verkkosivuston toteutukselle. Pääperiaatteena on, että mahdollisimman moni erilainen ihminen voisi käyttää verkkosivuja ja mobiilisovelluksia helposti. Saavutettavuus on ihmisten erilaisuuden ja moninaisuuden huomiointia verkkosivujen ja mobiilisovelluksien suunnittelussa ja toteutuksessa. Olemme kirjoittaneet saavutettavuudesta aiemmin mm. mitä se tarkoittaa graafisen suunnittelun osalta.
Asiakas toimitti meille alustavan mallitaiton, miltä sivu voisi näyttää. Toki mallittaitossa ei huomioitu saavutettavuutta, joten muokkasimme sitä rakentaessamme mallisivua asiakkaan nähtäväksi.
Mallisivut
Teimme asiakkaalle nähtäväksi vain yhden mallisivun, koska asiakkaan toimittama mallitaitto (pdf) oli hyvä lähtökohta sivuston ilmeeksi. Sivuston tärkein tehtävä on (hanke)asioista tiedottaminen, joten artikkelit, tapahtumat ja uutiskirjeen tilaaminen ovat keskiössä. Sivuston graafisessa ilmeessä varmistettiin, että elementtien ja tekstien väliset kontrastit olivat tarpeeksi suuret ja sisällön sekä sisältötekstin taitto selkeää.
Lopullinen sivuilme ja tekniset ratkaisut
Etusivu on verkkosivuston tärkein sivu. Etusivun tehtävä on kertoa, minne selaaja on saapunut. Etusivulta tulee löytyä tärkeimmät asiat, jota hanke haluaa näkyväksi. Näinpä etusivulle taitettiin sisältöä tulevista tapahtumista ja asiasisällöistä (artikkelit). Lisäksi on tärkeää, että etusivulta löytyy uutiskirjeen tilaustoiminto. Muille alasivuille navigoidaan ylävalikon kautta.
Alasivujen sisältötaitot ovat mahdollisimman yksinkertaiset. Jos joillekin alasivuille ei asiakkaalla ollut vielä sisältöä, teimme elementit sinne valmiiksi. Muokkaamalla tai kopioimalla sivuelementtejä, asiakas pystyy myöhemmin rakentamaan sisältöä valmiimmaksi. Sisällön löytämistä helpotettiin pidemmillä alasivuilla hakupainikkein (viittaamalla ankkurilinkkeihin).
Tilaajan valitsemien värien osalta emme lähteneet niitä vaihtamaan, vaan varmistimme vain taustan ja sisältöelementin välisen kontrastin riittävyyden. Kirjasinkin oli selkeä Archivo ja samaa fonttia oli helppo käyttää otsikoissa ja leipätekstissä. Muita fontteja ei sivuille ladata, joten lautausaika minimoitiin tältä osin.
Kun sivuston sisältö oli julkaisuvalmis, lisäsimme metatiedot, alt-tekstit sekä saavutettavuusselosteen ja evästeilmoituksen.
Responsiivisuus
Sivustoa selataan tänä päivänä puhelimella enemmän kuin muilla medialaitteilla. Siksi sivuilme ja käytettävyys on oltava kunnossa mobiiliruudulla. Saavutettavuuden kannalta sisällön selattavuus mobiililaitteissa on erityisen tärkeää, kun ruutu on pienempi ja pääsääntöisesti pystymallinen.
Jo mallisivuja rakennettaessa otimme huomioon mobiilin asettamat vaatimukset sisällölle. Tällä tavoin varmistimme, että sisältöjä vietäessä pohjat ovat jokaiselle ruudulle mahdollisimman toimivat. Kun sivuille taitetaan asiakkaan toimittama sisältö, mobiilinäkymät vaativat silti tarkistuksen, vaikka mallisivupohja olisi paras mahdollinen. Syitä tähän ovat muun muassa pitkät sanat otsikoissa, taiton muuttuminen yksipalstaiseksi sekä kuvien ja videon näkyminen. Myös sisältövalikko piiloutuu hampurilaisvalikon taakse, jolloin on sen toimivuudesta on pidettävä huolta (liian pitkä valikko ei sovi ruutuun).
Kun sivusto oli julkaistu, teimme vielä testauksen eri selaimilla ja laitteilla, jotta tarkistus olisi mahdollisimman kattava. Pyysimme myös asiakkaalta, että he tarkistavat taitetun sisällön vielä kertaalleen, jotta taittovirheet saadaan minimoitua.
Asiakkaan palaute yhteistyöstä
“Kiitos erittäin paljon Miikka ja Henry verkkosivujen kehittämistyöstänne! Saitte hyvin kiinni meidän visiosta ja saatiin sivusto toteutettua asiallisesti ja toitte hyvin esiin niin tekniset kuin toiminnallisetkin ominaisuudet ja huomioitte meidän toiveet ja vaatimukset. Sivustosta tuli toivotunlainen ja saatiin lyhyelläkin varoitusajalla sinne lisättyä sisältöjä ja olitte joustavia meidän muutosten suhteen. Olen sivustolle syöttänyt sisältöjä ja WordPress -teema vaikuttaa simppeliltä käyttää. Verkkosivujen käyttökoulutuksesta jäi oikein positiivinen mieli ja saatiin sielläkin kaikkiin kysymyksiin vastaukset. Kiitos paljon Henrylle koulutuksesta!
Myös lyhyet vinkit saavutettavuuden kannalta, joita välillä kerroit Miikka maileissa ja palavereissa olivat erittäin hyödyllisiä muistutuksia ja tukevat myös sivuston jatkokehittämisessä ja sisällön lisäämisessä.
Kaikki kenelle on sivustoa esitelty meidän talon sisällä ja ulkopuolella ovat tykänneet ja kehuneet sivuja!”
Ellamari Koutonen
Projektisuunnittelija, Metropolia ammattikorkeakoulu
Referenssit
Tässä muutama muu verkkosivusto, jotka olemme tuottaneet. Referenssit-sivulta löydät lisää projektejamme.
Kotisivut
SILE-hanke
Kotisivut
Niinan KOTO Oy
Verkkokauppa
Uniikitcom
Yhteenveto
Tässä artikkelissa käsittelimme saavutettavan verkkosivuston toteuttamista Metropolia Ammattikorkeakoulun hallinnoimalle hankkeelle. Sivuston päämäärä on tiedottaa ja jakaa tietoa hankkeen tapahtumista ja asioista. Tällöin etusivu rakennetaan tiedottamisen ehdoilla. Noudattamalla saavutettavuuden asettamia teknisiä ja visuaalisia ohjeita, sivuston graafinen ilme on selkeä ja helppokäyttöinen. Se auttaa myös sisällön ylläpitäjää, että taittomallit ovat yksinkertaisia ja helposti myös laajennettavia.
Saavutettavuus asettaa monenlaisia vaatimuksia verkkosivustolle. EU:n lainsäädäntö edellyttää jo yhteiskunnallisilta toimijoilta saavutettavuutta verkkosivustoillaan ja pikkuhiljaa saavutettavuussäädös laajenee edelleen. Vuonna 2025 saavutettavuuden piiriin tulevat verkkokaupat. Mielellämme autamme sivustosi kehityksessä tulevaisuudessa.
Onko hankkeella tai yhditykselläsi jo verkkosivut? Tiedätkö, milloin sivuston tulee olla saavutettava? Me tiedämme, ota yhteyttä lomakkeemme kautta.
MITEN VOIMME AUTTAA SINUN YRITYSTÄSI?
Kirjoita tai soita. Kuulisimme mielellämme asiasi.
