4 algengir aðgengisvandamál á vefnum sem vert er að þekkja

Vandamál með birtumunshlutfall

Algengasta aðgengisvandamálið sem ég hef séð í gegnum árin er Aðgengisvandamál varðandi mótvægi og lit, slæmt birtumunshlutfall gerir það erfitt að sjá efnið á síðunni þinni og það mun vera mjög skaðlegt notendum þínum, þar á meðal þeim sem eru með sjónskerðingu.

Kontrast er mælikvarði á mismun í skynjaðri ljósstyrk eða birtustigi milli tveggja lita; til dæmis er hann mismunurinn á bakgrunnslit og framburðslit efnis síðunnar. Skoðum þessa navbar.

Segjum að viðskiptavinur þinn líki virkilega vel við þann grænleika og finni hann frábæran, en hér er vandamál með mótvægi. Við höfum a #FFFFFF bakgrunnur með a #83A94C leturlitur sem skilar 2,71:1 birtumun, sem er langt undir lágmarkinu 4.5:1 þarf. Til að greina þetta vandamál höfum við nokkrar lausnir:

1. Notaðu netbundinn mótvægiðsskoðara eins og the Webaim andstæðuskoðari, sem mun reikna birtumunshlutfallið og gefa þér a Ganga framhjá eða Misheppnast einkunn.
2. Notaðu eina af mörgum viðbótum í vafranum til að athuga kontrast, t.d.: WCAG litamunsprófunartæki.
3. Reyndu vafrans innbyggða mótspyrnuvirkjann. Til að nota hann í Google Chrome, opnaðu þróunartólin, skoðaðu markaða einingu (t.d. heimaslóð í valmyndinni okkar), farðu í CSS-litareiginleikann og smelltu á litareitinn til að opna litavalara. Neðst birtist mótspyrnuhlutfall, stækkaðu það til að sjá nánari upplýsingar. Ferlið er nákvæmlega það sama í Firefox, aðeins lítill munur á hlutfallinu er sýndur neðst til vinstri í litavalið.

Til að fá nánari upplýsingar um mótspil, skoðaðu þetta. Grein um aðgengi að mótvægi og litum.

Vandamál með tengistexta

Tenglar eru stór hluti af vefur Þessa dagana er því mjög mikilvægt að gera þær aðgengilegar. Hlekkur þarf að vera skiljanlegur og upplýsa notandann um samhengi sitt, svo óupplýsandi hlekkur með texta eins og “lestu meira”, "smelltu hér", "skoðaðu smáatriði" er ekki mjög gagnlegur, svo í stað þess að bæta við "skoðaðu smáatriði" fyrir vara upplýsingar, til dæmis, með því að nota vörunafnið eins og “The Mandalorian Helmet” er betra og fróðlegra. Orð eins og Smelltu hér eða Meira um má sleppa því að tengill sé smellanlegur sjálfgefið og eitthvað eins og “meira um fréttir dagsins” má stytta í “fréttir dagsins”. Það er engin sérstök regla né takmörk um lengd tengla, the Tengillinn þarf að vera læsilegur. og nægilega langt til að gefa góða lýsingu á tilgangi þess.

Myndir sem tenglar eru víða notað mynstur, svo þetta þarf að fylgja sömu reglum sem við höfum rætt um hér að ofan. alt-eiginleiki myndarinnar mun gegna hlutverki tengilatexta og verða lesinn upp af skjálesurum. Það eru nokkrar mismunandi aðstæður þegar myndum er komið fyrir sem tenglum: ef myndin er eini innihald tengilsins þarf hún að hafa alt-eiginleika; ef tengillinn inniheldur bæði texta og mynd getum við sleppt alt-eiginleikanum. Hér eru nokkur dæmi:

<a href="/notifications">
  <img src="/img/notification.png" alt="Tilkynningar">
</a>

Kíktu á nokkrar krækjur hér til að lesa um aðgengi krækja:Tengistextinn og útlit, Virknimyndir.

Inntaksreitur án merkimiða

Við höfum öll séð þessi forminngangsefni áður án merkimiða og með aðeins staðfyllingartexta til að lýsa tilgangi inntaksins. Fyrsta athugasemd er sú að um leið og notandinn fyllir út öll inntökin og staðfyllingartextinn sé ekki lengur sjáanlegur, munum við ekki hafa neinn sjónrænan samhengi um tilgang inntaksins, en leyfðu okkur Einbeittu þér að aðgengileika hér.

Að tengja a merkimiði Að tengja inntak við merkimiða gefur okkur tvo helstu kosti: skjálesari les merkið þegar notandi hefur fókusið á forminntakinu, og þegar smellt er á merkið eða það snert/tappa á það, flytur vafrinn fókusinn á tengda inntakið. Einföld lausn í þessu tilviki er einfaldlega að bæta við merkimiðum svona:

    Fyrsta nafn




Eftirnafn




Netfang




Senda
  

```

Þetta er það, allir innsláttareitir hafa viðeigandi merkimiða sem gera þá aðgengilega öllum. Við getum jafnvel fjarlægt staðfyllurnar til að forðast að endurtaka tilgang innsláttarins, en við vitum öll að raunverulegar aðstæður eru ekki svo auðveldar í meðförum; þú hefur nýlega fengið hönnun sem inniheldur þessa eyðubótareiti án merkimiða og viðskiptavinurinn vill ekki breyta þeim hluta. Fyrsta lausnin sem kemur upp í hugann er að beita a sýning: engin; eða sýnilegleiki: falinn; Fyrir merkimiða okkar mun þetta fela þá, en þeir eru samt ennþá til staðar, er það ekki? Þessir eiginleikar fela þætti ekki aðeins á skjánum, heldur einnig fyrir skjáleskarana, svo þetta mun ekki leysa vandamál okkar.

Við getum notað the klippumynstur til að leysa þetta. Á þennan hátt munum við fela efnið sjónrænt en samt veita það skjálesurum. Við munum búa til eftirfarandi CSS aðeins fyrir eldri systkini flokk og beitið því á allar merkimiðar okkar:

.sr-only:not(:focus):not(:active) {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   width: 1px;
 }
Hljóðskrift

Þetta mun fela merkimiða okkar, gera þá aðgengilega fyrir skjálesara og samræma hönnunina okkar. The ekki í fókus og ekki virkur Slík pseudo-flokkun kemur í veg fyrir að einingar sem hægt er að beina athyglinni að, eins og a, hnappur, innsláttur frá því að vera falin þegar hún fær fókus.

Enginn fókusvísir

Einu sinni gerði ég þetta í alþjóðlegu CSS-stílskránni minni:

* {
outline: none; /* hræðileg mistök */
}

Um 2020 tók ég eftir því að svartar jaðar birtust á reitum í Google Chrome þegar þeim var beint athygli að eða á hnöppunum þegar þeim var skipt í – það var mjög skrýtið því ég skildi það ekki þá. Eftir smá rannsóknir komst ég að því að það stafar af outline-CSS-eiginleikanum, svo að fjarlægja hann leysti þetta ‘vandamál’ fyrir mig.

Á þeim tíma hafði ég enga hugmynd um hvaða rétta leið væri til að gera það. Eftir að hafa kannað hvers vegna og hvernig þessi nýja sjálfgefin stilling virkar komst ég að því að outline er vísbending um fókus á þáttum og ef henni er eytt þarf að veita augljósa fókusstíl, í grundvallaratriðum er það sem ég var að gera talið slæm vinnubrögð. Þú getur sérsniðið fókusvísbendingar eftir þörfum, en að fjarlægja þær alveg af vefsíðunni er stórt aðgengisvandamál. Að sérsníða stíl þáttafókuss er nokkuð einfalt, til dæmis:

a:focus {
   outline: 4px solid #ee7834;
   outline-offset: 4px;
 }Hljóðskrift

Aðgengistól

Að athuga öll þau mál sem við höfum rætt getur verið mikið verk, sérstaklega þar sem margt fleira er til að fjalla um aðgengi, svo til að aðstoða okkur við að takast á við aðgengi höfum við tvær frábærar vafraviðbætur.

WAVE matstækið er safn matsverkfæra sem hjálpar okkur að gera vefefni okkar aðgengilegra. Það er fáanlegt í Google Chrome og Firefox.

Reynum þetta á litlum vefsíðu sem inniheldur valmyndaborða og innsláttarreit án merkis og sjáum hvað hann skilar, eftir að við höfum sett viðbótina upp þurfum við bara að smella á táknið hennar til að nota hana.

Yfirlitsflipanum sýnir 1 villu (formatriði vantar merkimiða), 2 kontrastvillur og 1 viðvörun (vantar fyrirsagnaruppbyggingu), eins og sjá má er niðurstaðan mjög skýr og ítarleg. Smáatriða-flipanum birtir lista yfir allar villur, viðvaranir og eiginleika. Við getum einnig haft beina samskipti við síðuna með því að smella á þessi rauðu ferningslaga svæði til að skoða lýsingu og tegund villunnar.

Eyða DevTools er öflugt og nákvæmt aðgengistól. Það er fáanlegt í Google Chrome og Firefox. Eftir að hafa sett viðbótina upp þurfum við að opna þróunartólin í vafranum, fara á axe DevTools-flipann og smella á "Scan all of my pages".

Þú getur séð að Axe DevTools hefur greint frá sömu vandamálum með WAVE Evaluation Tool, sem eru vandamál með kontrast, formþátt sem vantar merkimiða og vantar fyrirsagnarþátt; það gaf okkur jafnvel nokkrar bestu vinnubrögð til að fylgja.

Önnur leið til að prófa aðgengi er að nota skjálesara og prófa vefsíðuna þína með honum. Það eru til margir skjálesarar, til að nefna nokkra:

• NVDA
• Raddarstýring er fáanlegt á macOS-tækjum.
• Orka er ókeypis og opinn skjálesari fyrir Linux.

Yfirlit

Í þessari grein höfum við séð nokkur algeng vandamál í vef aðgengi, leiðir til að leysa þau og nokkur frábær verkfæri til að prófa vef aðgengi. Enn er margt óunnið um aðgengi þátta eins og glugga (Dialogs), samfellda glugga (Accordions) og karúsela (Carousels), en eins og þú hefur séð í þessari grein er til nóg af skjölum og verkfærum sem geta hjálpað þér að takast á við aðgengi.

Nokkur lykilatriði sem ber að hafa í huga:

• Skoðaðu alltaf birtumunshlutfallið.
• Bjóðið alltaf upp á fræðandi efni með tenglum.
• Formþáttur verður að hafa merkimiða tengdan við sig.
• Augljós fókusstíll verður að vera veittur.