మీ సింగిల్ పేజీ అనువర్తనాలను స్క్రీన్ రీడర్‌లతో పని చేసేలా చేయండి

వీక్షణ మార్పులను కమ్యూనికేట్ చేయడానికి ఒకే పేజీ అనువర్తనాలు ముఖ్యమైన ప్రాప్యత సవాలుగా ఉంటాయి. పేజీ రిఫ్రెష్ లేకుండా, స్క్రీన్ రీడర్లు ఈ ముఖ్యమైన UI మార్పులను ఎంచుకోరు, ఇది దృష్టి లోపం ఉన్న వినియోగదారులను గందరగోళానికి గురి చేస్తుంది మరియు తెలియదు.

పేజీ శీర్షిక ఆధారంగా సందేశాన్ని సృష్టించడం మరియు క్రొత్త వీక్షణ లోడ్ అయినట్లు ఉపయోగకరమైన సందేశం ద్వారా స్పష్టంగా ప్రకటించడానికి ARIA ప్రత్యక్ష ప్రాంతాన్ని ప్రభావితం చేయడం ఒక పరిష్కారం. మొదట వ్యూకాంటెంట్ నవీకరించబడినప్పుడు పిలువబడే ఫంక్షన్‌ను సృష్టించండి. AngularJS ఈ ప్రయోజనం కోసం $ viewContentLoaded ఈవెంట్‌ను అందిస్తుంది. నియంత్రిక కోడ్‌లో, ఈవెంట్ కోసం వినండి మరియు ఒక ఫంక్షన్‌కు కాల్ చేయండి (కాఫీస్క్రిప్ట్‌లో):

app.controller ’PageController’, ($ scope, $ location, $ http) -> $ scope. $ on ’$ viewContentLoaded’, ప్రకటించండి_వ్యూ_లోడెడ్

అనౌన్స్_వ్యూ_లోడెడ్ ఫంక్షన్‌లో, పేజీ శీర్షికను నవీకరించండి మరియు సందేశాన్ని ప్రకటించండి. ఒకే పేజీ ఫ్రేమ్‌వర్క్‌లు స్వయంచాలకంగా పేజీ శీర్షికలను నవీకరించవు, పేజీ శీర్షికను ప్రస్తుత వీక్షణతో సమకాలీకరించడం వినియోగదారుల వీక్షణపై అవగాహనను మెరుగుపరుస్తుంది.

వీక్షణ శీర్షికను నిల్వ చేయడానికి వీక్షణలో ఎక్కడో ఒక డేటా లక్షణాన్ని ఉపయోగించడం దీనికి ఒక మార్గం:

document.title = $ (’[data-viewtitle]’). డేటా ’viewtitle’

ఇప్పుడు నవీకరించబడిన పేజీ శీర్షికను ఉపయోగించి సందేశాన్ని సృష్టించండి మరియు దానిని ప్రకటించండి:

ann .అనాన్స్ (document.title + ’, view load’)

ann .announce () అనేది ఒక j క్వెరీ ఫంక్షన్, ఇది కంటెంట్‌ను ప్రకటించడానికి ఒకే, కనిపించని ప్రత్యక్ష ప్రాంతాన్ని ఉపయోగిస్తుంది. ఈ విధానం ప్రత్యక్ష ప్రాంతాల యొక్క తాత్కాలిక వాడకంతో పోలిస్తే కోడ్ మరియు డీబగ్గింగ్ ప్రయత్నాలను సులభతరం చేయడానికి సహాయపడుతుంది. అయితే, గుర్తుంచుకోవడానికి కొన్ని ఉత్తమ పద్ధతులు ఉన్నాయి.

మొదట, అరియా-లైవ్ = "మర్యాదపూర్వక | నిశ్చయత" ఉపయోగించి కంటెంట్‌ను ప్రకటించడానికి మీ పేజీలో ఒకే ‘అనౌన్సర్’ ప్రత్యక్ష ప్రాంతాన్ని సృష్టించండి. ప్రత్యక్ష ప్రాంత పాత్రలతో సహా ఇతర ప్రత్యక్ష ప్రాంతాలను ఉపయోగించవద్దు (ఉదా. పాత్ర = "హెచ్చరిక | టైమర్ | లాగ్"). ఉదాహరణ ప్రత్యక్ష ప్రాంతం:

div aria-live = "మర్యాదపూర్వక" id = "అనౌన్సర్"> (టెక్స్ట్ జోడించబడింది లేదా నవీకరించబడింది ఇక్కడ ప్రకటించబడుతుంది) / div>

రెండవది, కంటెంట్‌ను నవీకరించిన వెంటనే ప్రత్యక్ష ప్రాంతంలోని కంటెంట్‌లను క్లియర్ చేయండి. ఇది పాత సందేశాలను అడ్డుకోకుండా వినియోగదారులను నిరోధిస్తుంది.

చివరగా, ఏదైనా ప్రాప్యత సాంకేతికత వలె, $ .అన్నన్స్ () ను న్యాయంగా ఉపయోగించండి. ఇది ముఖ్యమైన UI నవీకరణలను కమ్యూనికేట్ చేయడానికి మాత్రమే ఉపయోగించాలి.

పదాలు: పాట్రిక్ ఫాక్స్

పాట్రిక్ ఫాక్స్ ఆస్టిన్లోని రేజర్ ఫిష్ వద్ద వెబ్ యుఐ టెక్నాలజీ డైరెక్టర్. ఈ వ్యాసం మొదట నెట్ మ్యాగజైన్ యొక్క 271 సంచికలో వచ్చింది.

దీన్ని ఇష్టపడ్డారా? వీటిని చదవండి!

• డిజిటల్ ప్రాప్యతకు డిజైనర్ గైడ్
• ఉత్తమ ఉచిత స్క్రిప్ట్ ఫాంట్‌లు
• ఉచిత గ్రాఫిటీ ఫాంట్ ఎంపిక