Checklist ng Pag-access sa Web

Ang kakayahang magamit ay ang pagsasanay sa pagtiyak ng mga website ay pantay na magagamit sa mga taong may kapansanan kaya mayroon silang pantay na pag-access sa mga kalakal at serbisyo na ibinibigay ng mga site. Ito ay isang mahalagang bahagi ng propesyonal na disenyo ng web at pag-unlad.


Contents

Bakit Dapat Mong Alagaan Pag-access?

Maraming mga kadahilanan kung bakit dapat tiyakin ng mga developer, designer, at kanilang mga employer / kliyente na ang pag-access ay isang maaga at mahalagang bahagi ng proseso ng pag-unlad ng web.

  • Sa maraming mga teritoryo, tulad ng USA, EU, UK, Israel, at Japan, isang batas na kinakailangan na hindi magpakilala sa mga tao dahil sa kanilang kapansanan. Sa USA noong nakaraang taon, 2,235 bagong ADA Website lawsuits ay isinampa sa federal court. Iyon ay isang oras.
  • Ang mga maa-access na site ay may posibilidad na maging mas mahusay na naka-code, mas matatag at ranggo nang maayos sa mga search engine.
  • Ang mga maa-access na site ay may posibilidad na mas magagamit para sa mga di-kapansanan na mga bisita, humahantong sa higit na kasiyahan at pagbabalik-loob.
  • Ang mga hindi magagandang site ay masama para sa negosyo. Noong 2019, a UK survey natagpuan na higit sa 4 milyong mga tao ang nag-abandona sa isang website ng tingian dahil sa mga hadlang sa pag-access na kanilang nahanap. Ang nawalang negosyong iyon, ang ‘Click-Away Pound’, ay £ 17.1 bilyon. Iyon ay bilyon. Sa UK lamang.
  • Hindi magandang negosyo ang kusang pagtalikod ng mga potensyal na customer.

Ang Karaniwang Pamantayan at mga Suliranin

Sa kabutihang palad, ang W3C (ang katawan na gumagawa ng marami sa mga pamantayan na umaasa sa web) ay may pamantayan sa kung paano mai-access ang mga website. Ang tawag dito Mga Alituntunin sa Pag-access sa Nilalaman ng Web (WCAG). Mayroong tatlong mga antas ng conformance (A, AA, AAA) na may ‘A’ na pinakamababang antas ng pag-access. Inirerekumenda kong maglayon ka para sa antas ng AA.

Sa kasamaang palad, ang WCAG ay isang mahaba, tuyo at napaka-teknikal na basahin, kaya tingnan natin kung ano ang magagawa mo nang madali at makuha ang pinakamalaking bang para sa iyong usang lalaki. Hindi ito isang checklist ng Lahat ng Kailangan mong Malaman; ito ay isang listahan ng mga pinaka-karaniwang error, at ang mga error na sinasabi ng mga taong may kapansanan ay ang kanilang pangunahing mga blocker, na may mga praktikal na mungkahi upang malutas ang mga problema. Bukas ang lahat ng mga panlabas na link sa isang bagong tab.

Sa pag-click sa Click-Away Pound, tinanong ang mga respondents na may mga kapansanan kung ano ang pangunahing mga bloke sa kanila sa pagkumpleto ng mga pagbili. Narito ang mga nangungunang hadlang (pinapayagan ang maraming sagot):

  1. Mga pahina ng mumo na may sobrang nilalaman – 66%
  2. reCAPTCHA pagsubok – 59%
  3. Mahina legibility (kaibahan, layout ng teksto) 56%
  4. Ang paggambala ng paglipat ng mga imahe at graphics – 53%
  5. Mahina ang impormasyon ng link – 59% (77% para sa mga gumagamit ng screen reader)
  6. Form ng pagpuno ng 56%

Paano Mapapabuti ang Pag-access sa Website

Una, tandaan na wala sa nangungunang 5 ang mga isyung teknikal – sila ay isang disenyo o pagkakamali sa pagkakasulat.

1) Masyadong Karamihan sa Nilalaman

Sa madaling sabi: basahin ang teksto sa mga seksyon na may mga heading at mga listahan ng bullet. Gumamit ng simpleng wika.

Ito ay kilalang-kilala na habang tumataas ang bilang ng mga pagpipilian, gayon din ang pagsisikap na kinakailangan upang mangolekta ng impormasyon at gumawa ng magagandang desisyon. Pareho ito sa sobrang nilalaman – sa lalong madaling panahon ito ay magiging labis. Ang pag-aalaga ng nilalaman sa mga mahahalaga ay isang bapor na nauukol sa oras; tulad ng isinulat ni Mark Twain (di-umano’y): “Wala akong oras upang sumulat ng isang maikling sulat, kaya’t sumulat ako ng isang mahabang halip.”

Ang pinakabagong libro Pagdidisenyo Ay Pagsusulat nagmumungkahi

Nais ng mga tao na ma-laktaw ang mahahabang mga bloke ng teksto, anuman ang paningin o audio, kaya napakahalaga na istraktura ang iyong longform na pagsulat sa mga header, maikling talata, at iba pang pinakamahusay na kasanayan sa disenyo ng nilalaman..

Kaya:

  • Magkaroon lamang ng isa

    sa isang pahina.

  • Gumamit ng mga sub-heading nang malaya; sinisira nito ang isang ‘slab’ ng teksto para sa mga nakitang mga gumagamit, habang ang mga gumagamit ng mga teknolohiyang tumutulong tulad ng mga mambabasa ng screen ay maaaring gumamit ng isang short-cut key upang tumalon sa pagitan ng mga heading o makakuha ng isang mapa ng kaisipan ng nilalaman mula sa istruktura ng heading..
  • Huwag laktawan ang isang antas ng heading. Halimbawa, kung gumagamit ka ng

    , tiyakin na pinauna ito ng isang

    .

  • Gumamit ng mga bullet list (tulad nito!) Na naka-sign up nang tama sa HTML bilang
      ,
    • . Ipapahayag ng mga mambabasa ng Screen ang “Listahan ng 10 mga item” (at payagan ang mga gumagamit na tumalon sa kanila).

    Gumamit ng Plain English

    Monzo Bank’s “Ang aming tono ng boses” gabay ipinaliwanag ang kahalagahan ng simpleng wika:

    Noong 2010, ang abogado ng US na si Sean Flammer ay nagpatakbo ng isang eksperimento. Hiniling niya sa 800 hukom ng korte ng circuit na magkasama sa isang tradisyonal na ‘legalese’ na argumento, o isa sa tinatawag niyang ‘plain English’.

    Labis na ginusto ng mga hukom ang simpleng bersyon ng Ingles (66% hanggang 34%), at ang kagustuhan na gaganapin kahit na ang kanilang edad o background.

    Mga tala ng Flammer (PDF) ng plain na bersyon ng Ingles:

    Mas maikli ito sa halos isang pahina, kaya malinaw na tinanggal ang mga hindi kinakailangang mga pangungusap at salita. Ang mga pangungusap nito ay average na 17.8 mga salita, kumpara sa 25.2 mga salita.

    Nagtapos siya:

    Mayroon kaming 25 taon ng empirikal na pananaliksik na humahantong sa isang hindi maiiwasang konklusyon: kung nais mong mangyaring at mahikayat ang iyong mambabasa, sumulat sa payak na Ingles.

    2) ReCAPTCHA

    Sa madaling sabi: huwag gawin ang iyong mga gumagamit na tumalon sa mga potensyal na imposible na mga hoops upang mai-save ang oras ng developer.

    Ang mga respondente ay madalas na pinag-uusapan tungkol sa isang matanda Bersyon ng ReCAPTCHA:

    mga bersyon ng reCAPTCHA na may wobbly text na dapat mong muling i-type

    Nakikipagpunyagi ako sa mga imahe at kinakailangang i-type ang mga numero o titik. Sa uri kung saan kailangan kong mag-click kung aling mga imahe ang may tindahan o kung ano man, lagi akong nawawalan ng gulo o nalilito at gumamit ng enerhiya na wala ako …

    Ang wobbly na mga titik ng estilo ng reCAPTCHA ay tinanggal ngayon. Mas pangkaraniwan na makita ang isang mas bagong pagkakatawang-tao na tinawag na “Walang CAPTCHA reCAPTCHA” (kilala rin bilang “Hindi ako isang robot “Checkbox) na nangangailangan ng gumagamit upang suriin ang isang kahon na nagpapatunay na hindi sila isang robot at gumagamit ng lihim na voodoo upang puntos ang gumagamit. Kung pumasa sila, hindi kinakailangan ang karagdagang pakikipag-ugnayan. Gayunpaman, kung nabigo sila, isang karagdagang hamon ang ipapakita:

    Ang bahagyang screenshot ng isang captcha na hinihiling ng gumagamit ay i-click ang lahat ng mga parisukat na nagpapakita ng mga dalandan

    Tandaan na ang uri ng CAPTCHA na nangangailangan ng isang gumagamit na i-click ang lahat ng mga parisukat na may (sabihin) ang isang sign sign ay hindi kinakailangan pang-internasyonal. Tulad ng isinusulat ni Terence Eden, Hindi pinapatunayan ng mga CAPTCHA na ikaw ay tao – pinatunayan nila na Amerikano ka.

    Ang pinaka-naa-access na form ng reCAPTCHA ay reCAPTCHA v3 na hindi nangangailangan ng pakikipag-ugnayan ng gumagamit, ngunit kailangan mong gumawa ng mas maraming trabaho upang makitungo sa mga pagbisita na nabigo sa pagsubok:

    Ito ay isang purong JavaScript API na nagbabalik ng isang marka, na nagbibigay sa iyo ng kakayahang kumilos sa konteksto ng iyong site: halimbawa na nangangailangan ng karagdagang mga kadahilanan ng pagpapatunay, pagpapadala ng isang post sa pag-moderate, o throttling bots na maaaring pag-scrap ng nilalaman.

    3) Mahina na Kakayahan

    Sa madaling sabi: siguraduhin na ang teksto ay may sapat na kaibahan, mababasa at hindi makatwiran.

    • Tiyaking sapat na kaibahan. Ang isa sa mga pinaka-karaniwang blockers ng pag-access sa web ay hindi magandang pagkakaiba sa pagitan ng teksto at background. Ang mga patnubay ng W3C ay nangangailangan ng isang konteksto na ratio ng hindi bababa sa 4.5: 1, maliban sa malakihan na teksto at mga imahe ng malakihang teksto na dapat magkaroon ng isang konteksto na ratio ng hindi bababa sa 3: 1 (ang mga logo at teksto ng ‘hindi sinasadya’ ay exempt). Maraming mga utility na maaaring masukat ang mga kaibahan na mga ratio para sa iyo; ang aking personal na paborito ay mahusay ni Ada Rose Cannon kaibahan ng widget, na kung saan ay isang kapaki-pakinabang na bookmarklet ng browser na nagtatampok ng mga lugar na hindi sapat na kaibahan sa iyong pahina.
    • Huwag magkaroon ng mga head-all-capital. Mayroong katibayan na mas mahirap silang basahin dahil ang mga kapital na titik ay pareho ang taas, kaya hindi namin makilala ang hugis ng mga karaniwang salita. Bilang karagdagan, ang ilang mga mambabasa sa screen ay mag-e-spell ng mga grupo ng mga malalaking titik na parang mga pagdadaglat (tulad ng BBC, DOJ, atbp). Kung mayroon kang lahat ng mga ulunan ng ulo, isulat ang mga ito sa isang normal na kaso sa iyong HTML at ibahin ang mga ito sa CSS pagbabago ng teksto: malalaking titik.
    • Teksto ng kaliwa. (Para sa mga pahina sa kanan-kaliwang wika tulad ng Arabo o Hebreo, magkatugma sa teksto.) Huwag bigyang katwiran ito, dahil pinapahirap nito na basahin ang mga taong may dislexia. Ang Ang gabay sa estilo ng British Dyslexia Association nagmumungkahi din

      Gumamit ng sans serif font, tulad ng Arial at Comic Sans, dahil ang mga letra ay maaaring lumitaw nang hindi masikip. Kasama sa mga kahalili ang Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) Nakaka-distract na Mga Imahe at Graphics

    Sa madaling sabi: payagan ang mga gumagamit na ihinto ang anumang paggalaw; respetuhin ang kanilang mga setting ng operating system; huwag awtomatikong maglaro ng video.

    Isang sumasagot sa pag-click sa Click-Away Pound na sumulat,

    Ang mga site na dati kong ginagamit sa maliit na isyu ay nagiging problema na ngayon habang kumukuha sila ng paglipat ng mga adverts at patuloy na naglo-load ng higit pang mga adverts habang namimili ka.

    Ang pinaka-pangunahing antas ng WCAG ay nangangailangan ng “Para sa anumang gumagalaw, kumikislap o mag-scroll na impormasyon na (1) awtomatikong nagsisimula, (2) ay tumatagal ng higit sa limang segundo, at (3) ay iniharap nang kahanay sa iba pang nilalaman, mayroong isang mekanismo para sa gumagamit upang i-pause, ihinto, o itago ito maliban kung ang paggalaw, kumikislap, o pag-scroll ay bahagi ng isang aktibidad kung saan ito ay mahalaga ”.

    Ang pagkagambala ay isang inis – lalo na para sa mga taong may ADHD o iba pang mga kapansanan sa nagbibigay-malay. Ngunit ang paggalaw at pag-flash ay maaari ring maging sanhi ng mga seizure, kaya ang mga patnubay sa WCAG ay nangangailangan na ang nilalaman ay hindi dapat kumikislap ng higit sa 3 beses sa anumang 1 pangalawang panahon.

    Igalang ang Pagpipilian ng Gumagamit para sa Mga Animasyon

    Ang lahat ng mga pangunahing operating system ay nagpapahintulot sa gumagamit na magpahayag ng kagustuhan para sa nabawasan na paggalaw sa screen – marahil dahil mayroon silang paggalaw ng vestibular spectrum disorder. Ang iyong website ay maaaring makita kung ang gumagamit ay nagawa ito sa CSS mas pinipili-nabawasan-galaw query sa media.

    Dito, pinapayagan lamang namin ang isang pindutan upang magawa kung ang gumagamit ay hindi nagpahayag ng kagustuhan:

    @media (pinipili-nabawasan ang paggalaw: walang kagustuhan) {
    pindutan {
    / * Ang mga vibrate 'keyframes ay tinukoy sa ibang lugar * /
    animation: mag-vibrate ng 0.3s na linya na walang hanggan pareho;
    }
    }

    Kung nais mong i-retrofit muli ang isang site na maraming mga panuntunan sa animation, maaaring ang mga sumusunod itigil ang lahat ng dating ipinahayag na mga CSS animation:

    @media (pinipili-nabawasan ang paggalaw: bawasan) {
    *,
    * :: bago,
    * :: pagkatapos ng {
    tagal ng animation: 0.001s! mahalaga;
    tagal ng paglipat: 0.001s! mahalaga;
    }
    }

    Sa paksa ng paggalang sa mga kagustuhan ng operating system ng gumagamit, maaaring gusto mong isaalang-alang pagdidisenyo ng iyong website para sa madilim na mode.

    5) Mahinang Impormasyon sa Link

    Sa madaling sabi: gumawa ng mga link na makikilala, na may natatanging teksto ng link. Babalaan ang mga gumagamit kung ang isang link ay magbubukas ng isang bagong tab o isang file.

    Ang isa sa mga pangunahing sanhi ng mahihirap na link ay madalas na hindi magandang pagkopya. Pinapayagan ng karamihan sa mga mambabasa ng screen ang gumagamit na mabilis na makita ang isang listahan ng mga link sa isang pahina (sa pinaka-ginagamit na komersyal na screen reader, JAWS, ang shortcut sa keyboard ay Ins + F7; libreng NVDA screen reader, ang parehong keyboard shortcut ay nagdadala ng isang Element List na naglilista ng mga link ng pahina, heading, at mga landmark).

    Gayunpaman, kung ang bawat link ay may teksto na nagsasabing “Mag-click dito” o “Magbasa nang higit pa”, na walang ibang makilala sa kanila, ito ay walang silbi. Ang pinakamadaling paraan upang malutas ito ay ang pagsulat lamang ng natatanging teksto ng link, ngunit kung hindi iyon posible, maaari mong over-sumakay ang link na teksto para sa tulong ng teknolohiya sa pamamagitan ng paggamit ng isang natatanging katangian ng aria-label sa bawat link.

    Narito ang isang magandang halimbawa mula sa Website ng Joomla:

    Joomla website, na nagpapakita ng dalawang magkakaibang mga kwento, bawat isa ay magkapareho

    Ang nakikitang teksto ng link ay simpleng “magbasa nang higit pa”, ngunit ginagamit ni Joomla aria-label mga katangian upang gawin ang bawat natatangi upang matulungan ang teknolohiya:

    Magbasa nang higit pa
    
    Magbasa nang higit pa

    Dahil sa aria-label gagamitin ang teksto sa halip na link ng teksto ng mga tumutulong na teknolohiya, inirerekumenda ng W3C na simulan ang teksto na ginamit sa aria-label na may teksto na ginamit sa loob ng link na “papayagan nito ang pare-pareho na komunikasyon sa pagitan ng mga gumagamit”.

    Tandaan: Ang ilang masamang payo na nakikita ko pa rin sa mga lumang site ay upang magdagdag ng paliwanag na teksto sa mga link gamit ang pamagat katangian:

    Magbasa nang higit pa>

    Huwag gawin ito. Ang ang pamagat ay hindi nakalantad sa karamihan sa mga mambabasa sa screen (ginamit ng mga developer ang mga keyword na ito para sa mga layunin ng “SEO”, kaya hindi pinagana ng default ang mga nagbebenta ng screen reader ito), at ang mga browser ay nagpapakita ng mga katangian ng pamagat bilang ‘tooltips’ na magagamit lamang sa mga gumagamit ng mouse sa hover.

    Ang mga Link ay Dapat Mukhang Mga Link

    Bilang default, salungguhitan ng mga browser ang mga link. Pinakamabuting huwag baguhin ito, ngunit kung mawalan ka ng away sa parke ng kotse kasama ang taga-disenyo tungkol dito, ang link na teksto ay dapat magkaroon ng 3: 1 na ratio ng kaibahan mula sa nakapalibot na teksto na hindi naka-link at dapat magbigay ng ilang ‘di-kulay na tagadala “Na ang mga ito ay isang link kapag nag-hover o nag-focus, halimbawa:

    a: hover, a: focus {text-dekorasyon: salungguhitan;}

    Ang istilo ng pokus ay nagiging sanhi ng link na maging salungguhit kapag ang isang hindi gumagamit ng mouse ay nakatuon sa ito mula sa keyboard, stylus o input ng boses. Karaniwan, kapag ang isang bagay sa isang pahina ay may istilo ng hover, dapat ding bigyan ng istilo ng pokus.

    Ang ‘hindi kulay na taga-disenyo’ (sa aming kaso, isang salungguhitan) ay nagsisiguro na ang mga bisita na may mababang paningin o pagkabulag ng kulay ay makikita ang pagbabago sa hover o pokus. (Awtomatikong ipapahayag ng mga mambabasa ang “Link” bago ang link ng teksto.)

    Sabihin sa mga Tao Kung Nagbubukas ang Link ng Bagong Tab / Pahina

    Maaari itong malito sa isang bisita kung ang pag-activate ng isang link ay magbubukas ng isang bagong tab o isang bagong window, lalo na kung ang ilang mga link lamang sa isang pahina ay gawin ito (halimbawa, ang mga panlabas na link lamang ang nagbubukas ng isang bagong tab). Kung dapat mong gawin ito, dapat mong alerto ang gumagamit alinman sa link ng teksto, o gamit ang pamamaraan ng aria-label sa itaas.

    Sabihin sa mga Tao Kung ang Link ay Sa isang File

    Kung ang isang link ay sa isang file (halimbawa, isang PDF o isang video), sabihin sa gumagamit sa link ng teksto. Huwag itago ito aria-label, dahil ito ay maaaring maging kapaki-pakinabang para sa maraming mga nakitang mga gumagamit (ang ilang mga mobiles ay hindi maaaring magbukas ng isang .docx file, halimbawa). Kung ito ay isang malaking file, isaalang-alang ang pag-alerto sa gumagamit ng tinatayang laki; maaaring hindi nila nais na mag-download ng isang malaking file ng video sa 3G.

    Maaari mo ring gamitin ang pag-download katangian, na nagiging sanhi ng pagbukas ng browser ng katutubong pag-download ng pag-download ng file ng operating system. Ang pagsasama-sama ng lahat, ang code ay magiging ganito:

    Taunang ulat (PDF, 240 MB)

    6) Ang isa pang Error sa Disenyo: Pag-alis ng Tuwing singsing

    Sa madaling sabi: siguraduhing laging nakikita ng isang gumagamit ng keyboard kung saan sila nakatuon sa kasalukuyan.

    Nabanggit na namin : pokus mga istilo dati. Ang mga ito ay isang napakahalaga na tagapagpahiwatig ng visual para sa mga taong hindi maaaring gumamit ng mouse sa anumang kadahilanan: marahil mayroon silang RSI, o Parkinson o Maramihang Sclerosis. Bilang default, ipinapakita ng mga browser ang isang singsing na pokus sa kasalukuyang elemento na nakatuon. Narito ang link sa Home sa aking personal na site, na nakatuon sa isang browser ng Chromium:

    Ang screenshot ng default na singsing ng default ng focus ng Chromium sa paligid ng isang link (na kung saan ay isang imahe din)

    Gayunpaman, isinasaalang-alang ng ilang mga tao ang aesthetically na hindi kasiya-siya kapag gumagamit sila ng mouse at patayin ito sa CSS, at sa gayon ay iniiwan ang site na hindi naa-access sa mga gumagamit ng keyboard.

    Magpasok ng isang bagong pamantayan, pinasimunuan ng Firefox, tinawag : nakikita ang pokus. Maglalapat ito ng isang singsing na pokus sa isang elemento kung naabot ito ng isang keyboard o isang aparato na hindi tumuturo sa mouse ngunit walang ipinapakita sa mga gumagamit ng mouse. Tulad ng sinusuportahan lamang ito sa Firefox (sa oras ng pagsulat), Iminungkahi ni Patrick Lauke ang sumusunod na CSS upang maglaro ng mabuti sa lahat ng mga browser:

    pindutan: tumuon {/ * ilang mga kapana-panabik na mga istilo ng pagtuon ng pindutan * /}
    pindutan: pokus: hindi (: makikita ang pokus) {
    / * Alisin ang lahat ng mga naka-istilo na estilo ng pindutan
    kung ang pindutan ay may pokus ngunit ang browser ay hindi normal
    ipakita ang mga estilo ng default na pokus * /
    }
    pindutan: makikita ang pokus {/ * ilan kahit na * higit pa * nakapupukaw na mga istilo ng pokus na pokus * /}

    7) Form Punan

    Sa madaling sabi: mga patlang ng disenyo ng form na mukhang mga patlang ng form, ang bawat isa ay nauugnay sa isang label. Huwag paganahin ang auto-punan.

    Ibinibigay ang kahalagahan ng mga form sa mga site ng eCommerce, nakakagulat sa akin kung gaano karaming mga hindi naa-access na form ang nakikita ko. Kadalasan ito ay dahil ang mga lumang browser ay hindi pinapayagan ng marami sa paraan ng pag-istil ng mga elemento ng form, kaya ang mga ito ay pinatotohan ng mga developer ng iba pang mga elemento ng HTML. Pinapayagan ng mga modernong browser kaakit-akit na mga checkbox, pindutan ng radyo, pasadyang pumili ng mga sangkap at combobox, naa-access ang mga kontrol ng autocomplete at iba pa.

    Ang Autofill ay Kaibigan mo

    Pinapayagan ang mga browser sa mga form na auto-punan ang mga bisita na gumawa ng mas kaunti, kaya mas malamang na makumpleto nila ang isang form at mag-sign up / bumili ng iyong produkto. Autofill sa Mga Browser: Isang Malalim na Dive ay isang mahusay na artikulo ng eBay tungkol dito (at dapat nilang malaman).

    Gayundin, ang autocomplete ay ang tanging sapat na pamamaraan sa kasalukuyan para sa pagkamit ng pagsunod sa AA Criterion ng Tagumpay 1.3.5: Kilalanin ang Layunin ng Input.

    Gumawa ng Mukhang Mga Patlang na Form

    Bilang default, ipinapakita ng mga browser ang mga patlang na input form bilang mga kahon. Sa lahat ng paraan, istilo ng mga ito sa mga margin, padding, at hangganan, ngunit panatilihin ang mga ito bilang mga kahon. Sinunod ng maraming taga-disenyo ang pattern ng Disenyo ng Materyal ng Google ng pre-2017 ng paggamit ng isang solong linya para maipasok ng gumagamit ang teksto:

    Lumang input ng materyal na disenyo, na may linya ng horizonatal sa halip na hugis-parihaba na kahon

    Gayunpaman, natagpuan ng Google na ang linya sa ilalim ng mga lumang patlang ng teksto ay hindi malinaw sa ilang mga gumagamit, na madalas nalilito sa isang divider, at binago ang disenyo. Sa isang pagsubok sa kakayahang magamit kasama ang 600 mga kalahok, natuklasan nila iyon

    nakapaloob na mga patlang ng teksto na may hugis na hugis-parihaba (kahon) na gumanap nang mas mahusay kaysa sa mga may linya ng linya … Ngayon, ang mga bagong patlang na teksto ay lumilitaw sa buong mga produkto ng Google mula sa mga pahina ng pag-sign-in sa mga pahina sa Google.

    Kung isinasaalang-alang mo ang pag-ampon ng buong library ng Material Design UI ng Google, basahin Itigil ang paggamit ng mga patlang na Tekstong Disenyo ng Materyal! ni Matsuko Friedland upang makita kung natutugunan nito ang iyong mga pangangailangan.

    Lagyan ng label ang Lahat ng Mga Patlang ng Porma

    Ang lahat ng mga patlang ng form (mga input ng teksto, mga kahon ng kahon, mga pindutan ng radyo, mga slider, atbp) ay kailangang may label. Ang pinakamahusay na paraan upang gawin ito ay ang paggamit ng isang HTML ; tulad ng sinabi ng WCAG, “ang mga pamantayan sa HTML na mga kontrol ay nakakatugon sa tagumpay na tagumpay na ito kapag ginamit ayon sa pagtutukoy”.

    Narito ang isang demo na ginawa ko sa isang unlabelled form na patlang kumpara sa isang patlang na may label na form. Mukha silang magkapareho, ngunit ang tuktok ay walang tamang label, samantalang ang pangalawa. Mag-click sa label ng teksto ng ibaba, at makikita mo na nakatuon ito sa nauugnay na input.

    pekeng kumpara sa totoong paghahambing sa label

    Ginagawa nitong nakatuon ang isang input na mas madali para sa isang tao na may mga paghihirap sa kontrol sa motor – o marahil para sa iyo, sinusubukan na suriin ang isang maliit na checkbox sa isang maliit na screen sa isang nakabulabog na tren. Mahalaga rin ito para sa mga gumagamit ng screen reader na mag-tab sa mga patlang sa isang form (bilang default, tanging ang mga link at mga patlang ng form ay ma-focus sa pamamagitan ng pag-taba); kapag nag-tab sila sa isang larangan ng pag-input, ipapahayag ng screen reader ang mga nilalaman ng nauugnay na label.

    Ang code para sa ito ay simple. Ang larangan ng input ay binigyan ng isang natatanging ID, at ang label ay nauugnay dito gamit ang para sa katangian:

    
    

    Pagtatago ng Mga Label

    Paminsan-minsan, baka hindi mo nais ang isang nakikitang label. O hindi ang taga-disenyo, at ayaw mo ng ibang away sa parke ng kotse. Pa rin, narito ang isang halimbawa kapag ang isang label na nagsasabing “Paghahanap” bago ang pag-input ay naramdaman na labis na bayad.

    Patlang ng pag-input, na may pindutan na may label na 'search' pagkatapos

    Maaari naming iugnay ang larangan ng pag-input sa teksto na “Paghahanap”, na kung saan ay ang mga nilalaman ng pindutan ng isumite gamit aria-labelledby:

    
    

    Maaaring ginamit namin aria-label (na nakilala namin nang mas maaga kapag pinag-uusapan ang mga link):


    Ngunit mas mahusay na mas gusto ang nakikitang teksto sa isang pahina dahil isasalin kung ang pahina ay pinapatakbo ng isang tool sa pagsasalin, samantalang ang teksto ay “nakatago” sa mga HTML na katangian ay hindi. (Hat-tip kay Adrian Roselli para sa tip na ito, mula sa kanyang kamangha-manghang artikulo Aking Priority of Methods para sa Pagmamarka ng isang Control.)

    Karamihan sa mga Karaniwang Kasayahan sa Nangungunang Milyong Pahina ng Bahay

    Tiningnan namin ang mga nangungunang hadlang sa mga site ng eCommerce tulad ng iniulat ng mga gumagamit na may ilang mga kahinaan. Ngayon tingnan natin ang isang mas malawak na hanay ng mga site – ang mga home page para sa nangungunang 1,000,000 mga web site, awtomatikong nasuri ng WebAIM noong Agosto 2019. 98% ng mga pahina na nasuri ay may hindi bababa sa isang pagkakamali. Ang pinaka-karaniwang error ay

    1. Mababang teksto ng kaibahan (86.1%)
    2. Nawawalang alternatibong teksto para sa mga imahe (67.9%)
    3. Walang laman na mga link (58.9%)
    4. Mga nawawalang label ng input form (53.2%)
    5. Nawawalang wika ng dokumento (30.5%)

    Napagkasunduan namin ang mababang kaibahan, mga link at mga input sa itaas. Ngayon tingnan natin kung paano natin maiiwasan ang iba pang mga pangkaraniwang error.

    8) Magbigay ng Mga Alternatibong Teksto para sa Lahat ng Mga Larawan, Video, at Audio

    Sa madaling sabi: ang anumang impormasyong nakipag-ugnay sa pamamagitan ng isang imahe o video ay dapat magkaroon ng katumbas sa teksto.

    Bawat dapat magkaroon ng alternatibong teksto (“alt text”) na maaaring maiparating sa mga bisita na may mga kapansanan sa paningin o sa mga may mababang bandwidth / mamahaling mga plano ng data na nagpatay ng mga imahe sa kanilang mga browser. Kasama dito ang mga imahe ng teksto.

    Narito ang mga pangunahing patakaran:

    • Kung ang imahe ay pulos pandekorasyon, dapat itong walang laman na teksto ng alt: alt = "". (Ngunit pulos pandekorasyon na mga imahe ay dapat na marahil ay sa CSS, pa rin.)
    • Kung ang isang imahe ay inilarawan sa teksto ng katawan dapat itong walang laman na teksto ng alt (alt = ""), upang maiwasan ang pag-uulit. Ngunit mag-ingat kung ito ay sa isang
      – tingnan Paano mo malaman? para sa karagdagang.
    • Kung ang isang imahe ay ang tanging nilalaman ng isang link (halimbawa, maaaring mag-click ang logo ng iyong samahan upang pumunta sa homepage) ang kahaliling teksto ay dapat ilarawan ang patutunguhan ng link. Halimbawa, alt = "home page".
    • Huwag gumamit ng mga icon ng icon; maaari silang maging masamang masama para sa mga taong may dislexiko. Kung gagamitin mo ang mga ito, i-convert ang mga ito sa SVG.

    Video at Audio na Alternatibong Teksto

    Huwag kalimutan na ang nilalaman ng audio ay nangangailangan ng alternatibong teksto para sa mga taong may kapansanan sa pandinig. Nangangahulugan ito ng mga transcript ng mga podcast, at mga subtitle sa mga video. At, muli: huwag mag-autoplay media.

    9) Magdagdag ng Wastong Wika ng Dokumento

    Sa madaling sabi: ipaalam sa teknolohiyang tumutulong sa tulong ang wika na iyong teksto.

    30% ng mga home page ay hindi ipinahayag ang wika na kanilang isinulat, na maaaring gawing nakalilito para sa mga gumagamit ng screen reader. Mahalaga ito sapagkat ang salitang “anim” ay naiiba nang binibigkas kung ang pangungusap ay nasa Ingles o Pranses, halimbawa.

    Madali itong malutas sa pamamagitan ng pagdaragdag ng isang katangian lamang sa iyong elemento ng HTML:

    Ang “en” ay nagsasabi sa isang screen reader (o software ng pagsasalin) na ang pahinang ito ay nasa Ingles. “Es” ay Espanyol, “fr” ay Pranses, at iba pa. Para sa karamihan ng mga wika, ang tag ng wika ay madaling matukoy. Ang W3C ay may gabay sa Pagpili ng isang Tag ng Wika.

    Kung ang pahina ay naglalaman ng nilalaman sa isang wika maliban sa pangunahing ipinahayag nito, magdagdag ng isang katangian ng wika sa isang elemento na nakapalibot sa nilalaman na iyon. Halimbawa, sa isang pahina na ipinahayag na Ingles:

    Kung nais mong makipag-chat a matador, sa ilang mga cool cabana
    At magkita senoritas sa pamamagitan ng puntos, Espana por pabor

    10) Tulungan ang isang Bisita na Lumibot sa Iyong Nilalaman

    Sa madaling sabi: gumamit ng mga elemento ng HTML na palatandaan upang matulungan ang mga gumagamit ng teknolohiyang tumutulong sa pag-unawa at mag-navigate sa iyong nilalaman.

    Kapag ang isang napapanood na bisita ay dumating sa iyong pahina, madali nilang makita ang paningin upang maunawaan kung nasaan ang nabigasyon, at kung saan nagsisimula ang pangunahing nilalaman. Hindi ito magagawa ng isang screen reader. Gayunpaman, binibigyan kami ng HTML5 ng ilang mga bagong tag upang markahan ang mga lugar na ito, at ang mga tumutulong na teknolohiya ay may mga shortcut na maaaring laktawan ang (o laktawan) ang mga landmark tulad ng header, footer, nabigasyon at ang gusto.

    Narito ang isang anim na minuto na video na ginawa ko kay Léonie Watson, isang web developer at gumagamit ng screen reader, kung paano niya ginagamit ang kanyang screen reader upang suriin ang mga semantika na ito upang ma-navigate ang aking personal na site:

    • I-wrap ang iyong pangunahing nilalaman, iyon ay, mga bagay na hindi header, pangunahing nabigasyon o footer, sa isang
      elemento. Sa halos lahat ng mga kaso, dapat mayroong isa lamang
      bawat pahina. Pinapayagan ka ng lahat ng mga browser (IE9 +) na istilo ito, at alam ng mga teknolohiyang tumutulong sa kung ano ang gagawin dito.
    • I-wrap ang iyong header (logo ng tatak, strapline, heading ng pahina) sa isang
      elemento.
    • I-wrap ang iyong paa (ligal na bagay, mga detalye ng contact, abiso sa copyright, atbp) sa isang
    • Markahan ang iyong pangunahing pag-navigate gamit
        balot sa a elemento. Maaari itong maging nested sa loob ng
        kung naaangkop sa visual na disenyo ng pahina.
      • Ang advertising at hindi mahahalagang nilalaman ay dapat balot sa isang
      • Kung mayroon kang higit sa isang produkto ng item / video / balita / post sa blog sa isang pahina, balutin ang bawat isa sa mga ito sa isang
        elemento.

      Sa survey ng mga gumagamit ng screen reader, Natagpuan ng WebAIM na 26% ng mga gumagamit ng screen reader nang madalas o palaging gumagamit ng mga landmark na ito kapag nag-navigate ng isang pahina.

      Bilang karagdagan, ang pambalot ng mga hiwalay na mga piraso ng nilalaman sa

      tumutulong sa display ng nilalaman ng WatchOS ng mahusay. Tingnan ang aking artikulo Ang praktikal na halaga ng semantiko HTML para sa higit pa tungkol dito.

      11) Gumamit ng HTML nang maayos

      Sa madaling sabi: maunawaan ang mga semantika at default na pag-uugali ng mga elemento ng HTML; gumamit ng tamang elemento para sa iyong nilalaman.

      Ang isang karaniwang tema sa artikulong ito ay gumagamit ng wastong mga elemento ng HTML. Gamit ang tatak ay may built-in na pag-uugali ng browser na nakatuon ang nauugnay na larangan ng pag-input; gamit

      mas kanais-nais na

      dahil pinapayagan nito ang mga gumagamit ng screen reader na tumalon nang diretso sa mahalagang nilalaman habang ganap na hindi nakakagambala sa mga hindi gumagamit ng screen reader.

      Ang isa pang halimbawa ay ang paggamit ng a

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