Վեբ հասանելիության ցուցակը

Մատչելիությունն այն կայքն է, որն ապահովում է, որ վեբ-կայքերը հավասարապես հասանելի լինեն հաշմանդամություն ունեցող անձանց, այնպես որ նրանք ունեն հավասար մուտք դեպի այդ կայքերն ու ապրանքը: Դա պրոֆեսիոնալ վեբ ձևավորման և զարգացման անբաժանելի մասն է.


Contents

Ինչու՞ պետք է հոգ տանել Մատչելիություն?

Կան բազմաթիվ պատճառներ, թե ինչու են մշակողները, դիզայներները և նրանց գործատուները / հաճախորդները պետք է ապահովեն, որ մատչելիությունը վեբ զարգացման գործընթացի վաղ և բաղկացուցիչ մասն է:.

  • Շատ տարածքներում, ինչպիսիք են ԱՄՆ-ն, ԵՄ-ն, Մեծ Բրիտանիան, Իսրայելը և Japanապոնիան, դա իրավական պահանջ է `հաշմանդամություն չունեցող մարդկանց պատճառով խտրականություն չդարձնել: Անցյալ տարի ԱՄՆ-ում, Ներկայացվել է 2,235 նոր ADA կայքի հայցադիմում դաշնային դատարանում: Դա մեկ ժամ է.
  • Մատչելի կայքերը որոնման համակարգերում ավելի լավ կոդավորված են, ավելի ամուր և լավ դասակարգված.
  • Մատչելի կայքերը հակված են առավել օգտագործելի է ոչ հաշմանդամ այցելուների համար, հանգեցնելով ավելի մեծ բավարարվածության և փոխակերպման.
  • Անհասանելի կայքերը վատն են բիզնեսի համար: 2019-ին ՝ ա Մեծ Բրիտանիայի հարցում պարզել է, որ ավելի քան 4 միլիոն մարդ հրաժարվել է մանրածախ կայքից ՝ գտնելու մատչելիության խոչընդոտների պատճառով: Այդ կորցրած բիզնեսը ՝ «Կտտացրեք ֆունտը», կազմում էր 17,1 միլիարդ ֆունտ: Դա է միլիարդ. Միայն Մեծ Բրիտանիայում.
  • Հնարավոր հաճախորդներին ինքնակամ շրջելը վատ բիզնես է.

Ընդհանուր ստանդարտներն ու խնդիրները

Բարեբախտաբար, W3C- ը (մարմինը, որը արտադրում է բազմաթիվ ստանդարտներից, որոնց վրա հենվում է վեբը), ունի ստանդարտ, թե ինչպես կարելի է կայքերն հասանելի դարձնել: Դա կոչվում է Վեբ բովանդակության մատչելիության ցուցումներ (WCAG): Համապատասխանության երեք մակարդակ կա (A, AA, AAA), ընդ որում «A» – ը մատչելիության ամենացածր մակարդակն է: Ես խորհուրդ եմ տալիս նպատակ ունենալ AA մակարդակի համար.

Դժբախտաբար, WCAG- ը երկար, չոր և շատ տեխնիկական ընթերցանություն է, ուստի եկեք նայենք, թե ինչ կարող եք համեմատաբար հեշտությամբ զբաղվել և ստանալ ամենամեծ ճզմումը ձեր կծիկի համար: Սա ամեն ինչ չէ, որ դուք պետք է իմանաք ստուգիչ ցուցակ; դա ամենատարածված սխալների ցուցակն է, և այն սխալները, որոնք ասում են հաշմանդամություն ունեցող անձինք, նրանց հիմնական արգելափակումներն են, խնդիրները լուծելու գործնական առաջարկություններով: Բոլոր արտաքին հղումները բացվում են նոր ներդիրով.

Click-Away Pound- ի հետազոտության մեջ հաշմանդամություն ունեցող հարցվածներին հարցրել են, թե որո՞նք են գնումները ավարտող հիմնական բլոկները: Ահա լավագույն խոչընդոտները (թույլատրվեցին բազմաթիվ պատասխաններ).

  1. Լայնաշերտ էջեր ՝ չափազանց շատ պարունակությամբ. 66%
  2. reCAPTCHA թեստեր – 59%
  3. Աղքատ ընթերցանություն (հակադրություն, տեքստի դասավորություն) 56%
  4. Շարժվող պատկերների և գրաֆիկայի շեղումը – 53%
  5. Տեղեկատվության վատ հղման մասին ՝ 59% (77% էկրանի ընթերցողների համար)
  6. Ձևաթղթի լրացում 56%

Ինչպե՞ս բարելավել կայքի հասանելիությունը

Նախ նշեք, որ առաջին հնգյակումներից ոչ մեկը տեխնիկական խնդիրներ չեն. Դրանք նախագծման կամ պատճենահանման սխալներ են.

1) չափազանց շատ բովանդակություն

Կարճ ասած. Տեքստը բաժանել վերնագրերի և տեղեկագրերի ցուցակներով բաժինների: Օգտագործեք պարզ լեզու.

Հայտնի է, որ երբ ընտրության քանակը մեծանում է, այդպես էլ լինում է տեղեկատվություն հավաքելու համար անհրաժեշտ ջանքեր և լավ որոշումներ կայացնել: Դա նույնն է չափազանց շատ բովանդակությամբ. Այն շուտով դառնում է ճնշող: Բաղադրությունը բովանդակությանը զիջելը ժամանակատար արհեստ է. քանի որ Մարկ Տվենը (իբր) գրել է. «Ես ժամանակ չունեի կարճ նամակ գրել, ուստի փոխարենը երկար գրեցի»:

Վերջերս գիրքը Գրելը ձևավորում է առաջարկում է

Մարդիկ ցանկանում են հնարավորինս բաց թողնել տեքստի երկար բլոկները ՝ անկախ տեսադաշտից կամ աուդիայից, ուստի չափազանց կարևոր է ձեր երկարատև գրելը ձևավորել վերնագրերով, կարճ պարբերություններով և այլ բովանդակության ձևավորման լավագույն փորձերով:.

Այսպիսով,

  • Ունեք միայն մեկը

    մի էջում.

  • Օգտագործեք ենթավերնագրերը ազատորեն; այն կոտրում է տեքստի «սալը» տեսող օգտագործողների համար, մինչդեռ օժանդակ տեխնոլոգիաների օգտագործողները, ինչպիսիք են էկրանի ընթերցողները, կարող են օգտագործել կարճաժամկետ բանալին ՝ վերնագրերի միջև անցնելու կամ վերնագրի կառուցվածքից ստանալու համար բովանդակության մտավոր քարտեզը:.
  • Մի թողեք վերնագրերի մի մակարդակ: Օրինակ, եթե օգտագործեք an

    , համոզվեք, որ դրան նախորդում է ան

    .

  • Օգտագործեք փամփուշտ ցուցակները (այսպիսին է), որոնք ճիշտ նշված են HTML- ում, ինչպես
      ,
    • . Էկրանի ընթերցողները կհայտարարեն «10 կետերի ցուցակ» (և թույլ կտա օգտագործողին ցատկել դրանց վրա).

    Օգտագործեք պարզ անգլերեն

    Մոնցո Բանկ «Մեր ձայնի տոնը» ուղեցույց բացատրում է պարզ լեզվի կարևորությունը.

    2010 թ.-ին ԱՄՆ փաստաբան Շոն Ֆլամերը անցկացրեց փորձ: Նա խնդրեց 800 շրջանային դատարանի դատավորներին կողմնորոշվել կամ ավանդական «օրինական» փաստարկով, կամ, ըստ նրա, «պարզ անգլերեն»:.

    Դատավորները ճնշող գերադասում էին անգլերենի պարզ տարբերակը (66% -ից 34%), և այդ նախապատվությունն անցնում էր անկախ նրանց տարիքից կամ ծագումից:.

    Ֆլամերային նոտաներ (PDF) անգլերենի պարզ տարբերակով.

    Այն կարճ է գրեթե էջից, ուստի ակնհայտորեն վերացնում է անհարկի նախադասությունները և բառերը: Նրա նախադասությունները միջինում 17,8 բառ են ՝ ի տարբերություն 25,2 բառի.

    Նա եզրափակեց.

    Այժմ մենք ունենք 25 տարվա էմպիրիկ հետազոտություններ, որոնք հանգեցնում են անխուսափելի եզրակացության. Եթե ուզում եք ուրախացնել և համոզել ձեր ընթերցողին, գրեք պարզ անգլերեն.

    2) ReCAPTCHA

    Կարճ ասած. Մի օգտագործեք ձեր օգտվողներին ցատկել հնարավոր անհնար օճառներով ՝ ծրագրավորողի ժամանակը խնայելու համար.

    Հարցվողները հաճախ խոսում էին հին մասին ReCAPTCHA տարբերակը:

    reCAPTCHA- ի վարկածները wobbly տեքստով, որը դուք պետք է կրկին մուտքագրեք

    Ես պայքարում եմ պատկերների հետ և թվեր կամ տառեր գրել: Այն տեսակի, որտեղ ես պետք է սեղմեմ, թե որ պատկերները ունեն խանութ կամ ինչ էլ որ լինի, ես միշտ կարոտում եմ ինչ-որ բան կամ շփոթվում և օգտագործում եմ այն ​​էներգիան, որը չունեմ…

    ReCAPTCHA- ի հուզիչ տառերի ոճն այժմ արժեզրկվում է: Շատ ավելի տարածված է տեսնել ավելի նոր մարմնացում, որը կոչվում է «Ոչ CAPTCHA reCAPTCHA» (որը նաև հայտնի է որպես «Ես ռոբոտ չեմ ») որը օգտվողից պահանջում է ստուգել տուփը, որը հաստատում է, որ նրանք ռոբոտ չեն, և որն օգտագործում է գաղտնի վուդու `օգտագործողին գնահատելու համար: Եթե ​​դրանք անցնեն, այլ հետագա փոխազդեցություն չի պահանջվում: Այնուամենայնիվ, եթե դրանք չհաջողվեն, ցույց կտա հետագա մարտահրավեր.

    Captcha- ի մասնակի սքրինշոթը, որը պահանջում է օգտագործողին սեղմել բոլոր հրապարակները, որոնք ցույց են տալիս նարինջ

    Հիշեք, որ CAPTCHA- ի այն տեսակը, որը օգտվողից պահանջում է սեղմել փողոցային նշան ունեցող բոլոր հրապարակները, պարտադիր չէ, որ միջազգային լինի: Ինչպես գրում է Terence Eden- ը, CAPTCHA- ն չի ապացուցում, որ դու մարդ ես, նրանք ապացուցում են, որ դու ամերիկացի ես.

    ReCAPTCHA- ի առավել մատչելի ձևը reCAPTCHA v3 որը չի պահանջում օգտագործողի փոխազդեցություն, բայց ձեզ հարկավոր է ավելի շատ աշխատանք կատարել `փորձությունը ձախողած այցերի հետ գործ ունենալու համար.

    Դա զուտ JavaScript API միավորն է, որը վերադարձնում է գնահատականը ՝ հնարավորություն տալով գործեր ձեռնարկել ձեր կայքի համատեքստում. Օրինակ `պահանջելով վավերացման լրացուցիչ գործոններ, փոստին ուղարկել չափավորության կամ շոշափող այնպիսի բոտեր, որոնք կարող են պարունակել գրություն պարունակող բովանդակություն:.

    3) աղքատ ընթերցանություն

    Կարճ ասած. Համոզվեք, որ տեքստը ունի համապատասխան հակադրություն, ընթեռնելի է և չի հիմնավորված.

    • Ապահովել համարժեք հակադրություն. Theանցում ամենատարածված մուտքի արգելափողներից մեկը տեքստի և ֆոնի միջև վատ հակադրությունն է: W3C ուղեցույցները պահանջում են առնվազն 4,5: 1 հակադրությունների հարաբերակցություն, բացառությամբ լայնածավալ տեքստի և լայնածավալ տեքստի պատկերների, որոնք պետք է ունենան առնվազն 3: 1 հակադրություն (լոգոները և «պատահական» տեքստերը բացառված են): Կան բազմաթիվ կոմունալ ծառայություններ, որոնք կարող են չափել ձեզ համար հակադրվող գործակիցները. իմ անձնական ֆավորիտը հիանալի է Ada Rose Cannon- ը հակադրություն widget, որը զննարկչի օգտակար էջանիշ է, որը կարևորում է ձեր էջի անբավարար հակադրությունների տարածքները.
    • Ամբողջ կապիտալ վերնագրեր չունեք. Ապացույցներ կան, որ դրանք ավելի դժվար է կարդալ, քանի որ մեծատառերը բոլորը նույն բարձրության վրա են, ուստի մենք չենք կարող ճանաչել ընդհանուր բառերի ձևը: Բացի այդ, որոշ էկրանի ընթերցողներ կհրապարակեն մեծատառերի խմբերը, ասես, որ դրանք կրճատված են (օրինակ ՝ BBC, DOJ և այլն): Եթե ​​դուք պետք է ունենաք բոլոր կապիտալ վերնագրերը, դրանք նորմալ դեպքում գրեք ձեր HTML- ով և դրանք վերափոխեք CSS- ով տեքստի վերափոխում. մեծատառ.
    • Ձախ դասավորված տեքստ. (Արաբերեն կամ Եբրայերեն աջ, ձախ լեզուներով էջերի համար, օրինակ ՝ ճիշտ դասավորված տեքստ): Մի՛ հիմնավորիր դա, քանի որ դա դժվարացնում է dyslexia ունեցող մարդկանց կարդալը: The Բրիտանական Դիսլեքսիայի ասոցիացիայի ոճային ուղեցույցը առաջարկում է նաև

      Օգտագործեք sans serif տառատեսակներ, ինչպիսիք են Arial- ը և Comic Sans- ը, քանի որ տառերը կարող են ավելի քիչ մարդաշատ լինել: Այլընտրանքներն են Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) քայքայող պատկերներ և գրաֆիկա

    Կարճ ասած. Թույլ տվեք օգտվողներին դադարեցնել ցանկացած շարժում; հարգել դրանց գործառնական համակարգի կարգավորումները. ավտոմատ խաղալու տեսանյութը մի՛ արա.

    Գրել է «Click-Away Pound» հարցման մասնակիցներից մեկը,

    Այն կայքերը, որոնք նախկինում օգտագործում էի քիչ խնդրով, այժմ դառնում են խնդիր, քանի որ այժմ գնում են գովազդի տեղաշարժը և անընդհատ բեռնում են ավելի շատ գովազդներ, երբ գնում եք.

    WCAG- ի առավելագույն հիմնական մակարդակը պահանջում է. «Շարժվող, շողոքորթող կամ պտտվող ցանկացած տեղեկատվության համար, որը (1) ինքնաբերաբար սկսվում է, (2) տևում է ավելի քան հինգ վայրկյան, և (3) ներկայացված է այլ բովանդակության հետ զուգահեռ, գոյություն ունի մեխանիզմ օգտվողը դադար առնելու, դադարեցնելու կամ թաքցնելու համար, քանի դեռ շարժումը, թարթումը կամ պտտվելը մաս են կազմում այն ​​գործունեության, որտեղ դա անհրաժեշտ է »:.

    Շեղումը անհանգստություն է `հատկապես ADHD կամ ճանաչողական այլ խանգարումներ ունեցող մարդկանց համար: Բայց շարժումը և flashրամեկուսացումը կարող են նաև առգրավումներ առաջացնել, այնպես որ WCAG ուղեցույցները պահանջում են, որ ցանկացած 1 վայրկյան ժամանակահատվածում բովանդակությունը չպետք է 3 անգամից ավելի թարթվի:.

    Հարգեք օգտվողի ընտրությունը անիմացիաների համար

    Բոլոր հիմնական գործառնական համակարգերը թույլ են տալիս օգտվողին նախապատվություն տալ նվազեցված շարժման վրա էկրանի վրա. Գուցե այն պատճառով, որ նրանք ունեն վեստիբուլյար սպեկտրի խանգարման շարժման պատճառ: Ձեր կայքը կարող է պարզել, արդյոք օգտագործողը դա արել է CSS- ի հետ նախընտրում է-իջեցված-շարժումը լրատվամիջոցների հարցումը.

    Այստեղ մենք միայն կոճակը թույլ ենք տալիս սանձել, եթե օգտագործողը նախապատվություն չի տվել.

    @media (նախընտրում է կրճատված շարժումը. նախընտրություն) {
    կոճակ {
    / * «թրթռում» հիմնաբառերը սահմանվում են այլուր *
    անիմացիա. թրթռել 0,3s գծային անսահման երկուսն էլ.
    }
    }

    Եթե ​​դուք ցանկանում եք վերափոխել մի կայք, որն ունի բազմաթիվ անիմացիայի կանոններ, կարող է լինել հետևյալը դադարեցրեք նախկինում հայտարարված CSS անիմացիաները:

    @media (նախընտրում է-կրճատված-շարժումը. նվազեցնել) {
    *,
    *::նախքան,
    * :: հետո {
    անիմացիոն տևողություն ՝ 0,001s! կարևոր;
    անցումային տևողություն. 0.001s! կարևոր;
    }
    }

    Օգտագործողի գործառնական համակարգի նախասիրությունները հարգելու թեմայով, գուցե ցանկանաք հաշվի առնել ձեր վեբ կայք նախագծելը մութ ռեժիմի համար.

    5) աղքատ հղման տեղեկատվություն

    Կարճ ասած ՝ հղումները դարձրեք ճանաչելի ՝ հղման եզակի տեքստով: Զգուշացրեք օգտվողներին, եթե հղումը կբացի նոր ներդիր կամ ֆայլ.

    Աղքատ կապերի հիմնական պատճառներից մեկը հաճախ աղքատների հեղինակն է: Էկրանի ընթերցողներից շատերը թույլ են տալիս օգտագործողին արագ տեսնել էջում առկա հղումների ցուցակը (առավել օգտագործված առևտրային էկրանի ընթերցիչում, JAWS, ստեղնաշարի դյուրանցումը Ins + F7 է: անվճար NVDA էկրանի ընթերցող, ստեղնաշարի նույն դյուրանցումը բերում է «Elements List», որը թվարկում է էջի հղումները, վերնագրերը և նշանները).

    Այնուամենայնիվ, եթե յուրաքանչյուր հղում ունի «Կտտացրեք այստեղ» կամ «Կարդալ ավելին» տեքստը, որը տարբերակել նրանցից, ապա դա անօգուտ է: Դա լուծելու ամենադյուրին ճանապարհը պարզապես հղման եզակի տեքստ գրելն է, բայց եթե դա հնարավոր չէ, կարող եք օժանդակ տեխնոլոգիաների համար հղումը տեքստը վերածել ՝ օգտագործելով յուրաքանչյուր յուրահատուկ aria- պիտակի հատկանիշ:.

    Ահա մի լավ օրինակ է Joomla կայքը:

    Joomla կայքը, որը ցույց է տալիս երկու տարբեր պատմություններ, որոնցից յուրաքանչյուրը նույնական է

    Հղման տեսանելի տեքստը պարզապես «ավելին է կարդում», բայց Joոմլան օգտագործում է aria-label օժանդակ տեխնոլոգիա յուրահատուկ դարձնելու հատկանիշները.

    Կարդալ ավելին
    
    Կարդալ ավելին

    Պատճառով aria-label հղումը տեքստի փոխարեն կօգտագործվի օժանդակ տեխնոլոգիաներով, W3C- ն առաջարկում է արիա-պիտակում օգտագործվող տեքստը սկսել հղման մեջ օգտագործված տեքստի հետ, քանի որ «դա թույլ կտա հետևողական հաղորդակցություն օգտագործողների միջև»:.

    Նշում: Որոշ վատ խորհուրդներ, որոնք ես դեռ տեսնում եմ հին կայքերում, բացատրական տեքստ ավելացնել ՝ օգտագործելով հղումները կոչում ատրիբուտ:

    Կարդացեք ավելին>

    Մի արա դա. The վերնագիրը չի ենթարկվում էկրանի ընթերցողների մեծամասնությանը (ծրագրավորողները նախկինում այն ​​օգտագործում էին «SEO» նպատակներով հիմնաբառերով, ուստի էկրանի ընթերցող վաճառողները դա անաշխատաբար անջատել են), իսկ զննարկիչները բրաուզերներին ներկայացնում են վերնագրի հատկանիշները ՝ որպես «գործիքներ», որոնք հասանելի են միայն մկնիկի օգտագործողների համար:.

    Հղումները պետք է հղումներ լինեն

    Լռելյայն, զննարկիչները ընդգծում են հղումները: Դա ամենալավը չէ դա փոխելն է, բայց եթե այս մասին դիզայներների հետ ավտոկայանում կռիվ եք կորցնում, ապա հղման տեքստը պետք է ունենա 3: 1 հակադրություն հարաբերակցություն շրջակա ոչ կապի տեքստից և պետք է տա ​​ինչ-որ «գունավոր ձևավորող» «Որ դրանք օղակ են, երբ կախված են կամ կենտրոնանալուց, օրինակ.

    ա: Հովեր, ա: ֆոկուս {տեքստային ձևավորում. ընդգծում;}

    Ուշադրության կենտրոնացման ոճը հանգեցնում է հղման ընդգծման, երբ ոչ մկնիկի օգտագործողը դրա վրա կենտրոնանում է ստեղնաշարից, ստեղուսից կամ ձայնային մուտքից: Ընդհանրապես, երբ էջում ինչ-որ բան ունի սավառնի ոճ, նրան պետք է տրվի նաև ուշադրության կենտրոն.

    «Ոչ գունավոր ձևավորողը» (մեր դեպքում `ընդգծում) ապահովում է, որ ցածր տեսողություն ունեցող կամ գույնի կուրություն ունեցող այցելուները կտեսնեն փոփոխությունը կախիչի կամ ուշադրության կենտրոնում: (Էկրանի ընթերցողները ավտոմատ կերպով հայտարարում են «Հղում» նախքան հղման տեքստը):

    Ասացեք մարդկանց, եթե հղումը բացում է նոր ներդիր / էջ

    Դա կարող է շփոթեցնել այցելուի համար, եթե հղումը ակտիվացնելով, բացում է նոր ներդիր կամ նոր պատուհան, մասնավորապես, եթե դա անում են էջի միայն մի քանի հղումներ (օրինակ, միայն արտաքին հղումներն են բացում նոր ներդիր): Եթե ​​դուք պետք է անեք դա, դուք պետք է զգուշացնեք օգտագործողին կամ հղման տեքստում, կամ օգտագործելով aria-label- ի վերը նշված մեթոդը.

    Ասացեք մարդկանց, եթե հղումը ֆայլ է

    Եթե ​​հղումը ֆայլի մեջ է (օրինակ ՝ PDF կամ տեսանյութ), օգտագործողին ասեք հղման տեքստում: Մի՛ թաքցրու ներս aria-label, քանի որ դա կարող է օգտակար լինել շատ տեսող օգտվողների համար (որոշ բջջային հեռախոսներ, օրինակ, չեն կարող բացել .docx ֆայլ): Եթե ​​դա մեծ ֆայլ է, մտածեք ահազանգել օգտվողի մոտավոր չափի մասին. նրանք գուցե չեն ցանկանա մեծ վիդեո ֆայլ ներբեռնել 3G- ից.

    Կարող եք նաև օգտագործել ներբեռնել ատրիբուտ, ինչը զննարկիչին հնարավորություն է տալիս բացել օպերացիոն համակարգի բնօրինակ ֆայլերի ներբեռնման երկխոսությունը: Այս ամենը միասին դնելով ՝ ծածկագիրը հետևյալն է լինելու.

    Տարեկան զեկույց (PDF, 240 MB)

    6) Մեկ այլ դիզայնի սխալ. Ֆոկուսի օղակը հեռացնելը

    Մի խոսքով. Համոզվեք, որ ստեղնաշարի օգտագործողը միշտ կարող է տեսնել, թե որտեղ են նրանք ներկայում կենտրոնացած.

    Մենք նշել ենք ուշադրություն ոճերը առաջ: Նրանք անգնահատելի տեսողական ցուցանիշ են այն մարդկանց համար, ովքեր որևէ պատճառով չեն կարող մուկ օգտագործել: գուցե նրանք ունեն RSI, կամ Պարկինսոնի կամ բազմակի սկլերոզ: Լռելյայն, բրաուզերները ներկայումս կենտրոնացած տարրի վրա ցուցադրում են կենտրոնացման օղակ: Ահա Գլխավոր էջը իմ անձնական կայքի վրա, որը կենտրոնացած է Chromium զննարկիչում.

    Chromium- ի կանխադրված ուշադրության կենտրոնում գտնվող օղակի նկարը մի հղման շուրջ (որը նաև պատկեր է)

    Այնուամենայնիվ, ոմանք համարում են, որ գեղագիտականորեն դուր չեն գալիս այն ժամանակ, երբ նրանք օգտագործում են մկնիկը և անջատում այն ​​CSS- ով ՝ դրանով իսկ կայքը անհասանելի թողնելով ստեղնաշարի օգտագործողներին.

    Մուտքագրեք նոր ստանդարտ, որը հիմնված է Firefox- ի կողմից, որը կոչվում է ուշադրության կենտրոնում. Սա կկիրառի ֆոկուսային օղակ դեպի մի տարր, եթե այն հասել է ստեղնաշարի կամ ոչ մկնիկի մատնանշող սարքի կողմից, բայց մկնիկի օգտագործողներին ոչինչ ցույց չի տալիս: Քանի որ այն աջակցվում է միայն Firefox- ում (գրելու պահին), Առաջարկում է Պատրիկ Լյուկը հետևյալ CSS- ը բոլոր բրաուզերների հետ լավ խաղալու համար.

    կոճակ ՝ ֆոկուս {/ * կոճակի հուզիչ ոճի հետաքրքրաշարժ ոճեր * /}
    կոճակ. ուշադրության կենտրոնում. ոչ (: ուշադրության կենտրոնում) {
    / * վերացնել վերը նշված կենտրոնացած կոճակի բոլոր ոճերը
    եթե կոճակը կենտրոնացած է, բայց զննարկիչը սովորաբար չի զբաղվի
    ցույց տալ հիմնական ֆոկուսային ոճերը * /
    }
    կոճակ ՝ ուշադրության կենտրոնում {/ * որոշ նույնիսկ * ավելի * հուզիչ կոճակի ֆոկուսային ոճեր * /}

    7) Ձևաթուղթ լրացնելը

    Մի խոսքով ՝ ձևավորման դաշտերը, որոնք նման են ձևի դաշտերին, որոնցից յուրաքանչյուրը կապված է պիտակի հետ: Մի անջատեք ավտոմատ լրացումը.

    Հաշվի առնելով էլեկտրոնային առևտրի կայքերի համար ձևերի կենսական նշանակությունը, այն զարմացնում է ինձ, թե որքան անհասանելի ձևեր եմ տեսնում: Հաճախ դա տեղի է ունենում այն ​​պատճառով, որ հին զննարկիչները թույլ չեն տվել շատ ձևավորել ձևի տարրերը ոճավորելու ձևով, ուստի մշակողները դրանք կեղծել են HTML այլ տարրերով: Ժամանակակից զննարկիչները թույլ են տալիս գրավիչ տուփեր, ռադիո կոճակներ, ընտրովի բաղադրիչներ և սանրվածքներ, մատչելի ինքնավարտ վերահսկում եւ ավելին.

    Ավտոմատ լրացումը ձեր ընկերն է

    Զննարկիչներին ինքնաբերաբար լրացնելու ձևեր թույլ տալը այցելուներից պահանջում է ավելի քիչ բան անել, այնպես որ նրանք ավելի հավանական է, որ լրացնեն ձևը և գրանցվեն կամ գնեն ձեր ապրանքը. Ավտոմատ լրացում զննարկիչների վրա. Deep Dive eBay- ի հիանալի հոդված է այս մասին (և նրանք պետք է իմանան).

    Բացի այդ, ինքնավստահ ամբողջական միակ տեխնիկան է, որը ներկայումս AA- ի համապատասխանությանը հասնելու համար է Հաջողության չափանիշ 1.3.5. Բացահայտեք մուտքային նպատակը.

    Ձևաթղթերի տեսքով նման դաշտեր պատրաստեք

    Լռելյայն, զննարկիչները դիտում են մուտքի դաշտերը որպես տուփեր: Ամեն դեպքում, ոճեք դրանք լուսանցքներով, լիցքավորմամբ և սահմաններով, բայց պահեք դրանք որպես տուփեր: Շատ դիզայներներ հետևեցին Google- ի նախա-2017-ի նյութական ձևավորման օրինակին `օգտագործողի մուտքագրման տեքստում մեկ տող օգտագործելու համար.

    Հին նյութերի նախագծման ներդրում ՝ հորիզոնական գծով, քան ուղղանկյուն տուփով

    Այնուամենայնիվ, Google- ը գտավ, որ հին տեքստային դաշտերի տակ գտնվող տողը որոշ օգտվողների համար պարզ չէ, հաճախ շփոթված է բաժանարարի հետ և փոխել դիզայնը: Մեջ օգտագործման օգտագործման թեստ 600 մասնակիցներով նրանք դա հայտնաբերեցին

    ուղղանկյուն (տուփ) ձևով պարփակված տեքստային դաշտերը ավելի լավ են կատարում, քան գծի մատչելիությունը…… Այսօր այս նոր տեքստային դաշտերը հայտնվում են Google արտադրանքներում ՝ հաշվի մուտքի էջերից մինչև Google ձևեր.

    Եթե ​​մտածում եք Google- ի ամբողջ նյութական ձևավորման UI գրադարանի ընդունումը, կարդացեք Դադարեցրեք Material Design տեքստային դաշտերը! Մացուկո Ֆրիդլանդի կողմից ՝ պարզելու, արդյոք այն բավարարում է ձեր կարիքները.

    Պիտակավորել բոլոր ձևի դաշտերը

    Ձևավորման բոլոր դաշտերը (տեքստի մուտքեր, տուփեր, ռադիո կոճակներ, սայթաքիչներ և այլն) անհրաժեշտ է մակնշել: Դա կատարելու լավագույն միջոցը HTML օգտագործելն է ; ինչպես ասում է WCAG- ը, «ստանդարտ HTML հսկիչները արդեն բավարարում են հաջողության այս չափանիշը, երբ օգտագործվում են ըստ ճշգրտման»:.

    Ահա մի ցուցադրություն, որը ես պատրաստել եմ չհրապարակված ձևի դաշտ պիտակավորված ձևի դաշտով. Նրանք միանման են թվում, բայց լավագույնը չունի համապատասխան պիտակ, մինչդեռ երկրորդը: Կտտացրեք ներքևի տեքստի պիտակին և կտեսնեք, որ այն կենտրոնանում է կապված մուտքի վրա.

    կեղծ ընդդեմ իրական պիտակի համեմատություն

    Սա հեշտացնում է մուտքագրումը շատ ավելի դյուրին դարձնել շարժիչային հսկողության հետ կապված դժվարություններ ունեցող մեկի համար, կամ գուցե ձեզ համար ՝ փորձելով ստուգել անփույթ գնացքի վրա փոքր էկրանին փոքրիկ տուփը: Այն նաև կենսական նշանակություն ունի էկրանի ընթերցողների համար, ովքեր կկարողանան թերթել դաշտերը մի ձևով (ըստ լռելյայն, միայն հղումները և ձևի դաշտերը կենտրոնացված են ներդիրով); երբ մուտքագրում են մուտքագրման դաշտ, էկրանի ընթերցողը կհայտարարի հարակից պիտակի պարունակությունը.

    Դրա համար ծածկագիրը շատ պարզ է: Մուտքագրվող դաշտին տրվում է եզակի ID, և պիտակը կապված է դրա հետ համար ատրիբուտ:

    
    

    Թաքցնում պիտակներ

    Ժամանակ առ ժամանակ, գուցե դուք չեք ցանկանա տեսանելի պիտակ: Կամ դիզայները չի ուզում, և դուք այլ ավտոկայանատեղի չեք ուզում: Համենայն դեպս, սա մի օրինակ է, երբ մուտքը նախորդող «Որոնում» ասող պիտակը կարծես ծանրաբեռնված է.

    Մուտքագրման դաշտ, որից հետո «որոնում» պիտակով

    Մենք կարող ենք մուտքագրման դաշտը կապել «Որոնում» տեքստի հետ, որը գործադիրի օգտագործման կոճակի բովանդակությունն է aria-labelelledby:

    
    

    Մենք կարող էինք օգտագործել aria-label (որը մենք ավելի վաղ ենք հանդիպել հղումների մասին խոսելիս).


    Բայց միշտ ավելի լավ է նախընտրել տեսանելի տեքստը էջի վրա, քանի որ այն թարգմանվելու է, եթե էջը գործածվի թարգմանչական գործիքի միջոցով, մինչդեռ HTML ատրիբուտներում «թաքնված» տեքստը չի լինի: (Հատուկ հուշում է Ադրիան Ռոսելիին այս հուշումի համար ՝ նրա հիանալի հոդվածից) Կառավարման պիտակավորման մեթոդների իմ առաջնահերթությունը.)

    Ամենատարածված սխալները ամենաշատ միլիոն էջում

    Մենք դիտել ենք էլեկտրոնային առևտրի կայքերի առաջին խոչընդոտները, ինչպես հայտնում են օգտվողները, ովքեր ունեն որոշակի ձևով արժեզրկում: Հիմա եկեք նայենք շատ ավելի լայն կայքեր. Գլխավոր էջերը առաջին 1000,000 լավագույն կայքերի համար, ինքնաբերաբար վերլուծվում է WebAIM- ի կողմից օգոստոսի 2019-ին: Վերլուծված էջերի 98% -ը առնվազն մեկ սխալ է ունեցել: Ամենատարածված սխալներն են

    1. Contrastածր հակապատկեր տեքստ (86.1%)
    2. Պատկերների համար այլընտրանքային տեքստ բացակայում է (67.9%)
    3. Դատարկ հղումներ (58.9%)
    4. Ձևաթղթերի բացակայում են (53.2%)
    5. Փաստաթղթերի լեզու բացակայում է (30.5%)

    Մենք գործ ունեինք վերը նշված ցածր հակադրությունների, հղումների և ձևի մուտքերի հետ: Հիմա դիտենք, թե ինչպես կարող ենք խուսափել մյուս շատ տարածված սխալներից.

    8) Տեքստի այլընտրանքներ տրամադրեք բոլոր պատկերների, տեսանյութերի և աուդիոների համար

    Հակիրճ. Պատկերների կամ տեսանյութերի միջոցով հաղորդակցվող ցանկացած տեղեկատվություն պետք է ունենա տեքստի համարժեք.

    Ամեն պետք է ունենան այլընտրանքային տեքստ («Alt text»), որը կարող է հաղորդվել տեսողության խանգարումներ ունեցող այցելուներին կամ ցածր թողունակության / թանկ տվյալների պլան ունեցողներին, ովքեր անջատել են պատկերները իրենց զննարկիչներում: Սա ներառում է տեքստի պատկերներ.

    Ահա հիմնական կանոնները.

    • Եթե ​​պատկերը զուտ դեկորատիվ է, ապա այն պետք է ունենա դատարկ alt տեքստ. alt = "". (Բայց զուտ դեկորատիվ պատկերները հավանաբար պետք է լինեն CSS- ում:)
    • Եթե ​​նկարը նկարագրված է մարմնի տեքստում, ապա այն պետք է ունենա դատարկ բարձր տեքստ (alt = ""), կրկնությունից խուսափելու համար: Բայց զգույշ եղեք, եթե դա այդպես է մեջ
      – տեսնել Ինչպես եք պատկերացնում? ավելին.
    • Եթե ​​պատկերն ուղեցույցի միակ բովանդակությունն է (օրինակ, ձեր կազմակերպության պատկերանշանը կարելի է սեղմել ՝ գլխավոր էջի էջի վրա մտնելու համար), այլընտրանքային տեքստը պետք է նկարագրի հղման նպատակակետը: Օրինակ, alt = "գլխավոր էջ".
    • Մի օգտագործեք պատկերակների տառատեսակներ; դրանք կարող են իսկապես վատ լինել դիսլեքսիկ մարդկանց համար: Եթե ​​դրանք օգտագործեք, փոխակերպեք դրանք SVG.

    Վիդեո և աուդիո այլընտրանքային տեքստ

    Մի մոռացեք, որ աուդիո բովանդակությունը այլընտրանքային տեքստի կարիք ունի լսողության խնդիրներ ունեցող անձանց համար: Դա նշանակում է, որ պոդկասկերի պատճեններ և ենթագրերի տեսանյութեր: Եվ կրկին. Մի՛ ինքնաբուխ լրատվամիջոցներ.

    9) Ավելացնել պատշաճ փաստաթղթերի լեզու

    Մի խոսքով ՝ օգնեք, որ օժանդակ տեխնոլոգիան իմանա ձեր տեքստի լեզուն.

    Տնային էջերի 30% -ը չի հայտարարում իրենց գրած լեզուն, ինչը կարող է նրանց շփոթեցնել էկրանի ընթերցողների օգտագործողների համար: Սա կարևոր է, քանի որ «վեց» բառը շատ տարբեր կերպ է արտասանվում, եթե նախադասությունը անգլերեն կամ ֆրանսերեն է, օրինակ,.

    Դա հեշտ է լուծել `ավելացնելով ձեր HTML տարրին lang հատկանիշը.

    «En» – ը էկրանի ընթերցողին (կամ թարգմանչական ծրագրակազմ) ասում է, որ այս էջը անգլերեն է: «Es» – ը իսպաներեն է, «fr» – ը `ֆրանսերեն, և այլն: Լեզուների մեծ մասի համար որոշվում է լեզվական պիտակը: W3C- ն ունի ուղեցույց Լեզուների պիտակի ընտրություն.

    Եթե ​​էջը պարունակում է բովանդակություն մի այլ լեզվով, քան իր հիմնական հայտարարվածը, լեզվական հատկանիշը ավելացրեք այդ բովանդակությանը շրջապատող տարրին: Օրինակ ՝ անգլերեն համար հայտարարված էջում.

    Եթե ​​ցանկանում եք զրուցել մադադոր, որոշ զով կաբանա
    Եվ հանդիպեք սենորիտաս հաշվով, Espana por favor

    10) Օգնեք այցելուին ձեր բովանդակության շուրջ

    Կարճ ասած. Օգտագործեք HTML ազդանշանային տարրեր, որոնք կօգնեն տեխնոլոգիական օժանդակ օգտվողներին հասկանալու և նավարկելու ձեր բովանդակությունը.

    Երբ տեսող այցելուը գալիս է ձեր էջը, նրանք կարող են հեշտությամբ տեսողականորեն զննել այն ՝ հասկանալու համար, թե որտեղ է նավիգացիան և որտեղ է սկսվում հիմնական բովանդակությունը: Էկրանի ընթերցող օգտագործողը չի կարող դա անել: Այնուամենայնիվ, HTML5- ը մեզ տալիս է մի քանի նոր պիտակ ՝ նշված տարածքները նշելու համար, իսկ օժանդակ տեխնոլոգիաները ունեն դյուրանցումներ, որոնք կարող են շրջանցել (կամ շրջանցել) այն տեսարժան վայրերը, ինչպիսիք են վերնագիր, ստորոտ, նավարկություն և այլն.

    Ահա վեց րոպեանոց տեսահոլովակը, որը ես պատրաստել եմ վեբ ծրագրավորող և էկրանի ընթերցող Լեոնին Ուոթսոնի հետ, թե ինչպես է նա օգտագործում իր էկրանի ընթերցողը ՝ ուսումնասիրելու այս սեմալտը ՝ իմ անձնական կայքում նավարկելու համար.

    • Փաթեթավորեք ձեր հիմնական բովանդակությունը, այսինքն ՝ իրերը, որոնք վերնագիր չեն հանդիսանում, առաջնային նավիգացիա կամ ստորագրություն չեն ՝ a
      տարր. Գրեթե բոլոր դեպքերում պետք է լինի միայն մեկը
      մեկ էջում: Բոլոր զննարկիչները (IE9 +) թույլ են տալիս ոճավորել այն, իսկ օժանդակ տեխնոլոգիաները գիտեն, թե ինչ անել դրա հետ.
    • Փաթեթավորեք ձեր վերնագիրը (ապրանքանիշի պատկերանշան, շարագիծ, էջի վերնագիր) a
      տարր.
    • Փաթաթեք ձեր ստորին էջը (իրավաբանական իրեր, կոնտակտային տվյալներ, հեղինակային իրավունքի մասին ծանուցում և այլն) ՝ a
    • Նշեք ձեր հիմնական նավարկումը ՝ օգտագործելով
        փաթաթված ա տարր. Սա կարող է տեղադրվել ներսում
        եթե դա տեղավորվում է էջի տեսողական ձևավորմանը.
      • Գովազդը և ոչ էական բովանդակությունը պետք է փաթաթված լինեն
      • Եթե ​​էջում ունեք մեկից ավելի ապրանք / վիդեո / նորություններ / բլոգային հաղորդագրություն, ապա փաթեթավորեք դրանցից յուրաքանչյուրը
        տարր.

      Իր մեջ էկրանի ընթերցողների օգտագործողների հարցում, WebAIM- ը պարզեց, որ էկրանի ընթերցողների օգտագործողների 26% -ը հաճախ կամ միշտ օգտագործում է այդ նշանները էջը նավարկելիս.

      Բացի այդ, դիսկրետ բովանդակության կտորները փաթաթում ենք մեջ

      օգնում է Apple- ի WatchOS- ի բովանդակությունը օպտիմալ կերպով ցուցադրել: Տե՛ս իմ հոդվածը Սեմալիստ HTML- ի գործնական արժեքը այս մասին ավելին իմանալու համար.

      11) Պատշաճ կերպով օգտագործել HTML

      Հակիրճ. Հասկացեք HTML տարրերի իմաստաբանությունն ու կանխադրված վարքագիծը. օգտագործեք ճիշտ տարրը ձեր բովանդակության համար.

      Այս հոդվածում ընդհանուր թեմա է օգտագործվել ճիշտ HTML տարրերի օգտագործումը: Օգտագործելով ա պիտակ ներկառուցված զննարկչի վարք ունի, որը կենտրոնացնում է դրա հետ կապված մուտքային դաշտը. օգտագործելով

      նախընտրելի է

      քանի որ այն թույլ է տալիս էկրանի ընթերցող օգտվողներին ուղիղ անցնել կարևոր բովանդակության վրա ՝ միանգամայն աննկատելի լինել նրանց համար, ովքեր չեն օգտագործում էկրանի ընթերցիչ.

      Մեկ այլ օրինակ `ա

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