Gawing gumagana ang iyong solong mga app ng pahina sa mga mambabasa ng screen

Ang mga solong-pahina na app ay nagdudulot ng isang mahalagang hamon sa kakayahang mai-access pagdating sa pakikipag-usap sa mga pagbabago sa pagtingin. Nang walang isang pag-refresh ng pahina, ang mga mambabasa ng screen ay hindi kukuha ng mga mahahalagang pagbabago sa UI, na iniiwan ang mga gumagamit na may kapansanan sa paningin na nalilito at walang kamalayan.

Ang isang solusyon ay ang paglikha ng isang mensahe batay sa pamagat ng pahina, at pakikinabangan ang isang live na rehiyon ng ARIA upang tahasang ihayag, sa pamamagitan ng isang kapaki-pakinabang na mensahe, na na-load ang isang bagong pagtingin. Lumikha muna ng isang pagpapaandar na tinawag kapag na-update ang viewContent. Nagbibigay ang AngularJS ng isang $ viewContentLoaded na kaganapan para sa hangaring ito. Sa code ng controller, makinig para sa kaganapan at tumawag sa isang pagpapaandar (sa CoffeeScript):

app.controller 'PageController', ($ saklaw, $ lokasyon, $ http) -> $ saklaw. $ on '$ viewContentLoaded', ianunsyo_view_loaded

Sa pagpapaandar na announce_view_loaded, i-update ang pamagat ng pahina at ipahayag ang mensahe. Habang ang mga balangkas ng solong pahina ay hindi awtomatikong nag-a-update ng mga pamagat ng pahina, ang pagpapanatiling naka-sync ang pamagat ng pahina sa kasalukuyang pagtingin ay nagpapabuti sa pag-unawa ng mga gumagamit sa view.

Ang isang paraan upang magawa ito ay ang paggamit ng isang katangian ng data saanman sa view upang maiimbak ang pamagat ng view:

document.title = $ (’[data-viewtitle]’). data ’viewtitle’

Lumikha ngayon ng isang mensahe gamit ang na-update na pamagat ng pahina, at ipahayag ito:

$ .announce (document.title + ’, tingnan ang load’)

Ang $ .announce () ay isang jQuery function na gumagamit ng isang solong, hindi nakikita na live na rehiyon upang ipahayag ang nilalaman. Nakakatulong ang pamamaraang ito na gawing simple ang code at mga pagsusumikap sa pag-debug kumpara sa paggamit ng ad hoc ng mga live na rehiyon. Gayunpaman, mayroong ilang mga pinakamahusay na kasanayan upang tandaan.

Una, lumikha ng isang solong ‘tagapagbigay-alam’ na live na rehiyon sa iyong pahina upang ipahayag ang nilalaman gamit ang aria-live = "magalang | assertive". Huwag gumamit ng anumang iba pang mga live na rehiyon, kasama ang mga tungkulin ng live na rehiyon (hal. Role = "alert | timer | log"). Isang halimbawa ng live na rehiyon:

div aria-live = "magalang" id = "tagapagbalita"> (Idinagdag ang naidagdag o na-update dito) / div>

Pangalawa, limasin ang mga nilalaman ng live na rehiyon ilang sandali lamang matapos i-update ang nilalaman. Pinipigilan nito ang mga gumagamit na madapa sa mga lumang mensahe.

Panghuli, tulad ng anumang diskarte sa kakayahang mai-access, gumamit ng $ .announ () nang may husay. Dapat lamang itong gamitin para sa pakikipag-usap ng makabuluhang mga pag-update ng UI.

Mga salita: Patrick Fox

Si Patrick Fox ay direktor ng teknolohiya ng Web UI sa Razorfish sa Austin. Ang artikulong ito ay orihinal na lumitaw sa isyu ng 271 ng net magazine.

Nagustuhan ito? Basahin ang mga ito!

• Ang gabay ng taga-disenyo sa digital na kakayahang mai-access
• Ang pinakamahusay na libreng mga font ng script
• Libreng pagpili ng font ng graffiti