Verkon saavutettavuuden tarkistuslista

Saavutettavuus on käytäntö, jolla varmistetaan, että verkkosivustot ovat yhtä hyvin vammaisten saatavilla, joten heillä on yhtäläinen pääsy kyseisten sivustojen tarjoamiin tavaroihin ja palveluihin. Se on olennainen osa ammattimaista web-suunnittelua ja kehittämistä.


Contents

Miksi sinun pitäisi välittää saavutettavuus?

On monia syitä, miksi kehittäjien, suunnittelijoiden ja heidän työnantajien / asiakkaiden tulisi varmistaa, että saavutettavuus on varhainen ja olennainen osa web-kehitysprosessia..

  • Monilla alueilla, kuten Yhdysvalloissa, EU: ssa, Isossa-Britanniassa, Israelissa ja Japanissa, on lakisääteinen vaatimus olla syrjimättä ihmisiä heidän vammaisuutensa vuoksi. Yhdysvalloissa viime vuonna, ADA-verkkosivustolle nostettiin 2 235 uutta oikeusjuttua liittovaltion tuomioistuimessa. Se on yksi tunnissa.
  • Esteettävät sivustot ovat yleensä paremmin koodattuja, vankempia ja sijoittuvat hyvin hakukoneille.
  • Esteetöntä sivustoa yleensä paremmin käytettävä vammaisille vierailijoille, mikä johtaa suurempaan tyytyväisyyteen ja kääntymiseen.
  • Pääsykelvottomat sivustot ovat haitallisia liiketoiminnalle. Vuonna 2019, a Yhdistyneen kuningaskunnan kysely havaitsi, että yli 4 miljoonaa ihmistä hylkäsi vähittäiskaupan verkkosivut löytämiensä esteiden takia. Menetyn yrityksen, Click-Away Pound, liikevaihto oli 17,1 miljardia puntaa. että n miljardi. Pelkästään Isossa-Britanniassa.
  • On huono asia potentiaalisten asiakkaiden vapaaehtoinen kääntäminen pois.

Yhteiset standardit ja ongelmat

Onneksi W3C: llä (runko, joka tuottaa monia standardeja, joihin verkko luottaa) on standardi siitä, kuinka verkkosivustot saadaan saataville. Sitä kutsutaan Verkkosisällön saavutettavuusohjeet (WCAG). Vaatimustasoja on kolme (A, AA, AAA), ja ‘A’ on alhaisin saavutettavuustaso. Suosittelen sinua tavoittelemaan tasoa AA.

Valitettavasti WCAG on pitkä, kuiva ja erittäin tekninen lukema, joten katsotaan, mitä voit tehdä suhteellisen helposti ja saada suurin potku vastineellesi. Tämä ei ole kaikki mitä sinun tarvitsee tietää tarkistuslista; Se on tarkistuslista yleisimmistä virheistä, ja virheet, joita vammaiset sanovat, ovat heidän pääsaineitaan, ja niillä on käytännön ehdotuksia ongelmien ratkaisemiseksi. Kaikki ulkoiset linkit avautuvat uudessa välilehdessä.

Click-Away Pound -kyselyssä vammaisilta vastaajilta kysyttiin, mitkä olivat heidän tärkeimmät ostoksensa suorittaneet esteet. Tässä ovat tärkeimmät esteet (useita vastauksia sallittiin):

  1. Tungosta sivuja, joissa on liikaa sisältöä – 66%
  2. reCAPTCHA-testit – 59%
  3. Huono luettavuus (kontrasti, tekstin asettelu) 56%
  4. Liikkuvien kuvien ja grafiikan häiriötekijä – 53%
  5. Huonojen linkkien tiedot – 59% (77% näytönlukijakäyttäjille)
  6. Lomakkeen täyttö 56%

Kuinka parantaa verkkosivustojen saatavuutta

Ensinnäkin, huomaa, että mikään viidestä parhaasta ei ole teknisiä ongelmia – ne ovat suunnittelu- tai copywriter-virheitä.

1) Liian paljon sisältöä

Lyhyesti: hajottaa teksti osiin otsikoita ja luetteloita. Käytä yksinkertaista kieltä.

On hyvin tiedossa, että kun valintojen määrä kasvaa, niin myös tietojen keräämiseen vaadittavat ponnistelut ja tehdä hyviä päätöksiä. Sama asia on liikaa sisältöä – siitä tulee pian ylivoimainen. Sisällön purkaminen välttämättömyyteen on aikaa vievä käsityö; kuten Mark Twain (väitetysti) kirjoitti: “Minulla ei ollut aikaa kirjoittaa lyhyt kirje, joten kirjoitin sen sijaan pitkän.”

Äskettäinen kirja Kirjoittaminen suunnittelee ehdottaa

Ihmiset haluavat kykynsä rajata pitkät tekstilohkot näkymästä tai äänestä riippumatta, joten on erittäin tärkeää organisoida pitkämuotoinen kirjoittaminen otsikoilla, lyhyillä kappaleilla ja muilla sisällön suunnittelun parhailla käytännöillä..

Niin:

  • Ole vain yksi

    sivulla.

  • Käytä alaotsikoita vapaasti; se hajottaa “laatta” -tekstin heikkonäköisille käyttäjille, kun taas avustavien tekniikoiden, kuten näytönlukijoiden, käyttäjät voivat käyttää pikavalintanäppäintä hypätäkseen otsikoiden välillä tai hankkiaksesi mielenkartan sisällöstä otsikkorakenteesta.
  • Älä ohita tietyn tason otsikoita. Esimerkiksi, jos käytät

    , Varmista, että sitä edeltää

    .

  • Käytä luettelomerkkejä (kuten tämä!), Jotka on merkitty oikein HTML-muodossa
      ,
    • . Näytönlukijat ilmoittavat ”Luettelo 10 tuotteesta” (ja sallivat käyttäjän hypätä niiden yli).

    Käytä tavallista englantia

    Monzo Bankin ”Äänen äänemme” opas selittää selkeän kielen merkityksen:

    Vuonna 2010 yhdysvaltalainen asianajaja Sean Flammer suoritti kokeilun. Hän pyysi 800 käräjäoikeuden tuomareita puolustamaan joko perinteistä “legalese” -periaatetta tai sellaista, jota hän kutsui “selkeäksi englanniksi”.

    Tuomarit suosivat ylivoimaisesti selkeää englanninkielistä versiota (66% – 34%), ja etusijalla ei ollut ikästään tai taustastaan ​​riippumatta.

    Flammer-muistiinpanot (PDF) englanninkielisestä versiosta:

    Se on lyhyempi melkein sivulla, joten se selvästi eliminoi tarpeettomat lauseet ja sanat. Sen lauseet ovat keskimäärin 17,8 sanaa, toisin kuin 25,2 sanaa.

    Hän päättelee:

    Meillä on nyt 25 vuotta empiiristä tutkimusta, joka johtaa väistämättömään johtopäätökseen: jos haluat miellyttää ja vakuuttaa lukijaasi, kirjoita selkeästi englanniksi.

    2) ReCAPTCHA

    Lyhyesti: älä saa käyttäjiäsi hyppäämään mahdollisesti mahdottomien kehien läpi säästääksesi kehittäjien aikaa.

    Vastaajat puhuivat usein vanhasta ReCAPTCHA-versio:

    reCAPTCHA-versiot, joissa on hämärtynyt teksti, joka sinun on kirjoitettava uudelleen

    Taistelen kuvien kanssa ja joudun kirjoittamaan numeroita tai kirjaimia. Sellaisena kuin minun on napsautettava, millä kuvilla on kauppa tai mitä tahansa, kaipaan aina jotain tai sekoitan ja kuluttaa energiaa, jota minulla ei ole…

    ReCAPTCHA: n hämärtävät kirjaintyyli on nyt vanhentunut. On paljon yleistä nähdä uudempi inkarnaatio nimeltään “No CAPTCHA reCAPTCHA” (tunnetaan myös nimellä “En ole robotti ”-valintaruutu), joka vaatii käyttäjän valintaruutua, joka vahvistaa, että he eivät ole robotteja ja joka käyttää salaa voodoo-pistettä käyttäjän pisteet. Jos ne ohittavat, lisätoimintoa ei tarvita. Jos ne epäonnistuvat, näytetään uusi haaste:

    Osittainen kuvakaappaus captchasta, joka vaatii käyttäjää napsauttamaan kaikkia neliöitä, joissa näkyvät appelsiinit

    Muista, että CAPTCHA-tyyppi, joka vaatii käyttäjää napsauttamaan kaikkia neliöitä (esimerkiksi) katumerkillä, ei ole välttämättä kansainvälinen. Kuten Terence Eden kirjoittaa, CAPTCHA: t eivät todista, että olet ihminen – ne todistavat, että olet amerikkalainen.

    ReCAPTCHA: n helpoin muoto on reCAPTCHA v3 joka ei vaadi käyttäjän vuorovaikutusta, mutta edellyttää, että teet enemmän työtä käsitelläksesi käyntejä, jotka epäonnistuvat testissä:

    Se on puhdas JavaScript-sovellusliittymä, joka palauttaa pisteet, ja antaa sinulle mahdollisuuden ryhtyä toimiin sivustosi yhteydessä: esimerkiksi vaatia todennusta koskevia lisätekijöitä, lähettää viesti moderointiin tai kuristaa robotteja, jotka saattavat raaputtaa sisältöä.

    3) Huono luettavuus

    Lyhyesti: varmista, että tekstillä on riittävä kontrasti, että se on luettavissa eikä ole perusteltu.

    • Varmista riittävä kontrasti. Yksi yleisimmistä pääsyn estäjistä verkossa on huono kontrasti tekstin ja taustan välillä. W3C-ohjeet vaativat vähintään 4,5: 1 kontrastisuhteen, paitsi suurten tekstien ja suurten tekstien kuvien, joiden kontrastisuhteen tulisi olla vähintään 3: 1 (logot ja ”satunnainen” teksti on vapautettu). On monia apuohjelmia, jotka voivat mitata kontrastisuhteita sinulle; henkilökohtainen suosikki on Ada Rose Cannonin erinomainen kontrasti-widget, joka on hyödyllinen selaimen kirjanmerkki, joka korostaa alueet, joilla sivulla ei ole riittävästi kontrastia.
    • Minulla ei ole pääoman otsikoita. On todisteita siitä, että niitä on vaikeampi lukea, koska isot kirjaimet ovat kaikki samanpituisia, joten emme voi tunnistaa yleisten sanojen muotoa. Lisäksi jotkut näytönlukijat täsmentävät isojen kirjaimien ryhmät ikään kuin ne olisivat lyhenteitä (kuten BBC, DOJ jne.). Jos sinulla on oltava kaikki isot otsikot, kirjoita ne tavalliseen tapaan HTML-koodiin ja muunna ne CSS: llä tekstimuunnos: iso kirjain.
    • Kohdista teksti vasemmalle. (Sivut oikealta vasemmalle kielellä, kuten arabia tai heprea, kohdista teksti oikealle.) Älä perustele sitä, koska tämä vaikeuttaa dyslexiaa sairastavien lukemista. British Dyslexia Associationin tyyliopas ehdottaa myös

      Käytä sans serif-fontteja, kuten Arial ja Comic Sans, koska kirjaimet saattavat näyttää olevan vähemmän tungosta. Vaihtoehtoja ovat Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) Kuvien ja grafiikan häiritseminen

    Lyhyesti: anna käyttäjien lopettaa kaikki liikkeet; kunnioittaa heidän käyttöjärjestelmän asetuksia; älä toista videota automaattisesti.

    Yksi Click-Away Pound -kyselyyn vastannut kirjoitti,

    Sivustot, joita käytin pienellä numerolla, ovat nyt tulossa ongelmaksi, koska ne ryhtyvät nyt siirtämään ilmoituksia ja lataamaan jatkuvasti lisää ilmoituksia, kun teet ostoksia.

    WCAG: n perustaso vaatii ”Kaikille liikkuville, vilkkuville tai vierittäville tiedoille, jotka (1) alkavat automaattisesti, (2) kestävät yli viisi sekuntia ja (3) esitetään samanaikaisesti muun sisällön kanssa, on olemassa mekanismi käyttäjän keskeyttää, lopettaa tai piilottaa sen, paitsi jos liikuttaminen, vilkkuva tai vieritys on osa toimintaa, jossa se on välttämätöntä ”.

    Häiriötekijä on ärsyttävää – etenkin ihmisille, joilla on ADHD tai muita kognitiivisia häiriöitä. Mutta liike ja välkkyminen voivat myös aiheuttaa kouristuksia, joten WCAG-ohjeissa vaaditaan, että sisältö ei saisi vilkkua enemmän kuin 3 kertaa yhden sekunnin aikana..

    Kunnioita käyttäjän animaatioita

    Kaikkien tärkeimpien käyttöjärjestelmien avulla käyttäjä voi ilmaista mieluummin vähentyneen liikkumisen näytöllä – ehkä siksi, että heillä on liikkeestä johtuva vestibulaarisen spektrin häiriö. Verkkosivustosi voi havaita, onko käyttäjä tehnyt tämän CSS: n avulla suosii on vähennetty-motion mediakysely.

    Tässä sallitaan painikkeen animointi vain, jos käyttäjä ei ole ilmaissut haluavansa:

    @media (suosii pienennettyä liikettä: ei-etusijaa) {
    painike {
    / * "värisevät" näppäinkehykset on määritelty muualla * /
    animaatio: värähtelee 0,3 sekunnin lineaarinen ääretön molemmat;
    }
    }

    Jos haluat jälkiasentaa sivustoa, jolla on monia animaatiosääntöjä, seuraavat voivat lopettaa kaikki aiemmin ilmoitetut CSS-animaatiot:

    @media (suosii pienennettyä liikettä: pienennä) {
    *,
    *::ennen,
    *::jälkeen {
    animaation kesto: 0,001 s! tärkeä;
    siirtymäaika: 0,001 s! tärkeä;
    }
    }

    Voit harkita käyttäjän käyttöjärjestelmän asetusten kunnioittamista verkkosivustosi suunnittelu tummaan tilaan.

    5) Huonojen linkkien tiedot

    Lyhyesti: tee linkit yksilöitäviksi yksilöivillä linkkiteksteillä. Varoita käyttäjiä, jos linkki avaa uuden välilehden tai tiedoston.

    Yksi huonojen linkkien pääasiallinen syy on usein huono copywriting. Useimpien näytönlukijoiden avulla käyttäjä voi nähdä nopeasti sivulinkkiluettelon (eniten käytetyssä kaupallisessa näytönlukijassa JAWS-näppäimistön pikavalinta on Ins + F7; ilmainen NVDA-näytönlukija, sama pikanäppäin tuo esiin elementtiluettelon, joka sisältää sivulinkit, otsikot ja maamerkit).

    Kuitenkin, jos jokaisessa linkissä on teksti napsauttamalla tätä tai lue lisää, ilman mitään muuta niiden erottamista varten, tämä on hyödytöntä. Helpoin tapa ratkaista tämä on yksinkertaisesti kirjoittaa yksilöivä linkkiteksti, mutta jos se ei ole mahdollista, voit ohittaa aputeknologian linkkitekstin käyttämällä yksilöllistä aria-label -määritteitä jokaisessa linkissä.

    Tässä on hyvä esimerkki Joomlan verkkosivusto:

    Joomlan verkkosivusto, joka näyttää kaksi erilaista tarinaa, joilla molemmilla on identtinen

    Näkyvä linkkiteksti on yksinkertaisesti “lue lisää”, mutta Joomla käyttää Aria-label ominaisuudet, jotka tekevät kustakin ainutlaatuisen apuvälineelle:

    Lue lisää
    
    Lue lisää

    Koska Aria-label tekstiä käytetään linkkitekstin sijasta aputekniikoilla, W3C suosittelee, että aria-etiketissä käytetty teksti aloitetaan linkin sisällä käytetyllä tekstillä, koska “tämä mahdollistaa jatkuvan viestinnän käyttäjien välillä”.

    merkintä: Joitakin huonoja neuvoja, jotka näen edelleen vanhoilla sivustoilla, on lisätä selittävä teksti linkkejä käyttäviin linkkeihin otsikko määrite:

    Lue lisää>

    Älä tee tätä. otsikko ei ole altistunut useimmille näytönlukijoille (kehittäjät ovat täyttäneet sen avainsanoilla ”SEO” -tarkoituksiin, joten näytönlukuohjelmien myyjät ovat poistaneet sen oletuksena), ja selaimet esittävät otsikkomääritteet ”työkaluvihjeinä”, jotka ovat käytettävissä vain hiiren käyttäjille hiirellä.

    Linkkien tulisi näyttää linkkiltä

    Oletuksena selaimet alleviivat linkkejä. On parasta olla muuttamatta tätä, mutta jos häviät taistelun pysäköintialueella suunnittelijan kanssa, linkkitekstin kontrastisuhteen tulee olla 3: 1 suhteessa ympäröivään linkittämättömään tekstiin ja sen pitäisi antaa jonkinlainen “ei-värimerkki” ”Että ne ovat linkki, kun heitetään tai keskitetään, esimerkiksi:

    a: leiju, a: keskity {teksti-koriste: alleviivaus;}

    Tarkennustyyli saa linkin alleviivaamaan, kun muu kuin hiiri-käyttäjä keskittyy siihen näppäimistön, kynän tai äänitulon avulla. Yleensä aina, kun jollakin sivulla on hover-tyyli, sille olisi myös annettava tarkennustyyli.

    Ei-värimerkki (tapauksessamme alleviivaus) varmistaa, että heikkonäköiset tai värisokeutuneet vierailijat näkevät muutoksen leijuessa tai keskittyen. (Näyttölukijat ilmoittavat automaattisesti linkin ennen linkkitekstiä.)

    Kerro ihmisille, jos linkki avaa uuden välilehden / sivun

    Se voi hämmentää kävijää, jos linkin aktivoiminen avaa uuden välilehden tai uuden ikkunan, varsinkin jos vain jotkut sivun linkit tekevät tämän (esimerkiksi vain ulkoiset linkit avaa uuden välilehden). Jos sinun on tehtävä tämä, sinun tulee hälyttää käyttäjää joko linkkitekstissä tai käyttämällä yllä olevaa aria-etiketti-menetelmää.

    Kerro ihmisille, onko linkki tiedostoon

    Jos linkki on tiedostoon (esimerkiksi PDF-tiedosto tai video), kerro käyttäjälle linkkitekstissä. Älä piilota sitä Aria-label, koska tästä voi olla hyötyä monille näkeville käyttäjille (jotkut matkapuhelimet eivät voi avata esimerkiksi .docx-tiedostoa). Jos se on suuri tiedosto, harkitse käyttäjän varoittamista likimääräisestä tiedostosta; he eivät ehkä halua ladata suurta videotiedostoa 3G: n kautta.

    Voit myös käyttää ladata , joka saa selaimen avaamaan käyttöjärjestelmän alkuperäisen tiedoston latausdialogin. Kun kaikki tämä kootaan, koodi näyttää tältä:

    Vuosikertomus (PDF, 240 Mt)

    6) Toinen suunnitteluvirhe: tarkennusrenkaan poistaminen

    Lyhyesti: varmista, että näppäimistön käyttäjä voi aina nähdä, mihin he ovat tällä hetkellä keskittyneet.

    Olemme maininneet : focus tyylit ennen. Ne ovat korvaamaton visuaalinen indikaattori niille ihmisille, jotka eivät voi käyttää hiirtä mistä tahansa syystä: ehkä heillä on RSI, Parkinsonin tai multippeliskleroosi. Oletuksena selaimet näyttävät tarkennusrenkaan tällä hetkellä tarkennetussa elementissä. Tässä on henkilökohtaisen sivustoni Koti-linkki, joka on keskittynyt Chromium-selaimeen:

    Kuvakaappaus Chromiumin oletuksena olevasta tarkennusrenkaasta linkin (joka on myös kuva) ympärillä

    Jotkut ihmiset kuitenkin pitävät tätä esteettisesti epämiellyttävänä käyttäessäsi hiirtä ja kytkevät sen pois käytöstä CSS: llä, jolloin sivuston ei pääse näppäimistön käyttäjille.

    Anna uusi Firefoxin edelläkävijän nimeämä standardi, nimeltään : Focus-näkyvä. Tämä kohdistaa tarkennusrenkaan elementtiin, jos näppäimistö tai muu kuin hiiri osoittava laite on saavuttanut sen, mutta ei osoita mitään hiiren käyttäjille. Koska sitä tuetaan vain Firefoxissa (kirjoittamishetkellä), Patrick Lauke ehdottaa seuraava CSS pelataksesi hienosti kaikkien selainten kanssa:

    -painike: tarkenna {/ * mielenkiintoisia painikkeiden keskitystyylejä * /}
    -painike: tarkennus: ei (: tarkennus-näkyvä) {
    / * Kumoa kaikki yllä olevat painopistetyylit
    jos painikkeessa on tarkennus, mutta selain ei normaalisti toimi
    näytä oletusarvoiset tyylit * /
    }
    -painike: tarkennusnäkyvä {/ * jotkut jopa * lisää * mielenkiintoiset painikepainikkeiden tyylit * /}

    7) Lomakkeen täyttö

    Lyhyesti: Suunnittele lomakekentät, jotka näyttävät lomakekentistä, ja jokainen liitetään etikettiin. Älä poista automaattista täyttämistä käytöstä.

    Koska lomakkeet ovat elintärkeitä verkkokauppasivustoille, hämmästyttää minua, kuinka monta saavuttamatonta lomaketta näen. Usein tämä johtuu siitä, että vanhat selaimet eivät antaneet paljoakaan muotoelementtien muotoilusta, joten kehittäjät tekivät ne muilla HTML-elementeillä. Nykyaikaiset selaimet sallivat houkuttelevat valintaruudut, valintanapit, mukautetut komponentit ja yhdistelmäruudut, käytettävissä olevat automaattisen täydennyksen ohjaimet ja enemmän.

    Automaattinen täyttö on ystäväsi

    Selainten salliminen lomakkeiden automaattiseen täyttämiseen edellyttää, että kävijät tekevät vähemmän, joten he todennäköisemmin täyttävät lomakkeen ja kirjaavat / ostavat tuotteesi. Automaattinen täyttö selaimissa: Syvä sukellus on hieno eBayn artikkeli tästä (ja heidän pitäisi tietää).

    Lisäksi automaattinen täydennys on tällä hetkellä ainoa riittävä tekniikka saavuttaakseen AA: n vaatimustenmukaisuuden Menestysperuste 1.3.5: Tunnista syöttötarkoitus.

    Tee lomakekentät näyttämään lomakekentistä

    Oletuksena selaimet näyttävät lomakkeen syöttökentät ruutuina. Kaikilla tavoin tyyli nämä reunuksilla, pehmusteilla ja reunoilla, mutta pidä ne laatikoina. Monet suunnittelijat seurasivat Googlen vuoden 2017 edeltävää materiaalisuunnittelumallia, jossa käyttäjät käyttävät yhtä riviä tekstin syöttämiseen:

    Vanha materiaalisuunnittelu, horisontaalinen viiva kuin suorakaiteen muotoinen laatikko

    Google kuitenkin havaitsi, että vanhojen tekstikenttien alla oleva rivi ei ollut selkeä joillekin käyttäjille, sekaannut usein jakajaan, ja muutti mallia. Jonkin sisällä käytettävyystesti 600 osallistujan kanssa he löysivät sen

    suljetut tekstikentät, joissa suorakulmainen (laatikko) muoto on suoriutunut paremmin kuin ne, joilla on viivanvaraisuus… Nykyään nämä uudet tekstikentät näkyvät Google-tuotteissa tilin kirjautumissivuilta Google-lomakkeisiin.

    Jos aiot ottaa käyttöön Googlen koko Material Design UI -kirjaston, lue Lopeta Materiaalisuunnittelu-tekstikenttien käyttö! kirjoittanut Matsuko Friedland nähdäksesi vastaako se tarpeitasi.

    Merkitse kaikki lomakekentät

    Kaikki lomakekentät (tekstitulot, valintaruudut, valintanappi, liukusäätimet jne.) On merkittävä. Paras tapa tehdä tämä on käyttää HTML-koodia ; kuten WCAG sanoo, ”tavalliset HTML-ohjaimet täyttävät jo tämän menestyskriteerin, kun niitä käytetään eritelmän mukaan”.

    Tässä on demo, jonka tein merkitsemätön lomakekenttä vs. merkitty lomakekenttä. Ne näyttävät identtisiltä, ​​mutta ylimmällä ei ole oikea etiketti, kun taas toisella. Napsauta alaosan tekstilappua ja huomaat, että se keskittyy siihen liittyvään syötteeseen.

    fake vs aito tarravertailu

    Tämä tekee tulon keskittämisen paljon helpommaksi henkilölle, jolla on moottorin hallintavaikeuksia – tai ehkä sinulle, yrittäessäsi tarkistaa pieni valintaruutu pienellä näytöllä kuoppaisella junassa. Se on elintärkeää myös näytönlukijakäyttäjille, jotka vierittävät kentät läpi muodossa (oletusarvoisesti vain linkit ja lomakekentät ovat tarkennettavissa välilehdillä); kun he välilehtiä syöttökenttään, näytönlukija ilmoittaa liittyvän tarran sisällön.

    Tämän koodi on yksinkertainen. Syöttökentälle annetaan yksilöivä tunnus, ja tunniste liitetään siihen käyttämällä varten määrite:

    
    

    Tarrojen piilottaminen

    Toisinaan et ehkä halua näkyvää etikettiä. Tai suunnittelijalla ei ole, etkä halua uutta taistelua pysäköintialueella. Joka tapauksessa, tässä on esimerkki, kun tuloa edeltävä tarra, jonka otsikko on ”Etsi”, tuntuu ylenmääräiseltä.

    Syöttökenttä painikkeella, jonka jälkeen on merkintä 'haku'

    Voimme yhdistää syöttökentän tekstiin “Etsi”, joka on lähetä-painikkeen sisältö käyttämällä Aria-labelledby:

    
    

    Voisimme käyttää Aria-label (jonka tapasimme aiemmin linkkien yhteydessä):


    Mutta on aina parempi suosia näkyvää tekstiä sivulla, koska se käännetään, jos sivua käytetään käännöstyökalun avulla, kun taas HTML-määritteissä ”piilotettu” teksti ei tule olemaan. (Hat-kärki Adrian Rosellille tästä kärjestä, hänen upeasta artikkelistaan Ensisijainen menetelmä kontrollin leimaamiseen.)

    Yleisimmät virheet miljoonilla kotisivuilla

    Olemme tarkastelleet verkkokaupan sivustojen suurimpia esteitä, kuten käyttäjät ovat ilmoittaneet olevan jonkin verran heikentyneitä. Katsotaanpa nyt paljon laajempaa sivustojoukkoa – 1 000 000 parhaan verkkosivuston kotisivuja, WebAIM analysoi automaattisesti elokuussa 2019. 98 prosentilla tutkituista sivuista oli ainakin yksi virhe. Yleisimmät virheet ovat

    1. Matalan kontrastin teksti (86,1%)
    2. Puuttuu vaihtoehtoinen teksti kuville (67,9%)
    3. Tyhjät linkit (58,9%)
    4. Puuttuvat lomakkeen syöttötarrat (53,2%)
    5. Puuttuu asiakirjan kieli (30,5%)

    Olemme käsitelleet alhaista kontrastia, linkkejä ja lomaketuloja yllä. Katsotaan nyt, kuinka voimme välttää muut hyvin yleiset virheet.

    8) Tarjoa tekstivaihtoehtoja kaikille kuville, videolle ja äänelle

    Lyhyesti: kaikilla kuvan tai videon välityksellä välitetyillä tiedoilla on oltava vastaava teksti.

    Joka on oltava vaihtoehtoinen teksti (”alt-teksti”), joka voidaan välittää näkövammaisille tai niille, joilla on alhainen kaistaleveys / kalliit tietosuunnitelmat ja jotka ovat poistaneet kuvan selaimissaan. Tämä sisältää kuvia tekstistä.

    Tässä ovat perussäännöt:

    • Jos kuva on puhtaasti koristeellinen, siinä on oltava tyhjä alt-teksti: alt = "". (Mutta puhtaasti koristeellisten kuvien pitäisi todennäköisesti olla CSS: ssä.)
    • Jos kuvaa kuvataan kehotekstissä, siinä tulisi olla tyhjä alkiteksti (alt = ""), toiston välttämiseksi. Mutta ole varovainen, jos se on jonkin sisällä
      – katso Kuinka kuvittelet? lisää.
    • Jos kuva on linkin ainoa sisältö (esimerkiksi organisaatiosi logoa voidaan napsauttaa siirtyäksesi kotisivulle), vaihtoehtoisen tekstin tulisi kuvata linkin kohde. Esimerkiksi, alt = "kotisivu".
    • Älä käytä kuvake fontteja; ne voivat olla todella haitallisia dyslexisille ihmisille. Jos käytät niitä, muuntaa ne SVG: ksi.

    Video- ja äänivaihtoehtoinen teksti

    Älä unohda, että äänisisältö tarvitsee vaihtoehtoista tekstiä kuulovammaisille. Tämä tarkoittaa podcastien ja videoiden tekstityksiä. Ja vielä kerran: älä toista mediaa automaattisesti.

    9) Lisää oikea asiakirjan kieli

    Lyhyesti: anna avustavan tekniikan tietää kieli, jolla teksti on.

    30% kotisivuista ei ilmoita kirjoittamansa kieltä, mikä voi tehdä niistä hämmentäviä näytönlukijakäyttäjille. Tämä on tärkeää, koska sana “kuusi” äänestetään hyvin eri tavalla, jos lause on esimerkiksi englanniksi tai ranskaksi.

    Tämä on helppo ratkaista lisäämällä lang-määrite HTML-elementtiin:

    En ilmoittaa näytönlukijalle (tai käännösohjelmalle), että tämä sivu on englanniksi. “Es” on espanja, “fr” on ranska ja niin edelleen. Useimpien kielten kielitunniste on melko helppo määrittää. W3C: llä on opas Kielikoodin valitseminen.

    Jos sivu sisältää sisältöä jollakin muulla kielellä kuin sen pääasiallisena ilmoitettuna, lisää kieliominaisuus kyseistä sisältöä ympäröivään elementtiin. Esimerkiksi sivulla, joka julistetaan englanniksi:

    Jos haluat keskustella matadori, joissakin viileissä Cabana
    Ja tavata senoritas pisteet, Espana por favor

    10) Auta vierailijaa kiertämään sisältöäsi

    Lyhyesti: Käytä HTML-maamerkkielementtejä auttamaan avustavan tekniikan käyttäjiä ymmärtämään sisältöäsi ja selaamaan sitä.

    Kun näkyvä kävijä tulee sivullesi, hän voi skannata sen helposti visuaalisesti ymmärtääksesi missä navigointi on ja mistä pääsisältö alkaa. Näytönlukijakäyttäjä ei voi tehdä tätä. HTML5 antaa meille kuitenkin joitain uusia tunnisteita näiden alueiden merkitsemiseksi, ja avustavilla tekniikoilla on pikakuvakkeita, jotka voivat siirtyä (tai ohittaa) maamerkkeihin, kuten ylätunniste, alatunniste, suunnistus ja vastaavat.

    Tässä on kuuden minuutin video, jonka tein web-kehittäjän ja näytönlukijan käyttäjän Léonie Watsonin kanssa siitä, kuinka hän käyttää näytönlukijaaan tutkiakseen näitä semantiikoita navigoidaksesi henkilökohtaisella sivustollani:

    • Kääri pääsisältösi, eli jutut, jotka eivät ole otsikkoa, ensisijaista navigointia tai alatunnistetta, a
      elementti. Lähes kaikissa tapauksissa niitä tulisi olla vain yksi
      per sivu. Kaikkien selainten (IE9 +) avulla voit muotoilla sen, ja avustavat tekniikat tietävät, mitä sillä tehdä.
    • Kääri otsikko (tuotemerkin logo, hihna, sivun otsikko) a
      elementti.
    • Kääri alatunniste (lailliset asiat, yhteystiedot, tekijänoikeusilmoitus jne.) A
    • Merkitse ensisijainen navigointi painikkeella
        kääritty elementti. Tämä voidaan upottaa
        jos se sopii sivun visuaaliseen suunnitteluun.
      • Mainonta ja ei-välttämätön sisältö olisi käärittävä
      • Jos sivulla on useampi kuin yksi tuote / video / uutinen / blogin viesti, kääri jokainen niistä
        elementti.

      Sen näytönlukijakäyttäjien kysely, WebAIM havaitsi, että 26% näytönlukijan käyttäjistä käyttää usein tai aina näitä maamerkkejä sivulla navigoidessa.

      Lisäksi erillisten sisältöpakettien kääriminen

      auttaa Applen WatchOS-näytön sisältöä optimaalisesti. Katso artikkeli Semanttisen HTML: n käytännön arvo lisätietoja tästä.

      11) Käytä HTML: tä oikein

      Lyhyesti: ymmärtää HTML-elementtien semantiikkaa ja oletuskäyttäytymistä; Käytä sisältöäsi oikea elementti.

      Tämän artikkelin yleinen teema on käyttänyt oikeita HTML-elementtejä. Käyttää etiketti sillä on sisäänrakennettu selainkäyttäytyminen, joka keskittää siihen liittyvän syöttökentän; käyttämällä

      on parempi kuin

      koska se antaa näytönlukijakäyttäjille mahdollisuuden siirtyä suoraan tärkeään sisältöön ja olla täysin häiritsemätön niille, jotka eivät käytä näytönlukijaa.

      Toinen esimerkki on

      Like this post? Please share to your friends:
Adblock
detector
map