{"id":134,"date":"2022-11-01T10:05:33","date_gmt":"2022-11-01T08:05:33","guid":{"rendered":"https:\/\/papunet.net\/saavutettavuus\/?page_id=134"},"modified":"2023-04-03T10:54:12","modified_gmt":"2023-04-03T07:54:12","slug":"saavutettavien-verkkosivujen-suunnitteluopas","status":"publish","type":"page","link":"https:\/\/papunet.net\/saavutettavuus\/ohjeita-ja-oppaita\/saavutettavien-verkkosivujen-suunnitteluopas\/","title":{"rendered":"Saavutettavien verkkosivujen suunnitteluopas"},"content":{"rendered":"\n\n
\n
\"\"<\/figure>
\n

Suunnittele selke\u00e4t sivupohjat<\/h2>\n\n\n\n

Varmista, ett\u00e4 p\u00e4\u00e4sis\u00e4lt\u00f6 erottuu selke\u00e4sti sivun\u00e4kym\u00e4n muista osioista.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Suunnittele selkeit\u00e4 lomakkeita<\/h2>\n\n\n\n

Varmista, ett\u00e4 kaikki sivustolla olevat lomakkeet ovat selkeit\u00e4, loogisia ja k\u00e4ytett\u00e4vi\u00e4 my\u00f6s avustavilla teknologioilla.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Lis\u00e4\u00e4 tekstivastineet kaikelle ei-tekstuaaliselle sis\u00e4ll\u00f6lle<\/h2>\n\n\n\n

Kaikille kuville, videoille ja \u00e4\u00e4nitiedostoille t\u00e4ytyy olla vaihtoehtoinen esitystapa n\u00e4k\u00f6- ja kuulorajoitteisia k\u00e4ytt\u00e4ji\u00e4 varten.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Tee sivuston interaktiivisista elementeist\u00e4 tunnistettavia<\/h2>\n\n\n\n

Varmista, ett\u00e4 linkeist\u00e4, painikkeista ja muista interaktiivisista kohteista k\u00e4y ilmi, mit\u00e4 tapahtuu, kun niit\u00e4 k\u00e4ytet\u00e4\u00e4n.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Tekstin koko ja kirjasintyyppi<\/h2>\n\n\n\n

Kirjoita riitt\u00e4v\u00e4n suurta teksti\u00e4 ja k\u00e4yt\u00e4 selke\u00e4\u00e4, p\u00e4\u00e4tteet\u00f6nt\u00e4 kirjasintyyppi\u00e4.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Looginen lukemisj\u00e4rjestys<\/h2>\n\n\n\n

Varmista, ett\u00e4 sivun lukemisj\u00e4rjestys on ruudunlukuohjelmalla ja n\u00e4pp\u00e4imist\u00f6ll\u00e4 k\u00e4ytett\u00e4ess\u00e4 sama kuin visuaalisesti.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

K\u00e4yt\u00e4 selke\u00e4\u00e4 ja ymm\u00e4rrett\u00e4v\u00e4\u00e4 kielt\u00e4<\/h2>\n\n\n\n

Kirjoita sis\u00e4ll\u00f6t selke\u00e4ll\u00e4 ja hyv\u00e4ll\u00e4 yleiskielell\u00e4. V\u00e4lt\u00e4 monimutkaisia lauserakenteita, sanontoja ja hankalien sanojen k\u00e4ytt\u00f6\u00e4.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Varmista, ett\u00e4 sivustolta ladattavat tiedostot ovat saavutettavia<\/h2>\n\n\n\n

My\u00f6s sivustolta ladattavien tiedostojen, kuten PDF-dokumenttien, on oltava saavutettavia.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

K\u00e4yt\u00e4 taulukkoja harkiten<\/h2>\n\n\n\n

K\u00e4yt\u00e4 taulukkoja vain suurten datamassojen esitt\u00e4miseen. \u00c4l\u00e4 k\u00e4yt\u00e4 taulukkoja muotoilutarkoitukseen.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Suunnittele sivun otsikkorakenne huolellisesti<\/h2>\n\n\n\n

Varmista, ett\u00e4 sivun p\u00e4\u00e4sis\u00e4ll\u00f6ll\u00e4 on yksi ensimm\u00e4isen tason otsikko. Otsikkorakennetta voi ajatella ik\u00e4\u00e4n kuin sivun\u00e4kym\u00e4n sis\u00e4llysluettelona.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Nime\u00e4 linkit ja otsikot ymm\u00e4rrett\u00e4v\u00e4sti<\/h2>\n\n\n\n

Linkin nimest\u00e4 tulee k\u00e4yd\u00e4 ilmi, mihin se vie k\u00e4ytt\u00e4j\u00e4n ja otsikon nimest\u00e4 tulee selvit\u00e4, mit\u00e4 sen alla on.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Muista riitt\u00e4v\u00e4 tummuuskontrasti<\/h2>\n\n\n\n

Tekstin ja elementtien sek\u00e4 taustan v\u00e4lisen tummuuskontrastin on oltava riitt\u00e4v\u00e4.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Lis\u00e4\u00e4 \u201dHypp\u00e4\u00e4 sis\u00e4lt\u00f6\u00f6n\u201d-linkki<\/h2>\n\n\n\n

Sivun\u00e4kym\u00e4n ensimm\u00e4isen elementin kannattaa olla \u201dHypp\u00e4\u00e4 sis\u00e4lt\u00f6\u00f6n\u201d-niminen linkki, joka siirt\u00e4\u00e4 k\u00e4ytt\u00e4j\u00e4n suoraan sivun p\u00e4\u00e4sis\u00e4lt\u00f6\u00f6n.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Lis\u00e4\u00e4 jokaiselle sivulle linkki sivuston etusivulle<\/h2>\n\n\n\n

Jokaisessa sivun\u00e4kym\u00e4ss\u00e4 on oltava helposti l\u00f6ydett\u00e4v\u00e4 linkki koko sivuston etusivulle.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Varmista, ett\u00e4 sis\u00e4ll\u00f6lle on m\u00e4\u00e4ritelty kieli<\/h2>\n\n\n\n

Sis\u00e4ll\u00f6lle pit\u00e4\u00e4 m\u00e4\u00e4ritell\u00e4 kieli HTML-koodiin, jotta esimerkiksi ruudunlukuohjelmat ja hakukoneet voivat p\u00e4\u00e4tell\u00e4 sivuston kielen ohjelmallisesti.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Asioiden korostaminen<\/h2>\n\n\n\n

K\u00e4yt\u00e4 useaa erilaista visuaalista keinoa kohteiden korostamiseen ja merkityksen v\u00e4litt\u00e4miseen.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Automaattisesti k\u00e4ynnistyv\u00e4 mediasis\u00e4lt\u00f6<\/h2>\n\n\n\n

\u00c4l\u00e4 k\u00e4yt\u00e4 verkkosivuilla pitki\u00e4, itsest\u00e4\u00e4n k\u00e4ynnistyvi\u00e4 mediasis\u00e4lt\u00f6j\u00e4. Varmista, ett\u00e4 k\u00e4ytt\u00e4j\u00e4n on helppo pys\u00e4ytt\u00e4\u00e4 mediasis\u00e4lt\u00f6.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Sivun nime\u00e4minen (title)<\/h2>\n\n\n\n

Nime\u00e4 verkkosivuston jokainen yksitt\u00e4inen alasivu ymm\u00e4rrett\u00e4v\u00e4sti ja selke\u00e4sti.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

N\u00e4kyv\u00e4 kohdistin<\/h2>\n\n\n\n

Varmista, ett\u00e4 jokaisen toiminnallisen elementin ymp\u00e4rille piirtyy reunat, kun verkkosivua selataan k\u00e4ytt\u00e4en sarkainta (Tab \u21b9)<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Sis\u00e4ll\u00f6n m\u00e4\u00e4r\u00e4<\/h2>\n\n\n\n

Kiinnit\u00e4 huomiota siihen, ettei sivun\u00e4kym\u00e4ss\u00e4 ole liikaa sis\u00e4lt\u00f6\u00e4 ja erilaisia kohteita.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

K\u00e4ytt\u00e4j\u00e4n sijainti sivulla<\/h2>\n\n\n\n

Varmista, ett\u00e4 k\u00e4ytt\u00e4j\u00e4n on helppo p\u00e4\u00e4tell\u00e4, miss\u00e4 kohtaa sivustoa h\u00e4n sijaitsee.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n\n

\n
\"\"<\/figure>
\n

Hakutoiminto<\/h2>\n\n\n\n

Lis\u00e4\u00e4 keskisuurille ja suurille sivustoille hakutoiminto.<\/p>\n<\/div>\n<\/div>\n<\/a>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":10,"featured_media":0,"parent":11,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-134","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/pages\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":0,"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/pages\/134\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/pages\/11"}],"wp:attachment":[{"href":"https:\/\/papunet.net\/saavutettavuus\/wp-json\/wp\/v2\/media?parent=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}