Ձեր մեկ էջի հավելվածները գործեք էկրանի ընթերցողների հետ

Մի էջից բաղկացած հավելվածները մատչելիության լուրջ մարտահրավեր են ներկայացնում, երբ բանը հասնում է դիտումների փոփոխությունների հաղորդմանը: Առանց էջի թարմացման ՝ էկրանի ընթերցողները չեն վերցնում UI- ի այս կարևոր փոփոխությունները ՝ տեսողության խնդիրներ ունեցող օգտվողներին շփոթված և անտեղյակ թողնելով:

Լուծումը մեկն է ՝ ստեղծել էջի վերնագրի հիման վրա հաղորդագրություն և օգտագործել ARIA կենդանի տարածաշրջան ՝ օգտակար հաղորդագրության միջոցով հստակ հայտարարելու համար, որ նոր դիտում է բեռնված: Նախ ստեղծեք մի գործառույթ, որը կոչվում է, երբ viewContent- ը թարմացվում է: AngularJS- ն այդ նպատակով $ viewContentLoaded իրադարձություն է տրամադրում: Կարգավորիչի ծածկագրում լսեք իրադարձությունը և գործառույթ կանչեք (CoffeeScript- ում).

app.controller 'PageController', ($ շրջանակ, $ տեղադրություն, $ http) -> $ շրջանակ. $ '' '$ viewContentLoaded' '- ում, հայտարարում_տես_բեռնված

Հայտարարել_տես_բեռնված գործառույթում թարմացրեք էջի անվանումը և հայտարարեք հաղորդագրության մասին: Չնայած մեկ էջի շրջանակները ավտոմատ կերպով չեն թարմացնում էջերի վերնագրերը, էջի վերնագիրը ընթացիկ դիտման հետ համաժամացված պահելը բարելավում է օգտվողների տեսակետի ըմբռնումը:

Դա անելու միջոցներից մեկը տեսադաշտում ինչ-որ տեղ օգտագործել տվյալների հատկանիշ ՝ դիտման վերնագիրը պահելու համար.

document.title = $ ('[[data-viewtitle]'). տվյալների 'viewtitle'

Այժմ ստեղծեք հաղորդագրություն ՝ օգտագործելով նորացված էջի վերնագիրը և հայտարարեք այն.

$ .անոնս (փաստաթուղթ. վերնագիր + ', դիտումը բեռնված է')

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

Նախ, ձեր էջում ստեղծեք մեկ հաղորդավարի կենդանի տարածաշրջան `aria-live =" քաղաքավարի | պնդում "օգտագործելու համար բովանդակություն հայտնելու համար: Մի օգտագործեք այլ կենդանի շրջաններ, ներառյալ կենդանի տարածաշրջանի դերերը (օր. Role = "alert | timer | log"): Կենդանի տարածաշրջանի օրինակ.

div aria-live = "քաղաքավարի" id = "հայտարարող"> (այստեղ ավելացված կամ թարմացված տեքստը կհայտարարվի) / div>

Երկրորդ, բովանդակությունը թարմացնելուց անմիջապես հետո մաքրել կենդանի տարածաշրջանի բովանդակությունը: Սա կանխում է օգտվողներին սայթաքել հին հաղորդագրությունների վրա:

Վերջապես, ինչպես ցանկացած մատչելիության տեխնիկայի դեպքում, խելամտորեն օգտագործեք $ .announce () - ը: Այն պետք է օգտագործվի միայն UI- ի զգալի թարմացումները հաղորդելու համար:

Բառեր՝ Պատրիկ Ֆոքս

Պատրիկ Ֆոքսը Օստինի Razorfish- ի վեբ UI տեխնոլոգիայի տնօրեն է: Այս հոդվածն ի սկզբանե հայտնվել է net ամսագրի 271 համարում:

Դուր եկավ սա Կարդացեք սրանք:

• Դիզայների ուղեցույցը թվային մատչելիության համար
• Լավագույն անվճար սցենարի տառատեսակները
• Գրաֆիտիի տառատեսակների անվճար ընտրություն