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.
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.
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ä.
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.
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ä.
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
Saavutettavuustestauksen tulokset palvelevat näkövammaisten käyttäjien ohella kaikkia sivustojen käyttäjiä Kun sivuston suunnittelussa otetaan huomioon saavutettavuus ...
Lue saavutettavuustestaamisesta lisää
Millaisen saavutettavuustestauksen tarvitset?
Nopeasti ajateltuna uusin WCAG 2.1 ohjeidenmukainen testaus...
Lue lisää millaisen
saavutettavuustestauksen ja saavutettavuusselosteen tarvitset
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
Hyvä suunnittelu helpottaa sivujen tekemistä. Lisäksi se auttaa sivujen yhtenäisyyden ja tyylikkään/siistin ulkoasun saavuttamisessa. Muutosten tekeminen .
Lue testausohjeista lisää
Verkkosivujen tuottajien ja ostajien kannattaa sivustoja tehdessään ottaa huomioon niiden saavutettavuus. Huonosti toteutetuista sivustoista voi saada enemmän negatiivista ....
Lue lisää onko saavutettavuudella väliä
Vaikka sivustolla olisi tehty saavutettavuustestaus ja se täyttäisi kaikki kriteerit, on mahdollista, ettei sivusto ole saavutettava tai ymmärrettävä...
Lue lisää jos saavutettavuus ei toteudu
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
Aiemmissa saavutettavuussuosituksissa on suositeltu tekemään sivusta myös palstoittamaton vaihtoehto. Tätä tarvittiin vanhempien ruudunlukuohjelmien 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