Ծրագրավորողների համար

Դուք արդեն գիտեք, թե ինչ են խոստանում overlay-ները։ Այս էջը մնացածի մասին է։

Սկաներ, որը տալիս է կոնկրետ տարրը, չափանիշը և ուղղումը, և ուղիղ ասում է, թե որ գտածոներին ոչ մի վիջեթ չի կարող դիպչել։ Անվճար, միավորի համար մուտք պետք չէ, վաճառքի զանգ չկա։

Գործարկել սկան Նախ կարդալ մեր դիրքորոշումը overlay-ների մասին

Սկաներն աշխատում է առանց վիջեթի
Յուրաքանչյուր գտածո՝ WCAG 2.2 չափանիշին կապված
Առանց հետագծող քուքիների

app/components/ProductCard.tsx

3այս component-ում

Նկարը հասանելի անուն չունի1.1.1 Non-text Content · A · img.product-thumbՁեռքով
Ինտերակտիվ տարրը ֆոկուս չի ընդունում2.1.1 Keyboard · A · div.add-to-cartՁեռքով
Տեքստի կոնտրաստը 3.1:1, պահանջվում է 4.5:11.4.3 Contrast (Minimum) · AA · .price--saleՎիջեթը օգնում է

Այս երեքից երկուսը ձերն են։ Մենք չենք ձևացնի, թե սկրիպտը կարող է գրել իմաստալից alt, կամ div-ին տալ role, որը երբեք չի ունեցել։

Պատկերավոր օրինակ — իրական սկանի արդյունք չէ։

01 — Սկսեք այստեղից

Այո, մենք overlay ենք պատրաստում։ Ահա ինչ ենք մտածում դրանց մասին։

Դուք այն լսարանն եք, որ ամենայն հավանականությամբ կփակի այս ներդիրը, և պատճառները հիմնավոր են։ Ուստի սկսենք հենց դրանցից։

Ինչի հետ համաձայն ենք

Overlay-ը չի կարող կայքը համապատասխան դարձնել։ Համապատասխանությունը մարկափում է, և ոչ մի client-side սկրիպտ մտադրությունը չի վերաշարադրում։
Ավտոմատ ստեղծված alt տեքստը սովորաբար ավելի վատ է, քան դրա բացակայությունը, որովհետև ստեղծում է լուծված խնդրի տպավորություն։
Օժանդակ տեխնոլոգիա օգտագործողներից շատերը overlay-ները դուր չեն գալիս, և այն մատակարարները, որ դա անտեսում են, չեն լսում հենց այն մարդկանց, ում ծառայում են։
2025-ի ընթացքում հայցեր շարունակվել են ներկայացվել այն կայքերի դեմ, որոնք արդեն վիջեթ ունեին։ Վիջեթը երբեք պաշտպանություն չի եղել։

Որտեղ ենք այլ կերպ մտածում

Օգտատիրոջ կողմից կառավարվող կարգավորումների շերտը՝ տեքստի չափ, կոնտրաստ, շարժում, տողամիջոց, իրապես օգտակար է որոշ այցելուների, քանի դեռ այն առաջարկվում է որպես նախապատվություն, ոչ թե վաճառվում որպես համապատասխանություն։
Այս կատեգորիային overlay-ների հասցրած վնասը եկել է մարքեթինգից, ոչ թե կարգավորումների վահանակի գաղափարից։ Մենք փորձում ենք պահել երկրորդը և հրաժարվել առաջինից։
Մեր կառուցածի մեծ մասը overlay-ը չէ։ Դա սկաներն է, շտկման ուղեցույցը և աուդիտի հետքը՝ այն մասերը, որոնք ենթադրում են, որ դուք կոդը ուղղելու եք։

Գործնական հետևանքը՝ ուղիղ. կարող եք օգտագործել FlexAccesses-ը որպես սկաներ և երբեք վիջեթը չտեղադրել։ Սա աջակցվող կոնֆիգուրացիա է, ոչ թե շրջանցում։ Եթե ձեր թիմը կոդը ուղղում է ինչպես հարկն է, վիջեթի անելիքը ձեր կայքում շատ քիչ է մնում — և նախընտրում ենք դա ասել այստեղ, քան որ դուք ինքներդ հայտնաբերեք և եզրակացնեք, թե թաքցրել ենք։

02 — Արդյունք

Ինչ է իրականում պարունակում գտածոն։

Ոչ թե միավոր և ընդհանուր տպավորություն։ Յուրաքանչյուր տող պարունակում է բավական, որ բացես ֆայլը և ուղղես։

Դաշտեր, որոնք առկա են յուրաքանչյուր գտածոյում՝ հաշվետվությունում և արտահանված հավելվածում։
Page URL	Որտեղ է հանդիպում՝ հանդիպումների քանակով, ոչ թե առանձին տող յուրաքանչյուրի համար։
Element / selector	Կոնկրետ node-ը՝ որպես selector, որը կարող եք տեղադրել devtools-ում։
WCAG SC	Չափանիշի համարը և անունը՝ օրինակ `2.4.11 Focus Not Obscured (Minimum)`։
Level	A կամ AA։ Ստուգումը WCAG 2.2 AA-ի դեմ է, ներառյալ 2.2-ում ավելացած չափանիշները։
Severity	Կրիտիկական, Լուրջ, Միջին կամ Աննշան՝ որպես գրավոր արժեք, երբեք միայն գույն։
Legal risk	Խստությունից առանձին, որովհետև երկուսը միշտ չեն համընկնում, և ձեր PM-ը կհարցնի։
Widget or Manual	Այն դաշտը, որի շուրջ կառուցված է ամբողջ ընկերությունը։ Երբեք չի բացթողնվում։
Remediation note	Framework-ին համապատասխան, երբ գիտենք ձեր stack-ը, ընդհանուր HTML՝ երբ ոչ։

03 — Ուղղումներ

Ուղեցույց ձեր framework-ում, ոչ թե վերացական։

«Ավելացրեք հասանելի անուն»-ը ուղեցույց չէ։ Ահա թե ինչ է տալիս գտածոն։

Կոդ, ոչ թե տեքստ
Պարզ HTML, React, Vue և Angular։ Յուրաքանչյուրը փորձարկվում է NVDA-ով, JAWS-ով և VoiceOver-ով նախքան գրադարան ընկնելը, որովհետև ARIA, որը մեկում ճիշտ է կարդացվում, մյուսներում՝ ոչ, սխալ է, որը մենք կուղարկեինք ձեզ։
Լսեք տարբերությունը
Ինտերակտիվ սիմուլյատորը անցնում է սխալ և ուղղված մարկափի միջև և ցույց տալիս, թե կոնկրետ ինչ է հայտարարում էկրանի ընթերցիչը։ Օգտակար է code review-ում և անսպասելիորեն համոզիչ՝ product owner-ի հետ հանդիպմանը։
Առաջնահերթություն, որը կպաշտպանեք պլանավորման ժամանակ
Յուրաքանչյուր կետ ունի առաջնահերթություն և իրավական ռիսկ՝ որպես առանձին արժեքներ, ուստի «ինչու է սա redesign-ից վեր» հարցը պատասխան ունի, որը միայն ձեր կարծիքը չէ։

// Գտածո 2.1.1 — div, որը կոճակ չէ

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

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

// before
<div className="add-to-cart" onClick={add}>
  Add to cart
</div>

// after
<button type="button" className="add-to-cart" onClick={add}>
  Add to cart
</button>

<!-- before -->
<div class="add-to-cart" @click="add">
  Add to cart
</div>

<!-- after -->
<button type="button" class="add-to-cart" @click="add">
  Add to cart
</button>

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

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

04 — Աշխատանքային հոսք

Այն գործիքների մեջ, որոնք արդեն բաց են ձեր մոտ։

Գտածոն, որ ապրում է միայն ուրիշի վահանակում, երբեք չի ուղղվում։

Ticket-ների արտահանում
Գտածոները գնում են Jira, GitHub, Trello կամ Asana՝ selector-ը, չափանիշը, խստությունը և շտկման նշումը արդեն մարմնում։ Գնահատումը դառնում է estimate, ոչ թե հետաքննություն։
Անվճարից
Պլանավորված սկաներ և հետընթացի ծանուցումներ
Վերասկանավորում ըստ ժամանակացույցի և ծանուցում, երբ նախկինում անցնողը դադարում է անցնել։ Դասական դեպքը՝ dependency-ի թարմացում, որը հեռացնում է պիտակը։
Վճարովի փաթեթներ
CLI՝ CI/CD-ի համար, custom API և webhook-ներ
Կանգնեցրեք build-ը նոր կրիտիկական գտածոների դեպքում, կամ ուղարկեք արդյունքները այնտեղ, որտեղ պահում եք։ Ուղիղ ասենք՝ սա այսօր Infrastructure փաթեթում է։ Եթե pipeline-ի վերահսկումն է ձեր այստեղ լինելու պատճառը, ասեք մեզ. որքան արագ կշարժվի, կախված է նրանից, թե քանիսդ եք հարցնում։
Infrastructure

// Ինչպիսին պետք է լինի pipeline-ի ստուգումը

$ flexaccesses scan --url https://staging.example.com --fail-on critical

scanning 42 pages …
✓ 1.4.3 Contrast (Minimum)        no new findings
! 2.4.7 Focus Visible             3 new · serious
✗ 1.1.1 Non-text Content          1 new · critical · .hero-banner img

build failed — 1 new critical finding
report: https://app.flexaccesses.com/r/…

Պատկերավոր արդյունք։ Կոնկրետ flag-երը և հրամանների անունները վերջնական չեն — մի կառուցեք սրա հիման վրա։ Մինչ որևէ բան գրելը հարցրեք ընթացիկ CLI-ի փաստաթղթերը։

05 — Սահմաններ

Ամբողջ ավտոմատ ստուգման առաստաղը։

Ներառյալ մերը։ Եթե որևէ մատակարարի թիվը զգալիորեն բարձր է, հարցրեք՝ ինչ են հաշվում։

Ավտոմատիկան բռնում է սա

Արդյոք alt ատրիբուտը գոյություն ունի
Հաշվարկված կոնտրաստի հարաբերակցությունները
Ձևի տարրեր՝ առանց ծրագրային պիտակի
Վերնագրերի հերթականություն, landmark-ների կառուցվածք, փաստաթղթի լեզու

Ավտոմատիկան չի կարող դատել սա

Արդյոք alt="image"-ը որևէ բան նկարագրում է
Արդյոք ֆոկուսի հերթականությունը իմաստալից կերպով համապատասխանում է տեսողականին
Արդյոք էկրանի ընթերցիչի օգտատերը իրականում կարող է ավարտել գնումը
Արդյոք սխալի հաղորդագրությունը ասում է օգտատիրոջը, թե ինչպես վերականգնվի

Ավտոմատ ստուգումը հուսալիորեն հայտնաբերում է WCAG 2.2 AA չափանիշների 30–50%-ը։ Սա մեր իրականացման թերությունը չէ, այլ ստատիկ վերլուծության հատկություն այն չափանիշների նկատմամբ, որոնք մասամբ իմաստի և մտադրության մասին են։ Մաքուր սկանը համարեք անհրաժեշտ, բայց ոչ բավարար պայման։ Մնացածն էկրանի ընթերցիչով ստուգումն է, միայն ստեղնաշարով անցումը և օժանդակ տեխնոլոգիա ամեն օր օգտագործող մարդկանց հետ թեստավորումը։

06 — Մենք

Դուք ստուգելու եք մեր մարկափը։ Խնդրում ենք՝ ստուգեք։

Հասանելիության մատակարար, որի սեփական արտադրանքը ձախողվում է, մատակարար չէ, այլ իր դեմ փաստարկ։

VPAT մեր սեփական արտադրանքի համար

VPAT փաստաթուղթ, որը փաստագրում է, թե որտեղ են մեր վահանակը և վիջեթը համապատասխանում և որտեղ՝ ոչ։ Հասանելի է ըստ պահանջի, ներառյալ ոչ շողոքորթ մասերը։

Վիջեթի սեփական ստեղնաշարային վարքը

Վահանակը հասանելի է ստեղնաշարով, ֆոկուսը չի արգելափակում և փակվում է Escape-ով։ Վիջեթ, որը սա ձախողի՝ միաժամանակ գովազդելով ստեղնաշարային նավիգացիա, անպաշտպանելի կլիներ։

Այս էջը՝ սկանավորված

Մտադիր ենք հրապարակել այս էջի սեփական սկանի արդյունքը՝ մշտական հղումով դեպի հաշվետվությունը, ներառյալ այն, ինչ դեռ բաց է։ Մինչ այդ հղումը գոյություն ունենա, սա համարեք հայտարարված պարտավորություն, ոչ թե ապացույց — կարող եք էջը ինքներդ սկանավորել։

07 — FAQ

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

Վիջեթը փոփոխու՞մ է իմ DOM-ը։

Այո, երբ այցելուն որևէ բան միացնում է։ Տեքստի մասշտաբավորումը, կոնտրաստի ռեժիմները, տողամիջոցի և շարժման կառավարումը աշխատում են ոճեր կիրառելով, իսկ որոշ պրոֆիլների դեպքում՝ ARIA ավելացնելով։ Սա արժե իմանալ, եթե կառուցել եք ուշադիր սեմանտիկա, որին չեք ուզում դիպչել — և սա overlay-ների դեմ ծրագրավորողների ամենահաճախ առարկությունն է, ուստի նախընտրում ենք ասել, քան որ ինքներդ գտնեք։ Եթե չեք ուզում այն ձեր կայքում, գործարկեք սկաները և վիջեթը բաց թողեք։ Այդ կոնֆիգուրացիան աջակցվում է։

Եթե ամեն ինչ ճիշտ ուղղեմ, ձեզ դեռ պե՞տք եմ ունենալու։

Վիջեթի համար՝ ոչ։ Եթե ձեր մարկափը ճիշտ է, վիջեթի առաջարկածի մեծ մասն արդեն հասանելի է բրաուզերի և օգտատիրոջ սեփական օժանդակ տեխնոլոգիայի միջոցով։ Օգտակար է մնում մոնիտորինգը՝ կայքերը հետընթաց են ապրում, dependency-ները փոխվում են, և ինչ-որ մեկը տեղադրում է div, որը պետք է կոճակ լիներ։ Գնեք այն մասը, որ պետք է։ Նախընտրում ենք վաճառել մեկ բան, որ օգտագործում եք, քան երեքը, որոնցից դժգոհ եք։

Կարո՞ղ եմ սա գործարկել CI-ում։

CLI-ն, custom API-ն և webhook-ները այսօր Infrastructure փաթեթում են. սա ազնիվ պատասխան է, ոչ հարմարավետ։ Եթե եկել եք հենց pipeline-ի վերահսկման համար, ասեք — այդ հնարավորության ծրագիրը որոշվում է նրանով, թե քանի թիմ է հարցնում։ Մինչ այդ, պլանավորված սկանները հետընթացի ծանուցումներով ծածկում են նույն կարիքի զգալի մասը՝ առանց build-ի ինտեգրման։

Սկրիպտը կվնասի՞ իմ Core Web Vitals-ին։

Այն 30 կբ-ից պակաս է, բեռնվում է ասինխրոն և մատուցվում CDN-ի եզրից, ուստի render-ը չպետք է արգելափակի։ Մենք միտումնավոր չենք հրապարակում որևէ մեկ արագության թիվ, որովհետև մերը կչափվեր մեր stack-ի վրա, ոչ ձերի։ Դուք ունեք Lighthouse և staging միջավայր — չափեք առաջ և հետո, և մեզ պահեք ձեր իսկ թվի պատասխանատվության տակ։

Ի՞նչ է թույլ տալիս անվճար փաթեթը։

Սկանավորում առանց մուտքի՝ միավորի և առաջնահերթված ցուցակի համար։ Անվճար հաշիվը՝ առանց քարտի և ժամկետի, ներառում է մեկ կայք, ամսական 100 սկանավորված էջ, անսահմանափակ վիջեթի ցուցադրումներ, եթե որոշեք օգտագործել, և WCAG 2.2-ի հիմնական հաշվետվություն։ Բավական է իրական նախագծի վրա արդյունքը գնահատելու համար՝ մինչև որևէ մեկը գնում հաստատի։

Ինչու՞ վստահեմ overlay ընկերության սկաներին։

Հենց այն շահագրգռվածությունը, որի մասին մտահոգված եք, հակառակ ուղղությամբ է աշխատում. սկաներ, որը թերի է ցույց տալիս վիջեթի չլուծելիք գտածոները, մեր հաշվետվությունները ավելի լավ և մեր աուդիտները ավելի ավելորդ կդարձներ։ Մենք այդ գտածոները բացահայտ պիտակավորում ենք և մոնիտորինգի հաշվետվություններում նորերը չենք թաքցնում։ Սա հավատի վրա վերցնել պետք չէ — սկանավորեք էջ, որի խնդիրները արդեն գիտեք, և ստուգեք՝ արդյոք ձեռքով ուղղվող կետերը բոլորն այնտեղ են։

Սկանավորեք էջ, որի խնդիրները արդեն գիտեք։ Ստուգեք մեր աշխատանքը։

Միավորի համար մուտք պետք չէ։ Հաշվի համար՝ քարտ։ Եթե արդյունքը ձեզ օգտակար չէ, սա ամենաարագ ճանապարհն է դա իմանալու։

Գործարկել սկան Շտկման փաստաթղթեր

Ստեղծված է մարդկանց կողմից, ովքեր նախընտրում են ուղղվել, քան որ իրենց հավատան։