Saavutettavuus
Saavutettavuus, Kokko-Kokki Oy vuodesta 1989
Etusivu   |  Saavutettavuus   |  Ohjeita   |  Yritys   |  Palaute   |  Sivukartta  

Responsiivininen sivu, helppo tapa tehdä tyylikästä saavutettavuutta

responsiivinen suunnittelu mahdollistaa saman sivun näyttämisen eri päätelaiteilla

Saavutettavan sivun, etenkin jos sivulta vaaditaan WCAG 2.1 ohjeidenmukainen tasoista saavutettavuutta, voi sen toteuttaa responsiivisuudella. Sen avulla sivusta saadaan yksinkertainen ja tyylikäs. Samalla monet saavutettavuuteen liittyvät asiat on jo otettu huomioon.

Miten niin ratkaistu?

Yksi ongelma on ollut sivujen leveys. Tämä on ongelma myös mm. pieniä tabletteja tai kännyköitä käyttäville. Sivulla joutuu monesti liikkumaan sivusuunnassa, jotta saa näkyviin kaiken siinä olevan tiedon. (Tekstin kokoa voidaan muuttaa tavalla, joka ei vaadi käyttäjää vierittämään tekstiä vaakasuunnassa rivin lukemiseksi)

Skaalautuvuus on tapa tehdä sivusta saavutettavampi ja samalla toimivampi myös mobiililaitteiden käyttäjille. Kun sivusto tehdään skaalautuvaksi, siitä ei tarvitse tehdä erillistä mobiiliversiota.

Responsiivisuus, jolla skaalataan sivua, on ajatusmalli. Siinä sivuston suunnittelun pohjana käytetään eri sivukokoja mm. mobiilisivua. Malli on hyvä, sillä html5-arkkitehtuuri on tuonut käyttöön tarvittavat työvälineet ja responsiivisen sivupohjan tekemiseen on kehitetty hyviä työkaluja.

Taloudellisuus

Suunnittelija, joka hallitsee responsiivisuuden, voi nopeasti ja edullisesti tuottaa näyttäviä sivumalleja, joita on helppo muokata asiakkaan toiveiden mukaisesti. Mallipohjan nopeampi valmistuminen ja sen suora soveltuvuus sekä mobiililaitteille ja samalla saavutettavampia sivustoja tarvitseville tuo kustannussäästöjä.

Responsiivisuus kohtaa samoja ongelmia kuin skaalautuvat sivut. Tällainen on esim. kuinka käsitellä kuvia niin, että mobiililaitteessa ja isolla ruudulla saadaan sama kuva näkymään terävänä. Html5-standardi, jota nykyiset selaimet pystyvät toteuttamaan, auttaa osittain ratkaisemaan näitä ongelmia.

Myös Flash-pohjaiset, näyttävät efektit, voidaan korvata html5-elementeillä. Flashsin suurin ongelma on ollut sen haavoittuvuus erilaisten haittaohjelmien kautta. Nykyisin kaikki mobiililaitteet eivät tue Flash-teknologiaa.

Kun sivun käyttöliittymää aletaan suunnitella myös mobiilikäyttäjän näkökulmasta ja mobiililaitteen rajoitusten puitteissa, tulee samalla otettua huomioon monia saavutettavuuteen liittyviä näkökulmia. Monesti näin suunniteltu sivusto saadaan varsin helposti myös saavutettavaksi.

Ellei palveluntarjoaja pysty tarjoamaan responsiivista vaihtoehtoa, on hyvä kysyä, kuinka paljon lisäkustannuksia tulee, kun sivusto ei mm. palvele mobiilikäyttäjiä.

Ole trendijohtaja, älä perässähiihtäjä

On helppoa katsoa, mitä kilpailijat ovat tehneet. Siten voi saada monia hyviä ajatuksia. Kyse on kuitenkin yrityksen, yhdistyksen tms. ulkoisesta näkymästä, joka sisältää värit, fontit ja kaiken muun sivuston suunnittelusta alkaen. Hyvä design responsiivinen suunnittelija voi luoda helposti puhtaan html-mallin, joka on upotettavissa julkaisujärjestelmään.

Aiemmin sivujen suunnitteluun on käytetty paljon aikaa ja rahaa. Suunnittelun tuloksena on saatu pdf-pohjaisia malleja tai yhteen näyttökokoon sopiva html-malli. Html-mallin suunnittelussa eivät ehkä ole olleet lähtökohtina verkon tarjoamat mahdollisuudet, vaan perinteisempi ajattelu. Tällöin visuaalisen mallin muokkaaminen vaatii aikaa ja rahaa.

Jos sivua lähdetään suunnittelemaan suoraan responsiiviseen mallijärjestelmään, on mahdollista saada hyvinkin näyttävä ja verkon ehdoilla toimiva mallipohja. Asiakkaan pyytämät muutokset voidaan tehdä nopeasti ja helposti ja näin tuottaa valmiit leiskat eri sivupohjista.

Lopuksi saadaan suoraan valmista standardien mukaista käyttöliittymää, joka toimii suoraan eri näyttölaitteissa.

Responsiivisuus tukee hyvin nykyaikaista vesiputousmallista suunnittelua, jossa tarkoituksena on tuottaa nopeasti yksi asia kerrallaan. Kun nähdään yhden vaiheen tulokset, voidaan katsoa seuraavaa vaihetta. Voi olla, että seuraava vaihe on jotain muuta kuin oli aluksi ajateltu.

Käytettävyys

Jotta sivuista saadaan toimivia ja käyttäjälle selkeitä, on niiden suunnittelun perusajatuksena pidettävä käytettävyyttä. Perinteisiä ajatusmalleja ei ole suositeltavaa siirtää suoraan uusiin sivupohjiin. Myöskään saavutettavuus ei saisi olla käytettävyyden esteenä.

Artikkelissa olleita avainsanoja

Skrollaus
(Näytön vieritys) = Sivulla liikkuminen sivusuunnassa tai alaspäin, jolloin kaikki sivun aineisto saadaan esille.

Suurennusohjelma
Ohjelma, joka suurentaa halutun osan tietokoneen näytöllä olevasta informaatiosta. wikipedia.org/wiki/Suurennusohjelma

Skaalautuvuus
skaalautuva sivu taipuu erilaisille näytöille ja päätelaitteille materiaalin ja sivun eri osion supistuessa tai laajentuessa tarpeen mukaan. Vastine on kiinteälevyinen sivu, jossa sivun rinnakkaisilla elementeillä on kiinteä mitoitus.

Responsiivisuus
Responsiivinen design (responsive design) = Sivu mukautuu eri päätelaitteille ja sisällön rakenne ja asettelu suunnitellaan niin, että se sopii hyvin laitteen normaalille käyttötavoille. Responsiivisuutta voidaan kutsua parannelluksi mukautuneeksi sivuksi.

Vesiputousmalli
Vesiputousmalli on vaiheellinen ohjelmistotuotantoprosessi, jossa suunnittelu- ja toteutusprosessi etenee vaihe vaiheelta alaspäin kuin vesiputouksessa. wikipedia.org/wiki/Vesiputousmalli

HTML
(Hypertext Markup Language) = Hypertekstin lähinnä sivujen rakenteen (ja ulkoasun) kuvaukseen käytettävä merkintäkieli.

html5
perustuu HTML kielen, CSS3:n ja JavaScriptin yhdistämiseen ja on uusi versio HTML-merkintäkielestä. wikipedia.org/wiki/HTML5

CSS
Www-sivujen ulkoasun määrittelytekniikka (Cascading Style Sheets, CSS). Tyylitiedostolla määritellään sivuston ulkoasu. Kun sivuilta viitataan samaan tyylitiedostoon, saadaan sivustolle yhtenäinen, helposti ylläpidettävä ja muokattava ulkoasu.

Eheys
(Integrity) Tiedon yhtäpitävyys alkuperäisen tiedon kanssa. Esimerkiksi mobiilisivulta löytyvät kaikki tiedot eikä vain supistettua versiota.

Saavutettavuus
(accessibility) Tieto on saatavilla myös toimintarajoitteisille esim. näkövammaisille.

Saavutettavuus
(Accessibility) (reachability?) Ominaisuus, joka kertoo kuinka helposti järjestelmä, laite, ohjelma tai palvelu on saatavilla käyttäjälle. Osittainen synonyymi saavutettavuudelle.

Saatavuus
tavoitettavuus

Käytettävyys
(Usability) = Ominaisuus, joka ilmentää, miten järjestelmä, laite, ohjelma tai palvelu soveltuu suunniteltuun käyttöönsä kaikille käyttäjille. esimerkiksi sivustossa liikkuminen on selkeää ja helppokäyttöistä.

Ymmärrettävyys
(understandability) = Tekstin kieli ja terminologia on ymmärrettävää ja selkeää.

Selainriippumattomuus
Standardeja käyttävä sivu, jolloin sivua voi lukea millä tahansa selaimella.

Esteettömyys
rakennetun ympäristön toimivuus




Apuväline, iso suurennuslasi valolla

Saavutettavuustestaus

Saavutettavuustestauksen tulokset palvelevat näkövammaisten käyttäjien ohella kaikkia sivustojen käyttäjiä Kun sivuston suunnittelussa otetaan huomioon saavutettavuus ... Lue saavutettavuus­testaamisesta lisää

Apuväline, iso suurennuslasi valolla

Tilaa saavutettavuus­testaus

Millaisen saavutettavuus­testauksen tarvitset? Nopeasti ajateltuna uusin WCAG 2.1 ohjeiden­mukainen testaus... Lue lisää millaisen saavutettavuus­testauksen ja saavutettavuus­selosteen tarvitset

Kännykän teksti on himmeä

Testaa tekstin ja taustan väri

Värien selkeä kontrasti tekee sivuston helppolukuiseksi ja miellyttäväksi. Kyse on kirkkauserosta kahden värin välillä jossa kynnystaso on 125, ja värierosta tekstin ja taustavärin välillä, jossa .. Testaa tekstin ja taustan väri

Testausohjeet, liikennevaloissa on vihreä valo

Testausohjeet verkkosivun tekijälle

Hyvä suunnittelu helpottaa sivujen tekemistä. Lisäksi se auttaa sivujen yhtenäisyyden ja tyylikkään/siistin ulkoasun saavuttamisessa. Muutosten tekeminen . Lue testausohjeista lisää

kuva kävelytunnelista

Onko saavutet­tavuudella väliä?

Verkkosivujen tuottajien ja ostajien kannattaa sivustoja tehdessään ottaa huomioon niiden saavutet­tavuus. Huonosti toteutetuista sivustoista voi saada enemmän negatiivista .... Lue lisää onko saavutet­tavuudella väliä

Saavutettavuus ei toteudu, tummat kierreportaat nousevat ylöspäin

Jos saavutet­tavuus ei toteudu?

Vaikka sivustolla olisi tehty saavutettavuus­testaus ja se täyttäisi kaikki kriteerit, on mahdollista, ettei sivusto ole saavutettava tai ymmär­rettävä... Lue lisää jos saavutet­tavuus ei toteudu

Kaupassa otetaan tabletilla kuvaa hedelmätiskin hintalapusta

Kamera arjen apuna

näkö on väliaikaisesti tai pysyvästi heikentynyt esim. onnettomuuden tai sairauden vuoksi. Eri tilanteissa kamera voi olla suuri apu ongelmien ratkaisemiseen. Lue lisää kamerasta arjen apuna

Palstoitettu www sivu

Sivun palstoitus

Aiemmissa saavutettavuus­suosituksissa on suositeltu tekemään sivusta myös palstoittamaton vaihtoehto. Tätä tarvittiin vanhempien ruudunluku­ohjelmien vuoksi, Lue palstoituksesta lisää

Saavutettavuutta vuodesta 2003 lähtien

Kokko-Kokki Oy
Rapakivenkuja 1 C 45, 00710 Helsinki
Gsm 040 5594 739 | email: saavutettavuus[at]omat.fi

Päivitetty 29.03.2017 Webmaster