Kontrolný zoznam prístupnosti webu

Prístupnosť je prax, ktorá spočíva v tom, že webové stránky sú rovnako dostupné ľuďom so zdravotným postihnutím, aby mali rovnaký prístup k tovaru a službám, ktoré tieto stránky poskytujú. Je neoddeliteľnou súčasťou profesionálneho webdizajnu a vývoja.


Contents

Prečo by vás to zaujímalo prístupnosť?

Existuje veľa dôvodov, prečo by vývojári, dizajnéri a ich zamestnávatelia / klienti mali zabezpečiť, aby dostupnosť bola včasnou a neoddeliteľnou súčasťou procesu vývoja webových aplikácií..

  • Na mnohých územiach, napríklad v USA, EÚ, Veľkej Británii, Izraeli a Japonsku, je zákonnou požiadavkou nediskriminovať ľudí z dôvodu ich zdravotného postihnutia. V USA minulý rok, Bolo podaných 2 235 nových súdnych sporov o ADA na federálnom súde. To je jedna za hodinu.
  • Prístupné stránky sú vo vyhľadávačoch zvyčajne lepšie kódované, robustnejšie a majú dobrú pozíciu.
  • Prístupné stránky majú tendenciu byť použiteľnejšie pre návštevníkov bez zdravotného postihnutia, čo vedie k väčšej spokojnosti a konverzii.
  • Neprístupné stránky sú zlé pre podnikanie. V roku 2019, a Prieskum Spojeného kráľovstva zistili, že viac ako 4 milióny ľudí opustilo maloobchodnú webovú stránku kvôli prekážkam v prístupe, ktoré našli. Táto stratená firma, „Click-Away Pound“, bola 17,1 miliardy GBP. to je miliardy. Iba vo Veľkej Británii.
  • Dobrovoľne odvrátiť potenciálnych zákazníkov je zlé.

Spoločné normy a problémy

Našťastie má W3C (orgán, ktorý vytvára veľa štandardov, na ktoré sa web spolieha), štandard, ako sprístupniť webové stránky. Hovorí sa tomu Pokyny na prístupnosť webového obsahu (WCAG). Existujú tri úrovne zhody (A, AA, AAA), pričom „A“ je najnižšia úroveň prístupnosti. Odporúčam vám zamerať sa na úroveň AA.

Bohužiaľ, WCAG je dlhá, suchá a veľmi technická správa, takže sa pozrime na to, čo môžete urobiť relatívne ľahko a získajte najväčší tresk za svoje peniaze. Toto nie je kontrolný zoznam všetkého, čo potrebujete vedieť; je to kontrolný zoznam najbežnejších chýb a chýb, ktoré ľudia so zdravotným postihnutím uvádzajú, sú ich hlavnými blokátormi, s praktickými návrhmi na vyriešenie problémov. Všetky externé odkazy sa otvárajú na novej karte.

V prieskume Click-Away Pound boli respondenti so zdravotným postihnutím opýtaní, aké sú hlavné bloky pri dokončovaní nákupov. Tu sú hlavné prekážky (bolo povolených viac odpovedí):

  1. Preplnené stránky s príliš veľkým obsahom – 66%
  2. reCAPTCHA testy – 59%
  3. Zlá čitateľnosť (kontrast, rozloženie textu) 56%
  4. Rozptyľovanie pohyblivých obrázkov a grafiky – 53%
  5. Slabé informácie o prepojení – 59% (77% pre používateľov čítačky obrazovky)
  6. Vyplnenie formulára 56%

Ako zlepšiť prístupnosť webových stránok

Po prvé, nezabudnite, že žiadny z piatich najlepších problémov nie je technickým problémom – jedná sa o chyby v dizajne alebo copywritingu.

1) Príliš veľa obsahu

V krátkosti: rozdeľte text na časti s nadpismi a zoznamami s odrážkami. Používajte jednoduchý jazyk.

Je známe, že s rastúcim počtom možností sa zvyšuje aj počet úsilie potrebné na zhromažďovanie informácií a robiť dobré rozhodnutia. Je to rovnaké s príliš veľkým obsahom – čoskoro sa stane ohromujúcou. Zhromaždenie obsahu podľa náležitostí je časovo náročné plavidlo; ako napísal Mark Twain (údajne): „Nemal som čas napísať krátky list, namiesto toho som napísal dlhý.“

Posledná kniha Písanie sa navrhuje navrhne

Ľudia chcú mať možnosť obísť dlhé bloky textu bez ohľadu na zrak alebo zvuk, takže je veľmi dôležité usporiadať písanie dlhej formy pomocou hlavičiek, krátkych odsekov a ďalších osvedčených postupov pri navrhovaní obsahu.

takže:

  • Majte iba jednu

    na stránke.

  • Používajte podkapitoly liberálne; pre zrakovo postihnutých rozdeľuje „tabuľku“ textu, zatiaľ čo používatelia pomocných technológií, ako sú napríklad čítačky obrazovky, môžu pomocou klávesovej skratky preskočiť medzi nadpismi alebo získať mentálnu mapu obsahu zo štruktúry nadpisov..
  • Nenechajte preskočiť úroveň nadpisov. Napríklad, ak používate

    , uistite sa, že jej predchádza znak

    .

  • Používajte zoznamy s odrážkami (ako je tento!) Správne označené v HTML ako
      ,

    • . Čitatelia obrazovky oznámia „Zoznam 10 položiek“ (a umožnia používateľovi ich preskočiť).

    Používajte obyčajnú angličtinu

    Monzo Bank’s Sprievodca „Náš tón hlasu“ vysvetľuje význam jednoduchého jazyka:

    V roku 2010 americký právnik Sean Flammer uskutočnil experiment. Požiadal 800 sudcov obvodného súdu, aby sa postavili buď proti tradičnému „legálnemu“ argumentu, alebo k tomu, čo nazval „obyčajná angličtina“..

    Sudcovia prevažne uprednostňovali obyčajnú anglickú verziu (66% až 34%) a táto preferencia sa konala bez ohľadu na ich vek alebo pôvod..

    Flammer notes (PDF) obyčajnej anglickej verzie:

    Je kratšia takmer o jednu stránku, takže zjavne vylučuje zbytočné vety a slová. Jeho vety sú v priemere 17,8 slov, na rozdiel od 25,2 slov.

    Z toho vyvodzuje:

    Teraz máme 25 rokov empirického výskumu, ktorý vedie k nevyhnutnému záveru: ak chcete potešiť a presvedčiť čitateľa, napíšte obyčajnú angličtinu..

    2) ReCAPTCHA

    V krátkosti: Nenúťte svojich používateľov preskakovať potenciálne nemožné obruče, aby ste ušetrili čas vývojárom.

    Respondenti často hovorili o starom Verzia ReCAPTCHA:

    verzie reCAPTCHA s nestabilným textom, ktoré musíte znova napísať

    Bojujem s obrázkami a musím napísať čísla alebo písmená. V druhu, kde musím kliknúť na obrázky, ktoré majú obchod alebo čokoľvek, vždy mi niečo chýba, alebo som zmätený a spotrebujem energiu, ktorú nemám …

    Štýl kolísavých písmen reCAPTCHA je teraz zastaraný. Je oveľa bežnejšie vidieť novšiu inkarnáciu s názvom „Žiadna CAPTCHA reCAPTCHA“ (známa tiež ako „Nie som robot “Zaškrtávacie políčko), ktoré od používateľa vyžaduje začiarknutie políčka potvrdzujúceho, že nie sú robotmi a ktorý používa tajné voodoo na hodnotenie používateľov. Ak prechádzajú, nie je potrebná žiadna ďalšia interakcia. Ak však zlyhajú, zobrazí sa ďalšia výzva:

    Čiastočná snímka obrazovky captcha vyžadujúca od používateľa kliknutie na všetky štvorce, ktoré ukazujú pomaranče

    Nezabúdajte, že typ CAPTCHA, ktorý vyžaduje, aby používateľ klikol na všetky štvorce s (povedzme) značkou, nemusí byť nevyhnutne medzinárodný. Ako píše Terence Eden, CAPTCHA nepreukazujú, že ste človek – dokazujú, že ste Američan.

    Najdostupnejšou formou reCAPTCHA je reCAPTCHA v3 ktorá nevyžaduje žiadnu interakciu s používateľom, ale vyžaduje, aby ste sa viac zaoberali návštevami, ktoré nevyhoveli testu:

    Jedná sa o čisté rozhranie API jazyka JavaScript, ktoré vracia skóre, čo vám dáva možnosť konať v kontexte vašich stránok: napríklad vyžaduje ďalšie faktory overovania, odoslanie príspevku na moderovanie alebo škrtenie robotov, ktorí môžu škrabať obsah..

    3) Zlá čitateľnosť

    Stručne povedané: uistite sa, že text má primeraný kontrast, je čitateľný a neoprávnený.

    • Zaistite dostatočný kontrast. Jedným z najbežnejších blokátorov prístupu na webe je zlý kontrast medzi textom a pozadím. Pokyny W3C vyžadujú kontrastný pomer najmenej 4,5: 1, s výnimkou veľkoplošného textu a obrázkov veľkého rozsahu, ktoré by mali mať kontrastný pomer najmenej 3: 1 (logá a „náhodný“ text sú vyňaté). Existuje veľa nástrojov, ktoré môžu merať kontrastné pomery; môj osobný favorit je vynikajúci Ada Rose Cannon kontrastný widget, čo je užitočný bookmarklet prehliadača, ktorý zdôrazňuje oblasti s nedostatočným kontrastom na vašej stránke.
    • Nemáte nadpisy všetkých kapitálov. Existujú dôkazy, že je ich čítanie ťažšie, pretože veľké písmená majú rovnakú výšku, takže nedokážeme rozpoznať tvar bežných slov. Niektorí čitatelia obrazovky okrem toho uvedú skupiny veľkých písmen, akoby išlo o skratky (ako BBC, DOJ atď.). Ak musíte mať všetky hlavné nadpisy, napíšte ich normálne do svojho HTML a transformujte ich pomocou CSS textová transformácia: veľké písmená.
    • Text zarovnaný doľava. (Pre stránky v jazykoch sprava doľava, ako je arabčina alebo hebrejčina, zarovnajte text sprava.) Neodôvodňujte to, pretože to sťažuje čítanie ľuďom s dyslexiou. Sprievodca štýlom British Dyslexia Association tiež navrhuje

      Používajte bezpatkové písma, napríklad Arial a Comic Sans, pretože písmená sa môžu javiť menej preplnené. Medzi alternatívy patria Verdana, Tahoma, gotika storočia, Trebuchet, Calibri, Open Sans.

    4) Rozptyľujúce obrázky a grafika

    V skratke: umožnite používateľom zastaviť akýkoľvek pohyb; rešpektovať nastavenia operačného systému; video nehrajte automaticky.

    Jeden respondent prieskumu Click-Away Pound napísal,

    Webové stránky, ktoré som používal s malými problémami, sa teraz stávajú problémom, pretože teraz nakupujú reklamy a pri nákupe neustále načítavajú ďalšie reklamy..

    Najzákladnejšia úroveň WCAG vyžaduje „Pre každý pohyb, blikanie alebo posúvanie informácií, ktoré (1) sa spustí automaticky, (2) trvajú dlhšie ako päť sekúnd a (3) sa uvádza súbežne s iným obsahom, existuje mechanizmus pre používateľ ho pozastaví, zastaví alebo skryje, pokiaľ pohyb, blikanie alebo posúvanie nie je súčasťou činnosti, ktorá je nevyhnutná. “.

    Rozptyľovanie je nepríjemné – najmä pre ľudí s ADHD alebo inými kognitívnymi poruchami. Pohyby a blikanie však môžu tiež spôsobiť záchvaty, takže podľa smerníc WCAG sa vyžaduje, aby obsah v priebehu jednej sekundy ne blikal viac ako trikrát..

    Rešpektujte výber používateľa pre animácie

    Všetky hlavné operačné systémy umožňujú užívateľovi vyjadriť preferencie pre znížený pohyb na obrazovke – pravdepodobne preto, že majú poruchu vestibulárneho spektra vyvolanú pohybom. Vaše webové stránky môžu zistiť, či to používateľ urobil pomocou CSS preferuje so zníženým-motion mediálny dopyt.

    Tu povoľujeme animáciu tlačidla, iba ak používateľ nevyjadril žiadnu preferenciu:

    @media (preferuje obmedzený pohyb: žiadna preferencia) {
    tlačidlo {
    / * `vibrovať` kľúčové snímky sú definované inde * /
    animácia: lineárne nekonečné vibrovanie 0,3 s;
    }
    }

    Ak sa chystáte dodatočne vybaviť web, ktorý má veľa pravidiel animácie, môže dôjsť k nasledujúcemu zastaviť všetky predtým deklarované animácie CSS:

    @media (preferuje obmedzený pohyb: zníži) {
    *,
    * :: predtým,
    * :: po {
    trvanie animácie: 0,001 s; dôležité;
    prechodné trvanie: 0,001 s; dôležité;
    }
    }

    Možno budete chcieť zvážiť tému rešpektovania preferencií operačného systému používateľa navrhovanie vašich webových stránok pre tmavý režim.

    5) Zlé informácie o prepojení

    V skratke: urobte identifikovateľné odkazy s jedinečným textom odkazu. Upozorniť používateľov, ak odkaz otvorí novú kartu alebo súbor.

    Jednou z hlavných príčin slabých odkazov je často zlé copywriting. Väčšina čítačiek obrazovky umožňuje používateľovi rýchlo zobraziť zoznam odkazov na stránke (v najpoužívanejšej komerčnej čítačke obrazovky JAWS je klávesovou skratkou Ins + F7; v bezplatná čítačka obrazovky NVDA, rovnaká klávesová skratka zobrazí zoznam prvkov, v ktorom sú uvedené odkazy na stránky, nadpisy a orientačné body).

    Ak však má každý odkaz text s textom „Kliknite sem“ alebo „Čítať viac“, pričom ich nie je možné rozlíšiť inak, je to zbytočné. Najjednoduchší spôsob, ako to vyriešiť, je jednoducho napísať jedinečný text odkazu, ale ak to nie je možné, môžete text odkazu prepojiť pomocou technológie podporovania pomocou jedinečného atribútu ária-label na každom prepojení..

    Tu je dobrý príklad z Joomla webová stránka:

    Joomla webová stránka, ktorá zobrazuje dva rôzne príbehy, každý s identickými

    Text viditeľného odkazu je jednoducho „čítať viac“, ale používa ho Joomla aria-label atribúty, vďaka ktorým je každý jedinečný pre podpornú technológiu:

    Čítaj viac
    
    Čítaj viac

    Z dôvodu aria-label text sa použije namiesto textu odkazu pomocou asistenčných technológií, W3C odporúča začať text používaný v árii s textom použitým v rámci odkazu, pretože „to umožní konzistentnú komunikáciu medzi používateľmi“.

    Poznámka: Niektoré zlé rady, ktoré stále vidím na starých stránkach, je pridať vysvetľujúci text o odkazoch pomocou nadpis atribút:

    Prečítajte si viac>

    Nerobte to. titul nie je vystavený väčšine čitateľov obrazovky (vývojári zvyknutí napĺňať ho pomocou kľúčových slov na účely „SEO“, takže predajcovia čítačiek obrazovky ho v predvolenom nastavení zakázali) a prehliadače prezentujú atribúty titulov ako „popisy“, ktoré sú dostupné iba pre používateľov myši pri umiestnení kurzora myši.

    Odkazy by mali vyzerať ako odkazy

    Prehliadače predvolene podčiarkujú odkazy. Najlepšie je to nezmeniť, ale ak stratíte boj na parkovisku s dizajnérom o tom, text odkazu musí mať kontrastný pomer 3: 1 od okolitého textu bez odkazu a mal by dať nejakému „nefarebnému označovateľovi“ “Že sú odkazom pri umiestnení kurzorom myši alebo kurzorom myši, napríklad:

    a: hover, a: focus {text-decoration: underline;}

    Štýl zaostrenia spôsobí, že sa odkaz podčiarkne, keď naň užívateľ, ktorý nie je myšou, zaostrí klávesnicu, dotykové pero alebo hlasový vstup. Všeobecne platí, že vždy, keď má niečo na stránke štýl vznášania, mal by sa mu tiež priradiť štýl zaostrenia.

    „Nefarebný označenie“ (v našom prípade podčiarknutie) zabezpečuje, že návštevníci so slabým zrakom alebo farebnou slepotou uvidia zmenu pri umiestnení kurzora myši alebo zaostrenia. (Čitatelia obrazovky automaticky oznamujú odkaz pred textom odkazu.)

    Povedzte ľuďom, ak odkaz otvorí novú kartu alebo stránku

    Návštevníkovi môže byť mätúce, ak aktivácia odkazu otvorí novú kartu alebo nové okno, najmä ak to urobia iba niektoré odkazy na stránke (napríklad iba externé odkazy otvoria novú kartu). Ak to musíte urobiť, mali by ste upozorniť používateľa buď v texte odkazu, alebo pomocou metódy árie štítkov vyššie.

    Povedzte ľuďom, či je odkaz na súbor

    Ak ide o odkaz na súbor (napríklad PDF alebo video), oznámte to používateľovi v texte odkazu. Neskrývaj to aria-label, pretože to môže byť užitočné pre mnohých zrakovo postihnutých používateľov (niektoré mobily napríklad nemôžu otvoriť súbor .docx). Ak ide o veľký súbor, zvážte upozornenie používateľa na približnú veľkosť; možno si nebudú želať sťahovať veľký video súbor cez 3G.

    Môžete tiež použiť Stiahnuť ▼ atribút, ktorý spôsobí, že prehliadač otvorí dialógové okno natívneho stiahnutia súborov operačného systému. Keď to všetko zhrnieme, kód bude vyzerať takto:

    Výročná správa (PDF, 240 MB)

    6) Ďalšia konštrukčná chyba: Odstránenie zaostrovacieho krúžku

    V skratke: uistite sa, že používateľ klávesnice vždy vidí, na čo sa práve zameriava.

    Už sme sa zmienili : focus štýly predtým. Sú neoceniteľným vizuálnym ukazovateľom pre tých ľudí, ktorí nemôžu používať myš z akéhokoľvek dôvodu: možno majú RSI alebo Parkinsonovu chorobu alebo sklerózu multiplex. Prehliadače predvolene zobrazujú krúžok zaostrenia na aktuálne zaostrenom prvku. Toto je odkaz Domovská stránka na mojej osobnej stránke zameraný na prehliadač Chromium:

    Snímka obrazovky predvoleného zaostrovacieho krúžku prehliadača Chromium okolo odkazu (ktorý je tiež obrázkom)

    Niektorí ľudia to však považujú za esteticky nepríjemné, keď používajú myš, a vypínajú ho pomocou CSS, čím ponechávajú stránku neprístupnú pre používateľov klávesnice..

    Zadajte nový štandard s názvom priekopník Firefox : Zaostrovacieho viditeľné. To bude aplikovať zaostrovací krúžok na prvok, ak bol dosiahnutý klávesnicou alebo ukazovacím zariadením, ktoré nie je myšou, ale používateľom myši nezobrazí nič. Pretože je podporovaná iba vo Firefoxe (v čase písania), Patrick Lauke navrhuje nasledujúci CSS na pekné hranie so všetkými prehliadačmi:

    button: focus {/ * niektoré vzrušujúce štýly zamerania tlačidiel * /}
    button: focus: not (: focus-visible) {
    / * zruší všetky vyššie uvedené štýly tlačidiel
    ak je tlačidlo zaostrené, ale prehliadač by normálne nebol
    zobraziť predvolené štýly zaostrenia * /
    }
    button: focus-visible {/ * niektorí dokonca * viac * vzrušujúce štýly zaostrenia tlačidiel * /}

    7) Vyplňovanie formulárov

    V skratke: navrhnite polia formulárov, ktoré vyzerajú ako polia formulárov, z ktorých každé je spojené so štítkom. Nezakazujte automatické dopĺňanie.

    Vzhľadom na životne dôležitý význam formulárov pre stránky elektronického obchodu ma udivuje, koľko neprístupných formulárov vidím. Často je to preto, že staré prehliadače nedovolili príliš veľa úpravou prvkov formulára, takže vývojári ich vyznávali inými prvkami HTML. Moderné prehliadače umožňujú atraktívne políčka, prepínače, vlastné vybrané komponenty a kombinované oxidy, dostupné ovládacie prvky automatického dopĺňania a viac.

    Automatické dopĺňanie je váš priateľ

    Povolenie prehliadača automatickému vyplňovaniu formulárov vyžaduje, aby si návštevníci robili menej, takže je pravdepodobnejšie, že vyplnia formulár a zaregistrujú / kúpia váš produkt.. Automatické dopĺňanie v prehľadávačoch: Deep Dive je to vynikajúci článok o eBay (a mali by vedieť).

    Automatické dopĺňanie je v súčasnosti jedinou dostatočnou technikou na dosiahnutie súladu s AA Kritérium úspechu 1.3.5: Identifikácia účelu vstupu.

    Make Polia formulára budú vyzerať ako polia formulára

    Prehliadače štandardne zobrazujú vstupné polia formulárov ako polia. V každom prípade ich upravte pomocou okrajov, čalúnenia a orámovania, ale ponechajte ich ako škatule. Mnoho návrhárov postupovalo podľa vzoru materiálového dizajnu spoločnosti Google pred rokom 2017, keď používatelia zadávali text pomocou jedného riadku:

    Vstup pôvodného dizajnu materiálu skôr s horizontálnou líniou ako obdĺžnikovým rámčekom

    Google však zistil, že riadok pod starými textovými poľami nebol pre niektorých používateľov jasný, často zamieňaný s oddeľovačom, a zmenil vzhľad. V test použiteľnosti so 600 účastníkmi to zistili

    uzavreté textové polia s obdĺžnikovým (krabicovým) tvarom dosahovali lepšie výsledky ako polia s povolenou čiarou … Dnes sa tieto nové textové polia objavujú vo všetkých produktoch Google od prihlasovacích stránok účtu po formuláre Google..

    Ak uvažujete o prijatí úplnej knižnice používateľského rozhrania Material Design spoločnosti Google, prečítajte si Zastavte používanie textových polí Material Design! Matsuko Friedland, aby ste zistili, či vyhovuje vašim potrebám.

    Označte všetky polia formulára

    Všetky polia formulára (textové vstupy, zaškrtávacie políčka, prepínače, posúvače atď.) Musia byť označené. Najlepším spôsobom, ako to dosiahnuť, je použiť HTML ; ako hovorí WCAG, „štandardné ovládacie prvky HTML už spĺňajú toto kritérium úspechu, keď sa používajú podľa špecifikácie“.

    Tu je ukážka, ktorú som vyrobil z pole neznačeného formulára vs pole označeného formulára. Vyzerajú rovnako, ale ten horný nemá správne označenie, zatiaľ čo ten druhý. Kliknite do textovej menovky dolnej a uvidíte, že sa zameriava na priradený vstup.

    falošné vs. skutočné porovnanie štítkov

    Toto uľahčuje zameranie vstupu pre niekoho, kto má ťažkosti s ovládaním motora – alebo možno pre vás, pokúšajúci sa skontrolovať malé začiarkavacie políčko na malej obrazovke na hrbolatom vlaku. Je to tiež dôležité pre používateľov čítačky obrazovky, ktorí budú prehľadávať polia vo formulári (štandardne sú tabeláciou možné len odkazy a polia formulárov); keď kartu vložia do vstupného poľa, čítačka obrazovky oznámi obsah súvisiaceho štítku.

    Kód je jednoduchý. Vstupnému poľu sa pridelí jedinečný identifikátor a štítok je s ním spojený pomocou symbolu pre atribút:

    
    

    Skrývanie štítkov

    Príležitostne možno nebudete chcieť viditeľný štítok. Alebo dizajnér nechce a nechcete ďalší boj na parkovisku. Tu je príklad, keď sa štítok s nápisom „Hľadať“ pred vstupom zdá byť nadmerne.

    Potom zadajte vstupné pole s tlačidlom „Hľadať“

    Zadávacie pole môžeme priradiť k textu „Hľadať“, ktorý je pomocou tlačidla Odoslať obsah aria-labelledby:

    
    

    Mohli sme použiť aria-label (s ktorými sme sa stretli skôr, keď hovoríme o odkazoch):


    Vždy je však lepšie uprednostniť viditeľný text na stránke, pretože ten bude preložený, ak bude stránka spustená prostredníctvom prekladateľského nástroja, zatiaľ čo text „skrytý“ v atribútoch HTML nebude. (Špička klobúku Adrianovi Rosellimu za tento tip, z jeho nádherného článku Moja priorita metód označovania kontroly.)

    Najčastejšie chyby na najvyšších miliónoch domácich stránok

    Preskúmali sme hlavné prekážky, ktoré bránia webovým stránkam elektronického obchodu, ako ich uviedli používatelia s určitou formou narušenia. Teraz sa pozrime na oveľa širšiu skupinu webových stránok – domovské stránky najlepších 1 000 000 webových stránok, automaticky analyzované pomocou WebAIM v auguste 2019. 98% analyzovaných stránok malo najmenej jednu chybu. Najčastejšie chyby sú

    1. Text s nízkym kontrastom (86,1%)
    2. Chýba alternatívny text pre obrázky (67,9%)
    3. Prázdne odkazy (58,9%)
    4. Chýbajú štítky na zadanie formulára (53,2%)
    5. Chýbajúci jazyk dokumentu (30,5%)

    Vyššie sme sa zaoberali nízkym kontrastom, odkazmi a vstupmi formulárov. Teraz sa pozrime, ako sa môžeme vyhnúť ďalším veľmi častým chybám.

    8) Poskytnite textové alternatívy pre všetky obrázky, video a zvuk

    V skratke: každá informácia oznámená prostredníctvom obrázka alebo videa musí mať textový ekvivalent.

    každý musí mať alternatívny text („alt text“), ktorý je možné oznámiť návštevníkom so zrakovým postihnutím alebo návštevníkom s nízkym prenosovým / drahým dátovým plánom, ktorí v prehliadačoch obrázky vypli. Zahŕňa to obrázky textu.

    Tu sú základné pravidlá:

    • Ak je obrázok čisto dekoratívny, musí mať prázdny alternatívny text: alt = "". (Čisto dekoratívne obrázky by však pravdepodobne mali byť v CSS.)
    • Ak je obrázok opísaný v texte tela, mal by mať prázdny alternatívny text (alt = ""), aby sa predišlo opakovaniu. Ale buďte opatrní, ak je v
      – pozri Ako sa máš?? pre viac.
    • Ak je obrázok jediným obsahom odkazu (napríklad kliknutím na logo vašej organizácie sa dostanete na domovskú stránku), alternatívny text by mal opisovať cieľ odkazu. Napríklad, alt = "domovská stránka".
    • Nepoužívajte písma ikon; môžu byť naozaj zlé pre dyslektických ľudí. Ak ich používate, previesť ich na SVG.

    Video a audio alternatívny text

    Nezabudnite, že zvukový obsah potrebuje alternatívny text pre ľudí so sluchovým postihnutím. To znamená prepisy podcastov a titulkov vo videách. A opäť: neprehrávajte médiá.

    9) Pridajte správny jazyk dokumentu

    V skratke: informujte podpornú technológiu o jazyku, v ktorom sa nachádza váš text.

    30% domovských stránok nedeklaruje jazyk, v ktorom je napísané, čo môže pre používateľov čítačky obrazovky spôsobiť zmätok. Je to dôležité, pretože slovo „šesť“ sa vyslovuje veľmi odlišne, ak je napríklad veta v angličtine alebo francúzštine.

    Je ľahké to vyriešiť pridaním atribútu lang k vášmu prvku HTML:

    „En“ hovorí čítačke obrazovky (alebo prekladovému softvéru), že táto stránka je v angličtine. „Es“ je španielčina, „fr“ je francúzština a tak ďalej. Pre väčšinu jazykov je jazykovú značku možné ľahko určiť. W3C má sprievodcu Výber jazykovej značky.

    Ak stránka obsahuje obsah v inom jazyku, ako je hlavný deklarovaný, pridajte do prvku, ktorý obklopuje tento obsah, atribút jazyka. Napríklad na stránke vyhlásenej za angličtinu:

    Ak chcete chatovať a matador, v nejakom pohode cabana
    A stretnúť sa senoritas podľa skóre, Espana por prospech

    10) Pomôžte návštevníkovi obísť váš obsah

    V krátkosti: použite prvky orientačného bodu HTML, aby používatelia asistenčných technológií pomohli pochopiť a navigovať váš obsah.

    Keď na vašu stránku príde zrakový návštevník, môže ho vizuálne naskenovať, aby pochopil, kde je navigácia a kde začína hlavný obsah. Používateľ čítačky obrazovky to nemôže urobiť. HTML5 nám však dáva niekoľko nových značiek na označenie týchto oblastí a podporné technológie obsahujú skratky, ktoré môžu preskočiť (alebo preskočiť) na orientačné body, ako sú hlavička, zápätie, navigácia a podobne.

    Toto je šesťminútové video, ktoré som urobil s Léonie Watson, webovou vývojárkou a používateľom čítačky obrazovky, o tom, ako používa čítačku obrazovky na preskúmanie týchto sémantík na navigáciu na mojich osobných stránkach:

    • Zabalte svoj hlavný obsah, tj veci, ktoré nie sú hlavičky, primárna navigácia alebo päta, do
      prvok. Takmer vo všetkých prípadoch by mal existovať iba jeden
      na stránku. Všetky prehliadače (IE9 +) vám umožňujú tento štýl upravovať a podporné technológie vedia, čo s tým robiť.
    • Zalomte hlavičku (logo značky, strapline, nadpis stránky) do a
      prvok.
    • Zabalte si pätu (právne veci, kontaktné údaje, oznámenie o autorských právach atď.) Do a
    • Označte svoju primárnu navigáciu pomocou
        zabalené v a prvok. Toto môže byť vnorené vo vnútri

        ak to zodpovedá vizuálnemu vzhľadu stránky.
      • Reklama a nepodstatný obsah by mali byť zabalené do
      • Ak máte na stránke viac ako jeden produkt / video / správu / príspevok do blogu, každú z nich zabalte do
        prvok.

      V jeho prieskum používateľov čítačky obrazovky, WebAIM zistil, že 26% používateľov čítačky obrazovky často alebo vždy používa tieto orientačné body pri navigácii po stránke.

      Balenie samostatných častí obsahu do

      pomáha spoločnosti Apple WatchOS optimálne zobrazovať obsah. Pozri môj článok Praktická hodnota sémantického HTML pre viac informácií.

      11) Používajte HTML správne

      V skratke: porozumieť sémantike a predvolenému správaniu prvkov HTML; použite správny prvok pre svoj obsah.

      Spoločnou témou v tomto článku je použitie správnych prvkov HTML. Použitie a štítok má vstavané správanie prehliadača, ktoré zameriava svoje priradené vstupné pole; použitím

      je vhodnejšie ako

      pretože umožňuje používateľom čítačky obrazovky skočiť priamo na dôležitý obsah a úplne nenápadne pre tých, ktorí nepoužívajú čítačku obrazovky.

      Ďalším príkladom je použitie a