Täällä Qodessa tuomme kauneutta WordPressiin. Se on kirjaimellisesti mottomme. Mutta tämä ei tarkoita, että kannatamme tyylin asettamista sisällön edelle. Esteettömyyssuunnittelu on tärkeä näkökohta. Olipa sisältösi suunnattu nimenomaan vammaisille tai ei, ei voi koskaan olla huono asia, jos ajattelet eri tavalla kehittyneitä vierailijoita, jotka saattavat kuitenkin arvostaa sitä, mitä sinulla on tarjottavana. Tässä artikkelissa käsittelemme useita asioita, joita voit tehdä parantaaksesi WordPress-verkkosivustosi saavutettavuutta. Mutta ennen kuin siirrymme suoraan messinkitappiin, sanokaamme muutama sana WordPressin esteettömyyssuunnittelusta.
Yleisesti ottaen verkon saavutettavuus tarkoittaa, että verkkosivustojen suunnittelijat ryhtyvät toimiin varmistaakseen tämän vammaiset ihmisetkognitiivisia, visuaalisia, kuulo-, neurologisia tai muita voi käyttää verkkosivustoa.
Erityisesti saavutettavuuden suunnittelu tarkoittaa niiden vierailijoiden huomioimista, joilla on vamma, joka saattaa estää heitä nauttimasta ainakin kaikista verkkosivustosi ominaisuuksista tai jopa estää heitä pääsemästä sisältöösi äärimmäisissä olosuhteissa. Asian ydin on se esteetön muotoilu tarkoittaa UX-edustusta eri kykyisille.
Suunnittelun parhaat käytännöt sisältävät nyt useita tekniikoita, joiden avulla voit parantaa saavutettavuutta ja tehdä WordPress-verkkosivustostasi helpommin käytettävän ihmisille, jotka eivät voi käyttää sitä ilman apua. Tämä ei tarkoita, että esteettömyyden suunnittelu hyödyttäisi vain vammaisia kävijöitä. Se voi myös hyödyttää väliaikaisesti vammaisia, kuten ne, jotka ovat saattaneet rikkoa käsivarren tai menettää tilapäisesti näön silmäleikkauksen vuoksi, ihmiset, joilla on erittäin hidas yhteys, tai ihmiset, jotka haluavat vain tekstiään audiomuodossa.
Tämä kaikki tarkoittaa, että esteetön suunnittelu ei palvele vammaista vähemmistöä, vaan sen sijaan parantaa yleistä käyttökokemusta – ja mahdollista yleisömäärän kasvua.
Voit testata verkkosivujesi käytettävyyttä käyttämällä jotakin seuraavista useita verkkopohjaisia saavutettavuuden arviointityökaluja, kuten FAE, Achecker tai AALTO. Näistä WAVE oli nopein ja käyttäjäystävällisin. Liitä vain verkkosivun osoite osoitekenttään ja napsauta nuolikuvaketta saadaksesi raportin.
Olemme laatineet raportin artikkelista The Guardianin kansainvälisestä painoksesta, ja voimme helposti nähdä, mitkä alueet kaipaavat parantamista, koska ne on merkitty kuvakkeilla. Jos haluat tarkastella ongelmaa yksityiskohtaisesti, napsauta kuvaketta ja lue työkaluvinkki. Näin tiedät, kuinka ratkaista jokainen ongelma.
WAVE-kehittäjät ovat myös tarjonneet laajennuksia Chromelle ja Firefoxille, jonka avulla voit palauttaa saavutettavuusraportin lähettämättä tietoja WAVE-palvelimille, mikä tekee siitä mahdollisimman turvallisen.
WordPress-kehittäjät ovat perustaneet saavutettavuuden standardit kaikille uudelle koodille ja a parhaat käytännöt ohjekirja koodaajille, esimerkkejä koodista. Sinun ei kuitenkaan tarvitse osata koodata tehdäksesi verkkosivustostasi helpommin saavutettavissa.
Otsikot
Esimerkiksi, hyvä otsikkorakenne on erittäin tärkeä henkilöille, jotka käyttävät ohjelmistoja, kuten näytönlukuohjelmia. Tekstin suurentaminen ja lihavoitu ei saa näytönlukuohjelmaa ymmärtämään, että teksti on otsikko. Käytä Otsikko lohko Gutenbergissä, Otsikko-elementti Elementorissa tai otsikkotunnisteet, kuten
Classic-editorissa. Otsikko 1 on pääsivun otsikko, eikä sitä tule käyttää mihinkään muuhun.
Tekstin sisäinen rakenne tulisi jakaa alaryhmiin käyttämällä otsikoita 2–6, tasoja ohittamatta. Vältä myös lisätoimintojen, kuten linkkien, lisäämistä otsikoihin. Sitä vastoin sinun ei pitäisi käyttää otsikoita pelkästään esteettisiin tarkoituksiin. Sitä varten kirjasinkoko ja -tyyli on tarkoitettu. Hyvä otsikkorakenne ei pelkästään auta käyttäjiä näytönlukijoiden käytössä – se tarkoittaa myös parempaa hakukoneoptimointitulosta.
Linkit
Kun luot linkkejä, sinun tulee varmista, että asiayhteydestä käy selvästi ilmi, mikä on ja mikä ei ole linkki. Jos linkin ympärillä on muuta tekstiä, parhaiden käytäntöjen mukaan se tulee alleviivata ja eri värillä.
Vaihtoehtoisten attribuuttien lisääminen kuviin
Alt-attribuuttien lisääminen kuviin tekee niistä ”luettavia” näytönlukuohjelmalle, ja se on erittäin helppo tehdä. Sinun tarvitsee vain käyttää mitä tahansa mediakirjastosi kuvaa.
Oikeanpuoleisesta valikosta löydät Alt-tekstiruudun. Yksinkertaisesti sanottuna merkityksellinen kuvaus kuvasta, joka meidän tapauksessamme on puhtaasti koristeelliseen tarkoitukseen tarkoitettu maisemavalokuva, joka ei vaadi muuta kuin yksinkertaista kuvausta.
Verkkosivuston lukijaa käyttävällä henkilöllä on nyt kuvan tekstillinen kuvaus. Tätä mediatiedostojesi toimintoa sinun ei pidä jättää huomiotta – se voi vaikuttaa SEO-pisteeseesi. Jos haluat tietää lisää, meillä on kattava opas vaihtoehtoisten tekstien ja kuvien otsikoille.
Jotkut väripaletit voivat aiheuttaa ongelmia käyttäjille, jotka kärsivät huonosta näköstä, värisokeudesta ja vastaavista sairauksista. Yleisesti ottaen, mitä enemmän kontrastia, sitä parempi siitä huolimatta liian suuri kontrasti voi aiheuttaa ongelmia ihmisille, joilla on herkkäsilmäisyys. Tämä ei koske vain tekstiä ja taustaa, vaan myös elementtejä (kuten painikkeita, kuvakkeita, valikkoja ja muita) ja hover-tehosteita. Lisätietoja tekstin värien muuttamisesta WordPressissä on perusteellisessa oppaassamme.
Suositeltu taustan ja etualan valoisuuden kontrastisuhde on 4,5:1 normaalille tekstille tai 3:1 suurelle tekstille. Kontrastisuhteiden tarkistamiseen voit käyttää lukuisia työkaluja, kuten WebAIM-kontrastitarkistus. AALTO, koska se on kattava työkalu, korostaa myös sivustosi suunnittelun kontrastia.
Lomakkeet ovat tärkeä osa verkkovuorovaikutusta. Voit tehdä niistä helpommin saatavuuden muutaman asian avulla.
Ensinnäkin hyvä merkintä on tärkeää. Merkitse kaikki kentäsi oikein ja selkeästi. Toiseksi, käytä paikkamerkkitekstiä – esimerkkejä teksteistä, jotka vierailijoiden on syötettävä lomakkeisiin. Jos esimerkiksi odotat URL-osoitetta, käytä jotain vastaavaa www.sivustosi.fi paikkamerkkiä varten. Lopuksi, täydelliset ohjeet lomakkeen täyttämiseen voi olla suuri apu näkövammaisille.
Ei ole yllätys, että on olemassa useita työkaluja, joiden avulla voit korjata joitain yleisiä WordPress-verkkosivustojen esteettömyyteen liittyviä ongelmia. Laajennus, jonka havaitsimme mahdollisesti hyödyllisimmäksi, on WP:n saavutettavuus. Opastamme sinut joihinkin sen tärkeisiin ominaisuuksiin.
Kun olet asentanut ja aktivoinut laajennuksen, sinun on määritettävä se. Navigoida johonkin Esteettömyysasetukset alkaen Asennetut laajennukset näyttö kojelaudassasi.
Jotta verkkosivustosi olisi helpommin saavutettavissa verkkosivuston lukijoille, voit lisätä ohituslinkit. Ohituslinkit saavat lukijat keskittymään sisältöön sen sijaan, että heidän olisi ensin luettava kaikki valikot ja otsikkotiedot. Ohituslinkkien määrittäminen vaatii hieman koodituntemusta, joten emme mene yksityiskohtiin tässä. Se tarjoaa käyttäjillesi painikkeen, jolla he voivat ohittaa tarpeettoman sisällön ja siirtyä suoraan asian ytimeen. Sinun tarvitsee vain määrittää ID-attribuutti sille, minne haluat linkin vievän vierailijasi.
Seuraavaksi ovat Esteettömyystyökalupalkin asetukset. Jos tarkistat Lisää esteettömyystyökalupalkki, jossa on fontin koon säätö ja kontrastin vaihtokytkin, käyttäjäsi näkee työkalupalkin näytönsä reunassa.
Tämän avulla he voivat tarkastella suurikontrastista versiota verkkosivustostasi…
…tai suurentaaksesi pääfonttia.
Emme mene työkalupalkin asetusten yksityiskohtiin, mutta voit testata useita vaihtoehtoja, ennen kuin otat ne käyttöön vierailijoillesi.
Seuraavaksi sinulla on Muut asetukset -osio.
Voit selata kaikkia näitä yksitellen ja nähdä, mitkä niistä toimivat parhaiten verkkosivustollesi. Esimerkiksi verkkosivustosi voi käyttää RTL-tekstikieltä (oikealta vasemmalle) – laajennuksen ja verkkosivuston lukijan on tiedettävä tämä. Voit haluta kuvillesi pidemmät kuvaukset, ja siihen on myös mahdollisuus.
Kolme näistä valintaruuduista on valittuna oletusarvoisesti: linkeissä ei ole kohdeattribuuttia, verkkosivusto palauttaa hakuvirheen, kun hakukenttä ei sisällä merkkijonoa, ja tabindex poistetaan tarkennettavista elementeistä.
Seuraavaksi sinulla on Poista otsikon attribuutit -osio. Tämä kertoo verkkosivuston lukijalle, että jotkin asettelun kohteet eivät ole otsikoita. Suosittelemme, että käyt tämän läpi ja poistat title-attribuutin kaikesta, joka ei sitä tarvitse.
Sinulla on myös kätevä kontrastin tarkistustyökalu. Valitse vain käyttämäsi värit tai liitä niiden heksadesimaalikoodit asianmukaisiin kenttiin ja tarkista, ovatko kontrastisuhteesi oikeat.
Tiivistettynä
Kuten olemme osoittaneet, voit tehdä verkkosivustostasi helpommin saatavuuden monin tavoin. Vältä sitä sudenkuoppaa, jonka mukaan esteetön muotoilu on pelkkä vähemmistön majoittaminen – itse asiassa teet vain houkuttelevan laajemman kävijäjoukon ja panostat vain vähän enemmän aikaa ja vaivaa mahdollisiin suuriin tuotoihin. Puhumattakaan siitä, että jotkut näistä tekniikoista voivat parantaa merkittävästi SEO-pisteitäsi. Miksi et haluaisi hyödyntää sitä?
Tue työtämme ❤️
Jos pidit tästä artikkelista, harkitse tipin antamista, jotta voimme jatkaa laadukkaan sisällön julkaisemista.
