Ինժեներական ղեկավարների, ծրագրավորողների և կոնտենտի թիմերի համար

Գտածոների մեծ մասը կանգ չի առնում դժվարությունից։ Կանգ է առնում, որովհետև ոչ ոք չի տիրում դրանց։

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

Սկանավորել և տեսնել բաժանումը՝ անվճարՏեսնել՝ ով ինչ է ստանում

01 — Կանգառը

Խոչընդոտներ գտնելը լուծված է։ Դրանք հանձնարարելը՝ ոչ։

Սա մեր դիտարկումը չէ։ Սա այն է, ինչ պրակտիկները կրկին ու կրկին գրում են, երբ նկարագրում են՝ ինչու են շտկման ծրագրերը ձախողվում։

Ticket առանց անվան

Պրակտիկները այս մասին ուղիղ են գրում. «front-end»-ին հանձնարարված խնդիրը այն խնդիրն է, որի համար ոչ ոք իրեն պատասխանատու չի զգում, և խնդիրները խրվում են, երբ ոչ ոք չգիտի՝ ով է դրանց տերը։ Թիմին հանձնարարելը հանձնարարել չէ։

Accessible.org, remediation planning

Թերությունները շարժվում են ներքև

Այնտեղ, որտեղ փոխանցումները սահմանված չեն, խմբագիրները մեղադրում են ձևանմուշները, ծրագրավորողները՝ կոնտենտի մուտքագրումը, իրավաբանը ստանում է անորոշ պատասխան, և ռիսկը մնում է բաց։ Գտածոն սխալ չի եղել։ Այն պարզապես ոչ մի տեղ չի հասել։

ADA Compliance Pros, CMS accessibility

Ձևանմուշի բազմապատկիչը՝ հակառակ ուղղությամբ

Մեկ բազմակի օգտագործվող բաղադրիչի ուղղումը կարող է փակել հարյուրավոր ձախողումներ, մինչդեռ էջ առ էջ մաքրումը հազվադեպ է ռիսկը իմաստալից կերպով փոխում։ Գտածոների հարթ ցուցակը թաքցնում է, թե որն է որը, և թիմերը sprint-ը ծախսում են սխալ ծայրի վրա։

ADA Compliance Pros

02 — Ուղղորդում

Չորս սեփականատեր։ Ոչ երկու։

Գտածոները «կոնտենտ» և «կոդ» բաժանելը ավելի լավ է, քան մեկ հարթ ցուցակը, բայց դեռ կոնտրաստի խնդիրները դնում է սխալ սեղանին։ Դիզայնը իրական կատեգորիա ունի, ինչպես նաև այն մարդը, ով վարում է ձեր մատակարարներին։

  • Կոնտենտի խմբագիր

    Ուղղվում է CMS-ում

    • Բացակայող alt տեքստ նկարներին
    • «Սեղմեք այստեղ» տիպի հղումներ
    • Բաց թողնված վերնագրերի մակարդակներ
    • Վիդեո՝ առանց ենթագրերի
    → Պարզ լեզվով ուղեցույց՝ ըստ CMS-ի։ Առանց selector-ի և ժարգոնի։
  • Դիզայներ

    Ուղղվում է դիզայն-համակարգում

    • Կոնտրաստ՝ շեմից ցածր
    • Ֆոկուսի ցուցիչներ՝ թույլ կամ բացակա
    • Թիրախներ՝ 24 × 24 պիքսելից փոքր
    • Իմաստ, որը կրում է միայն գույնը
    → Չափված հարաբերակցություն, ձախողվող զույգ և անցնող այլընտրանք։
  • Ծրագրավորող

    Ուղղվում է կոդում

    • Ֆոկուսի թակարդներ modal-ներում
    • <code><div></code>, որը կոճակի դեր է կատարում
    • Ձևի տարրեր՝ առանց պիտակի կապի
    • Դինամիկ թարմացումներ, որոնք չեն հայտարարվում
    → Selector, չափանիշ, առաջ/հետո կոդ, ticket-ի արտահանում։
  • Մատակարարի պատասխանատու

    Ուղղում է ուրիշը

    • Չաթի վիջեթներ և աջակցության գործիքներ
    • Վճարման և ամրագրման iframe-եր
    • Ներդրված վիդեո և քարտեզներ
    → Հայտնաբերված և վերագրված, որ կարողանաք գրավոր բարձրացնել։

Եվ հինգերորդ սյունակը, որը պիտակավորում ենք ազնվորեն, ոչ թե հաշվում որպես ուղղված. որոշ գտածոներ՝ ցածր կոնտրաստ, մանր տեքստ, շարժում, կարող են շրջանցվել այցելուի կողմից՝ վիջեթի միջոցով։ Դա մեղմացում է փորձառության շերտում այն մարդկանց համար, ովքեր միացնում են այն, ոչ թե ուղղում։ Այդ կետերը մնում են բաց դիզայների կամ ծրագրավորողի ցուցակում, մինչև հիմքում ընկած պատճառը ուղղվի, և հաշվետվությունը դա գրում է նույն տողում։ Գործիք, որը դրանք փակեր, կշոյեր իր սեփական վահանակը։

03 — Ուղղումը

Ձեր framework-ում, ոչ արձակով։

Նույն գտածոն՝ գրված չորս ձևով։ Յուրաքանչյուր հատված փորձարկվում է NVDA-ով, JAWS-ով և VoiceOver-ով նախքան գրադարան ընկնելը։

<!-- before -->
<div class="add-to-cart" onclick="addToCart()">Add to cart</div>

<!-- after -->
<button type="button" class="add-to-cart" onclick="addToCart()">
  Add to cart
</button>

Ինչու է ուղղումը սովորաբար շրջանցումից փոքր

Ոչ role="button", ոչ tabindex="0", ոչ keydown handler Enter-ի և Space-ի համար։ Այն տարրը, որ արդեն այս ամենն անում է, գալիս է բրաուզերի հետ։ Գտածոների մեծ մասը այսպես է լուծվում, և արժե դա իմանալ, մինչ թիմը հասանելիության sprint-ը գնահատի իրական արժեքից երեք անգամ ավելի։

04 — Փակում

Ticket-ը փակվում է, երբ վերասկանավորումն է ասում։

Ոչ թե երբ մեկը քարտը տեղափոխում է։ Գրանցումը պահում է երկու ամսաթիվն էլ՝ բարձրացման և հաստատման։

  • Վերասկանավորում deploy-ից հետո

    Սկանավորեք փոփոխված էջերը ելակետի դեմ և տեսեք՝ գտածոն անհետացե՞լ է, թե պարզապես տեղափոխվել։ Պլանավորված սկանները դա ծածկում են ցանկացած վճարովի փաթեթում. build-ի պահին սկանավորելը պահանջում է pipeline-ի ինտեգրում, որը այսօր Infrastructure փաթեթում է։

    Խառը

  • Երկու ամսաթիվն էլ մնում է գրանցումում

    Բարձրացվել է 16-ին, փակումը հաստատվել՝ 24-ին — բաց է եղել 8 օր։ Փակման ժամկետն է վերև հաղորդելու արժանի թիվը, որովհետև միջին միավորը կարող է բարելավվել առանց կառուցվածքային փոփոխության, իսկ փակման ժամկետը՝ ոչ։

    Անվճարից

  • Ինչ չի կարող հաստատել վերասկանավորումը

    Այն կարող է հաստատել, որ <code><button></code>-ն այժմ կոճակ է։ Չի կարող հաստատել, որ ձեր նոր alt տեքստը նկարագրում է նկարը, կամ որ checkout-ը ավարտելի է էկրանի ընթերցիչով։ Պրակտիկները սովորաբար խորհուրդ են տալիս, որ ուղղումը վերստուգի մեկը, ով այն չի արել — ավտոմատիկան այդ մեկը չէ։

    Ձեռքով աուդիտ

  • Եթե ռեսուրս չկա, կարող ենք անել աշխատանքը

    Փորձագիտական շտկումը ըստ պահանջի և շտկման sprint-ները հասանելի են, երբ թիմը չի կարող ticket-ները վերցնել։ Դա Infrastructure փաթեթի ծառայություն է, ոչ թե անվճար պլանի կոճակ, և նախընտրում ենք, որ իմանաք՝ որն է, մինչ դրա շուրջ պլանավորելը։

    Infrastructure

05 — Որտեղ ենք տեղավորվում

Մենք չենք փորձում հաղթել axe-ին ձեր IDE-ում։

Եթե ծրագրավորող եք և այս էջը համեմատում եք ձեր խմբագրիչում արդեն եղած գործիքի հետ, ահա ազնիվ համեմատությունը։

Ինչ են IDE-ի գործիքներն ավելի լավ անում

  • Խնդիրը բռնել մինչ commit-ը։ Խմբագրիչի linter-ը և pull request-ի ստուգումը գերազանցում են ցանկացած deploy-ից հետո սկան՝ ներառյալ մերը։
  • Կանոնների շարժիչի և դրա հետևում կանգնած գիտելիքի բազայի խորությունը։ Այս կատեգորիան ունի հստակ առաջատար, և դա մենք չենք։
  • Ուղղումներ, առաջարկված խմբագրիչի ներսում գործակալի կողմից, որը տեսնում է ձեր source-ը։ Մենք սկանավորում ենք render արված էջերը և տալիս selector, ոչ տողի համար։

Ինչի համար ենք մենք

  • Այն մարդիկ, ովքեր IDE-ում չեն։ Linter-ը երբեք չի հասնում մարքեթինգի խմբագրին, ով նկարներ է վերբեռնում, կամ դիզայներին, ով տիրապետում է գունապնակին։ Իսկ կոնտենտով հագեցած կայքում գտածոների մեծ մասը նրանցն է։
  • Այն պորտֆոլիոն, որը դուք չեք կառուցել։ Ձեռք բերված բրենդներ, քարոզարշավի կայքեր և հեռացած գործակալության ձևանմուշներ — ոչ մեկը ձեր repository-ում չէ։
  • Հետո մնացող գրանցումը։ Ամսաթվերով գտածոներ, ամսաթվերով փակումներ և հաշվետվություն, որը նշում է իր սեփական սահմանները — այն մասը, որը linter-ը երբեք չի եղել նախատեսված ստեղծելու։
  • Սկսել առանց գնման հայտի։ Սկանավորեք և կարդացեք գտածոները առանց մուտքի և առանց քարտի, ինչը կարևոր է, երբ բյուջեի խոսակցությունը դեռ չի եղել։

Եթե ձեր ամբողջ պորտֆոլիոն մեկ repository է և ամբողջ թիմը՝ ինժեներներ, գնեք այն գործիքը, որն ապրում է խմբագրիչում, և մեր անվճար սկանը օգտագործեք որպես երկրորդ կարծիք։ Նախընտրում ենք դա ասել այստեղ, քան հաշիվ-ապրանքագրից հետո։ Կազմակերպությունների մեծ մասը այդպիսին չէ. նրանք ունեն CMS, դիզայն-համակարգ, երեք գործակալություն և տասնամյակի էջեր, որոնց հրապարակումը ոչ ոք չի հիշում։ Հենց այդ իրավիճակի համար է գրված այս էջը։

06 — FAQ

Հարցեր՝ անկեղծ պատասխաններով։

Կարո՞ղ է վիջեթը ամեն ինչ ուղղել, որ ծրագրավորողները կոդին չդիպչեն։

Ոչ, և շուկայում ոչ մի գործիք չի կարող ազնվորեն հակառակը պնդել։ Վիջեթը առաջարկում է փորձառության շերտի կառավարում՝ կոնտրաստ, տեքստի չափ, տողամիջոց, շարժում, այն այցելուներին, ովքեր միացնում են։ Իմաստալից alt տեքստը, ենթագրերը, իմաստային մարկափը և ստեղնաշարային տրամաբանությունը ապրում են կոդում և CMS-ում։ Մենք յուրաքանչյուր գտածոյի վրա նշում ենք՝ որն է որը, և վիջեթով մեղմացվածները փակված չենք նշում։

Ի՞նչ framework-ներ են ծածկում կոդի հատվածները։

Այսօր՝ պարզ HTML, React, Vue և Angular։ Next.js-ը և React-ի վրա հիմնված այլ framework-ները օգտագործում են React-ի ուղեցույցը։ Եթե ձեր stack-ը ցուցակում չէ, գտածոն դեռ գալիս է selector-ով, չափանիշով և HTML մակարդակի ուղղումով, որը սովորաբար ուղղակիորեն թարգմանվում է։ Ասեք, թե ինչ եք օգտագործում — ցուցակը աճում է հարցերի հերթականությամբ։

Ինչպե՞ս են ոչ տեխնիկական մարդիկ վարվում իրենց գտածոների հետ։

Կոնտենտի գտածոները վերաշարադրվում են որպես պարզ լեզվով քայլեր այն պլատֆորմի համար, որի վրա կայքն իրականում աշխատում է՝ WordPress, Shopify, Wix, Squarespace կամ Webflow, առանց selector-ի և առանց WCAG-ի համարի հենց հրահանգում։ Խմբագիրը պետք է կարողանա ուղղել բացակայող alt տեքստը՝ առանց սովորելու, թե ինչ է նշանակում 1.1.1։ Չափանիշը դեռ գրանցվում է գտածոյի դիմաց՝ աուդիտի հետքի համար. պարզապես խմբագիրը դա չի կարդում։

Կարո՞ղ ենք լսել էկրանի ընթերցիչի տարբերությունը, թե միայն կարդալ։

Սիմուլյատորը ցույց է տալիս հայտարարությունը որպես տեքստ. անցնում եք սխալ և ուղղված մարկափի միջև և տեսնում, թե կոնկրետ ինչ կասեր էկրանի ընթերցիչը յուրաքանչյուր դեպքում՝ կողք կողքի։ Դա սովորաբար բավական է sprint-ի պլանավորման վեճը ավարտելու համար։ Իսկ իրականի փոխարեն ոչինչ չկա. պետք է NVDA կամ VoiceOver գործարկել հենց էջի վրա, և մեր ձեռքով աուդիտները հենց դա են անում այն ուղիներում, որտեղ կարևոր է՝ checkout, գրանցում, հաշվի վերականգնում։

Մենք արդեն axe ենք օգտագործում։ Պատճառ կա՞ սա ավելացնելու։

Երբեմն՝ ոչ, և վերևի 05 բաժինը դա ուղիղ ասում է։ Պահեք խմբագրիչի գործիքակազմը — այն բռնում է ավելի վաղ, քան մենք կարող ենք։ Ավելացրեք մեզ այնտեղ, որտեղ աշխատանքը դուրս է գալիս ինժեներությունից՝ կոնտենտի գտածոներ, որոնք CMS-ի խմբագրինն են, կոնտրաստի որոշումներ, որոնք դիզայն-համակարգինն են, երրորդ կողմի բաղադրիչներ, որոնք մատակարարի պատասխանատուինն են, և ամսաթվերով գրանցումը, որը linter-ը երբեք չի եղել նախատեսված ստեղծելու։ Եթե սրանցից ոչ մեկը ձեզ չի վերաբերում, հավանաբար մենք ձեզ պետք չենք։

Սկանավորեք մեկ անգամ։ Տեսեք՝ ով ինչի տերն է։

Անվճար, առանց մուտքի՝ միավորի և խնդիրների ցուցակի համար։ Ուղղորդումը երևում է մինչ հաշիվ ստեղծելը, որովհետև հենց դա եք գնահատում։

Սկանավորել և տեսնել բաժանումը՝ անվճարՇտկման փաստաթղթեր

Այն թիմերի համար, ովքեր նախընտրում են փակել տասը ticket, քան բացել հարյուր։