Yksi kilpailija näyttää viimeistellyltä joka ruudulla. Toinen näyttää ahtaalta ja vanhanaikaiselta, vaikka molemmat myyvät samanlaisia palveluja. Ero johtuu yleensä siitä, miten verkkosivu tehdään ADA-yhteensopivaksi, ja sen taustalla olevista tavoista. Huomaat eron heti, vaikka et osaisi vielä nimetä kaikkia sääntöjä.
Verkkosivun tekeminen ADA-yhteensopivaksi tarkoittaa kontrastia, vaihtoehtoisia tekstejä, näppäimistökäyttöä ja selkeää rakennetta. Tässä luvussa kerrotaan selkeästi, mitä tämä tarkoittaa, miksi se vaikuttaa verkkosivuusi ja markkinointiisi ja miten voit soveltaa sitä ilman alan sanahelinää. Näet myös, miten saavutettava verkkosivusuunnittelu liittyy samaan kokonaisuuteen. Käydään asia läpi askel kerrallaan.
Mitä ADA-yhteensopivuus tarkoittaa käytännössä
Verkkosivun tekeminen ADA-yhteensopivaksi tarkoittaa kontrastia, vaihtoehtoisia tekstejä, näppäimistökäyttöä ja selkeää rakennetta.
Vaatimusten täyttäminen on jatkuvaa työtä, kun lisäät sisältöä ja toimintoja.
Saavutettavan verkkosivusuunnittelun periaatteet menevät pitkälti päällekkäin hyvän käyttökokemuksen kanssa.
Näin teet verkkosivustasi ADA-yhteensopivan
Julkaise saavutettavuusseloste, jossa kerrot sitoutumisestasi ja yhteydenottotavasta.
Aloita yhdestä sivusta, esimerkiksi etusivusta tai pääasiallisesta laskeutumissivusta. Korjaa suurin ongelma ensin ja vie sama ratkaisu sitten muihin pohjiin.
Lue tämän luvun kanssa ADA-yhteensopiva verkkosivusuunnittelu perustaksi ja verkkosivun saavutettavuusseloste seuraavaksi askeleeksi tässä osiossa.
Käytännön tarkistuslista, jota voit käyttää heti
Julkaise saavutettavuusseloste, jossa kerrot sitoutumisestasi ja yhteydenottotavasta.
Kun käyt läpi jotakin sivua, kysy, näkyykö ADA-yhteensopivuuden parantaminen jo ensimmäisellä vierityksellä mobiilissa. Jos ei näy, vaihda osioiden järjestystä ennen kuin viilaat yksityiskohtia.
Tallenna kuvakaappaukset ennen muutoksia ja niiden jälkeen, jotta näet, mikä muutos auttoi sivustosi ADA-yhteensopivuudessa.
Jaa tämä tarkistuslista kaikille, jotka päivittävät sivustoasi, jotta saavutettava verkkosivusuunnittelu pysyy yhtenäisenä uusillakin sivuilla.
Valitse yksi mittari seurattavaksi tässä kuussa, esimerkiksi sivulla vietetty aika tai lomakkeiden aloitukset. Näin muutokset kytkeytyvät liiketoiminnan tuloksiin eivätkä jää pelkän maun varaan.
Miten aihe liittyy laajempaan brändiisi
Visuaaliset valinnat eivät koske vain yhtä sivua. Saavutettavan verkkosivusuunnittelun periaatteet menevät pitkälti päällekkäin hyvän käyttökokemuksen kanssa.
Sosiaalisen median julkaisujesi, sähköpostiesi ja painotuotteidesi pitäisi toistaa samaa hierarkiaa, samoja värejä ja samoja kirjasinsääntöjä kuin verkossa.
Kun brändin ilme alkaa hajota, asiakkaat aistivat pienen epäsuhdan, vaikka eivät osaisi selittää sitä.
Käytä sivua verkkosivun saavutettavuusseloste vertaillaksesi muistiinpanojasi tämän osion toiseen lukuun.
Vaatimusten täyttäminen on jatkuvaa työtä, kun lisäät sisältöä ja toimintoja.
Kysymyksiä, jotka usein unohtuvat
Lisähakusanat, kuten saavutettava verkkosivusuunnittelu ja verkkosivun saavutettavuusseloste, auttavat sinua löytämään syvällisempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Saavutettavan verkkosivusuunnittelun periaatteet menevät pitkälti päällekkäin hyvän käyttökokemuksen kanssa.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat tällä viikolla toimivalla sivulla. Pienet mitatut muutokset voittavat epämääräiset suunnitelmat.
Kun tiimisi käyttää samoja käsitteitä ADA-yhteensopivuudesta, korjauskierroksia suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän.
Työkalut, jotka helpottavat visuaalisia päivityksiä
Moniin asettelu- ja tyyliongelmiin et tarvitse omaa koodia. Visuaalisessa editorissa voit säätää välejä, värejä ja kirjasimia ja katsoa samalla mobiili- ja työpöytänäkymää.
WEMASY sisältää Sivustonrakentajan visuaalisella muokkauksella, joten voit julkaista muutokset odottamatta kehittäjää jokaiseen pieneen säätöön. Avaa Sivustonrakentaja, kun olet valmis soveltamaan oppimaasi.
Kun julkaiset päivityksiä, lue uudelleen ADA-yhteensopiva verkkosivusuunnittelu ja osallistava suunnittelu, jotta kokonaisuus pysyy mielessäsi.
Sinulla on nyt toimiva tapa katsoa sivustosi ADA-yhteensopivuutta. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointimateriaaleja tai ohjeistat suunnittelijaa. Jatka sivuilla osallistava suunnittelu ja verkkosivun saavutettavuusseloste, niin vauhti säilyy tässä osiossa.
Usein kysytyt kysymykset
Kuinka kauan ADA-yhteensopivuuden parantaminen kestää?
Useimmat pienyritykset saavat sivunsa selkeämmiksi muutamassa keskittyneessä työvaiheessa, kun soveltavat tämän luvun perusteita. Aloita etusivusta ja ota samat säännöt käyttöön palvelu- ja yhteystietosivuilla.
Tarvitsetko suunnittelijan ADA-yhteensopivuuden parantamiseen?
Suunnittelija auttaa laajoissa brändiuudistuksissa, mutta moni ADA-yhteensopivuuteen liittyvä asia on helppo hoitaa itse, kun tiedät, mitä etsiä. Käytä tämän luvun rinnalla sivua ADA-yhteensopiva verkkosivusuunnittelu, niin saat aiheesta lisää tietoa.
Voiko WEMASY auttaa tekemään verkkosivustasi ADA-yhteensopivan?
WEMASYn Sivustonrakentajassa on visuaalinen editori, jolla voit säätää asettelua, värejä ja kirjasimia ilman koodia. Avaa Sivustonrakentaja, niin voit päivittää pohjia ja esikatsella muutoksia mobiilissa.
Mikä on yleisin virhe ADA-yhteensopivuuden kanssa?
Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että etenisivät yksi sivu kerrallaan. Valitse yksi tärkein tavoite, esimerkiksi luettavuus tai kontrasti, ja katso sitten sivulta osallistava suunnittelu seuraava parannus.
Miten ADA-yhteensopivuus liittyy SEO:hon?
Selkeä visuaalinen hierarkia ja luettava teksti pitävät kävijät sivulla pidempään, mikä tukee sitä, mitä hakukoneet seuraavat. Yhdistä suunnittelun korjaukset hyvään sisältörakenteeseen, niin tulokset ovat parhaat.
Mitä kannattaa opiskella seuraavaksi ADA-yhteensopivuuden jälkeen?
Jatka tämän kirjan sivuilla ADA-yhteensopiva verkkosivusuunnittelu ja osallistava suunnittelu, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.