ဝဘ်ဆိုဒ်ကို လူတိုင်း အသုံးပြုနိုင်အောင် ပြုလုပ်နည်း- WCAG 2.2 စတင်လမ်းညွှန်

ဝဘ်ဆိုဒ်ကို accessible ဖြစ်စေရန် mouse အပြင် keyboard၊ screen reader၊ zoom သို့မဟုတ် switch စက်ပစ္စည်းဖြင့်လည်း လူများ အသုံးပြုနိုင်အောင် တည်ဆောက်ပါ- ခလုတ်၊ link၊ heading နှင့် form label များအတွက် အမှန်တကယ် HTML element များကို သုံးပါ၊ ပုံများကို အဓိပ္ပာယ်ရှိသော alt text ပေးပါ၊ စာသား contrast ကို မြင့်မားစွာထားပြီး focus ကို မြင်ရအောင် ပြုလုပ်ပါ။ ရည်မှန်းရမည့် စံနှုန်းမှာ WCAG 2.2 Level AA ဖြစ်သည်။ အလိုအလျောက် စစ်ဆေးကိရိယာများက ပြဿနာအစိတ်အပိုင်းကို ဖမ်းသည်၊ မိနစ် ၁၀ ၏ keyboard နှင့် screen reader စမ်းသပ်မှုက ကျန်အများစုကို ဖမ်းသည်။

လက်တွေ့တွင် "accessible" ဆိုသည်မှာ

Accessibility သည် လူများနှင့် သက်ဆိုင်သည်- screen reader သုံးသော မျက်မမြင်တစ်ဦး၊ keyboard ဖြင့် လှုပ်ရှားသူ လက်တုန်ရှိသူတစ်ဦး၊ 200% အထိ zoom လုပ်ရသော အမြင်အားနည်းသူတစ်ဦး၊ နေရောင်ခြည်ပြင်းသောနေရာတွင် ဖတ်သူတစ်ဦး၊ ခေတ္တ လက်ကျိုးနေသူတစ်ဦး။ ကောင်းမွန်သော accessibility သည် အားလုံးအတွက် ဆိုဒ်ကို ပိုကောင်းစေတတ်သည်- ရှင်းလင်းသော ဖွဲ့စည်းပုံ၊ ဖတ်ရလွယ်သော စာသား၊ အမှားကို ရှင်းပြသော form များ။

ရည်ညွှန်းစံနှုန်းမှာ W3C ၏ Web Content Accessibility Guidelines (WCAG) ဖြစ်သည်။ ၂၀၂၆ စက်တင်ဘာလအထိ လက်ရှိ ဗားရှင်းမှာ WCAG 2.2 ဖြစ်သည် (၂၀၂၃ အောက်တိုဘာတွင် ထုတ်ဝေ၊ ၂၀၂၄ ဒီဇင်ဘာတွင် update); WCAG 3 သည် အစောပိုင်း draft ဖြစ်သည်။ WCAG ကို အခြေခံမူ လေးခုပေါ် တည်ဆောက်ထားသည်- အကြောင်းအရာသည် ခံစားနိုင်ရမည်၊ လုပ်ဆောင်နိုင်ရမည်၊ နားလည်နိုင်ရမည်၊ ခိုင်မာရမည် ဟူသော အချက်များ ဖြစ်ပြီး လိုက်နာမှု အဆင့်သုံးဆင့် ရှိသည်-

နေရာအချို့ရှိ ဥပဒေများက WCAG ကို ရည်ညွှန်းသည်- ဥပမာ European Accessibility Act သည် ၂၀၂၅ ဇွန်မှစ၍ EU ရှိ consumer ဆိုင်ရာ digital ဝန်ဆောင်မှု အများအပြားတွင် သက်ရောက်နေသည်။ သင်ကို ဘယ်စည်းမျဉ်းများ သက်ရောက်သည်ဆိုသည်မှာ သင် ဘယ်နေရာတွင် လုပ်ကိုင်သလဲနှင့် ဘာရောင်းသလဲပေါ် မူတည်သည်၊ သေချာမသိပါက အကြံပေးတစ်ဦးကို မေးပါ။ ဤလမ်းညွှန်သည် လက်တွေ့ အလုပ်ကို ဖုံးလွှမ်းသည်။

ရောက်ရှိရန် ရွေးချယ်စရာများ

ဆိုဒ်သေးသေး အများစုအတွက် ပထမနှစ်ခုသည် လုံလောက်သည်- AI ကို ထိပ်ဆုံးက accessible ဖြစ်အောင် တည်ဆောက်ရန် ပြောပြီး ထုတ်ဝေမီ စစ်ဆေးပါ။

အရေးအကြီးဆုံး ပြင်ဆင်ချက်များ

မှန်ကန်သော HTML element များကို သုံးပါ

Accessibility အများစုသည် မှန်ကန်သော HTML ဖြင့် အခမဲ့ ရရှိသည်။ <button> သည် focus ရနိုင်ပြီး Enter နှင့် Space ဖြင့် အလုပ်လုပ်ကာ ခလုတ်အဖြစ် ကြေညာသည်။ click handler ပါသော <div> သည် ထိုအရာများ မဟုတ်ပါ။ AI ရေးသော ကုဒ်သည် တစ်ခါတစ်ရံ အရာအားလုံးအတွက် style ပြုလုပ်ထားသော div များကို သုံးတတ်သည်၊ semantic element များကို တောင်းပါ-

• လုပ်ဆောင်ချက်များအတွက် <button>၊ navigation အတွက် <a href>
• စာမျက်နှာတစ်ခုလျှင် <h1> တစ်ခု၊ ထို့နောက် အစဉ်လိုက် <h2>၊ <h3>- screen reader သုံးသူများသည် heading များကြား ခုန်ကြသည်
• Landmark များ- <header>၊ <nav>၊ <main>၊ <footer>
• form field တိုင်းနှင့် ချိတ်ထားသော <label>
• စာမျက်နှာ၏ ဘာသာစကားကို <html lang="en"> တွင်

ဒေသခံ element မသင့်တော်သည့်အခါမှသာ ARIA attribute များကို သုံးပါ- ဥပမာ စိတ်ကြိုက် tab အစုအဝေး သို့မဟုတ် combobox အတွက်။ မှားသော ARIA သည် မသုံးခြင်းထက် ဆိုးသည်။

Keyboard ဝင်ရောက်ခွင့်နှင့် မြင်ရသော focus

mouse ဖြင့် လုပ်နိုင်သမျှ အရာအားလုံးကို keyboard တစ်ခုတည်းဖြင့်လည်း လုပ်နိုင်ရမည် (WCAG 2.1.1)။ စာမျက်နှာပေါ်တွင် Tab ကို နှိပ်ကြည့်ပါ- link၊ ခလုတ်နှင့် field တိုင်းကို ယုတ္တိရှိသော အစဉ်အတိုင်း ရောက်နိုင်ရမည်၊ focus ဘယ်မှာရှိသည်ကို အမြဲမြင်ရမည် (2.4.7 Focus Visible)။ WCAG 2.2 က focus ရနေသော element သည် sticky header သို့မဟုတ် cookie banner အောက်တွင် လုံးဝ ဖုံးကွယ်မခံရဟု ထည့်ထားသည် (2.4.11၊ Level AA)။

အဖြစ်များသော ပျက်ကွက်မှုများ- hover တွင်သာ ဖွင့်သော menu များ၊ focus ကို မထိန်းထားသော သို့မဟုတ် Escape ဖြင့် ပိတ်၍မရသော modal များ၊ နောက်တစ်ခုဖြင့် မအစားထိုးဘဲ CSS တွင် outline: none ထားခြင်း။

စာသားနှင့် ပုံ ရှင်းပြချက်များ

အဓိပ္ပာယ်ရှိသော ပုံတိုင်းသည် ဆက်စပ်အခြေအနေတွင် ပြသနေသည်ကို ဖော်ပြသော alt text လိုအပ်သည် ("ဟင်းလျာစားပွဲကို ပြင်ဆင်နေသော chef" ဟု ဖြစ်ရမည်၊ "image1.jpg" မဟုတ်ပါ)။ အလှဆင်ပုံများသည် screen reader က ကျော်သွားစေရန် ဗလာ alt="" ကို ရပါသည်။ icon တစ်ခုတည်းပါသော ခလုတ်များသည် accessible အမည် လိုအပ်သည် ("Close"၊ "Search")။ ဗီဒီယိုများတွင် caption လိုအပ်ပြီး အသံများတွင် transcript လိုအပ်သည်။

အရောင်နှင့် contrast

WCAG 2.2 AA သည် ပုံမှန်စာသားအတွက် အနည်းဆုံး contrast အချိုး 4.5:1 နှင့် ကြီးသော စာသားအတွက် 3:1 (1.4.3)၊ input border နှင့် အဓိပ္ပာယ်ရှိသော icon ကဲ့သို့ interface အစိတ်အပိုင်းများအတွက် 3:1 (1.4.11) ကို တောင်းဆိုသည်။ အမြဲ ပျက်ကွက်တတ်သော အရာများမှာ မီးခိုးရောင် placeholder စာသားနှင့် ဖျော့သော ခလုတ်များ ဖြစ်သည်။ ထို့အပြင် အရောင်တစ်ခုတည်းဖြင့် အဓိပ္ပာယ် မသယ်ပါနှင့်- မမှန်သော field ပေါ်ရှိ အနီရောင် border ကို error message ပါ လိုအပ်သည်။

အရွယ်ပြောင်းခြင်းနှင့် reflow

စာသားသည် 200% zoom တွင် အသုံးဝင်နေရမည် (1.4.4)၊ အကြောင်းအရာသည် 320 CSS pixel အကျယ်တွင် ဘေးသို့ scroll မလုပ်ဘဲ အလုပ်လုပ်ရမည် (1.4.10)။ ကောင်းမွန်စွာ ပြုလုပ်ထားသော responsive layout က ဤအရာ အများစုကို ကိုင်တွယ်ပေးသည်။

ပစ်မှတ်အရွယ်၊ form နှင့် error များ

• Target အရွယ်- WCAG 2.2 AA က pointer target အနည်းဆုံး CSS pixel 24 x 24 သို့မဟုတ် သေးငယ်သည်များပတ်လည် လုံလောက်သော နေရာ တောင်းဆိုသည် (2.5.8)။ ဖုန်းပေါ်တွင် ပိုကြီးသည် ပိုသက်သာသည်။
• Form များ- မြင်ရသော label များ (placeholder-only မဟုတ်)၊ ရှင်းလင်းသော ညွှန်ကြားချက်များနှင့် ဘာမှားနေပြီး ဘယ်လို ပြင်ရမည်ကို field ဘေးတွင် ပြသော error message များ။
• Login- လူများကို ပဟေဠိ ဖြေခိုင်းခြင်း သို့မဟုတ် တခြား ရွေးချယ်စရာမပါဘဲ ကုဒ်ကို ကူးခိုင်းခြင်း မပြုပါနှင့်၊ password manager နှင့် paste ကို ခွင့်ပြုပါ (3.3.8 Accessible Authentication)။

အလုပ်ဖြစ်သော prompt များ

ဤဆိုဒ်ကို WCAG 2.2 Level AA နှင့် ကိုက်ညီအောင် တည်ဆောက်ပါ- semantic HTML landmark များ၊ စာမျက်နှာတစ်ခုလျှင် h1 တစ်ခု heading များ အစဉ်လိုက်၊ အမှန်တကယ် button နှင့် link element များ၊ form field တိုင်းတွင် label များ၊ မြင်ရသော focus style များ၊ စာသား contrast အနည်းဆုံး 4.5:1၊ အဓိပ္ပာယ်ရှိသော ပုံများတွင် alt text၊ အလှဆင်ပုံများတွင် alt=""၊ နှင့် html lang သတ်မှတ်ထားရန်။

/signup နှင့် /checkout စာမျက်နှာများကို accessibility အတွက် စစ်ဆေးပါ။ keyboard-only အသုံးပြုမှု၊ focus အစဉ်၊ မြင်ရသော focus၊ label များ၊ error message များ၊ contrast နှင့် icon ခလုတ်များ၏ screen reader အမည်များကို စစ်ပါ။ ပြဿနာတစ်ခုစီကို WCAG စံသတ်မှတ်ချက်နှင့်အတူ စာရင်းပြုစုပြီး visual ဒီဇိုင်းကို လိုအပ်သည်ထက် ပိုမပြောင်းဘဲ ပြင်ပါ။

mobile menu ကို keyboard ဖြင့် အသုံးမပြုနိုင်ပါ။ aria-expanded ပါသော ခလုတ်တစ်ခု ဖြစ်အောင် ပြုလုပ်ပါ၊ ဖွင့်သောအခါ focus ကို menu အတွင်းသို့ ရွှေ့ပါ၊ Escape ဖြင့် ပိတ်ပြီး focus ကို ခလုတ်သို့ ပြန်ပို့ပါ။

အဆင့်လိုက်

1. အလိုအလျောက် စစ်ဆေးမှု တစ်ခု လုပ်ပါ။ Chrome DevTools ရှိ Lighthouse ၏ Accessibility အပိုင်း သို့မဟုတ် axe browser extension ကို စာမျက်နှာအဓိက တစ်ခုစီတွင် သုံးပါ။ ၎င်းတင်ပြသမျှ အားလုံးကို ပြင်ပါ။
2. Mouse ကို ဖြုတ်ပါ။ စာမျက်နှာတစ်ခုစီတွင် Tab နှိပ်ပြီး အရေးကြီး လုပ်ငန်းအားလုံး- စာရင်းသွင်း၊ ရှာဖွေ၊ checkout- ကို ပြီးအောင် လုပ်ပါ။ မရောက်နိုင်သော၊ focus မမြင်ရသော သို့မဟုတ် ထွက်၍မရသော အရာများကို မှတ်ပါ။
3. 200% ကို zoom လုပ်ပြီး window ကို ဖုန်းအကျယ်သို့ ကျဉ်ပါ။ ဘာမျှ ဖြတ်ထားခြင်း သို့မဟုတ် ဘေးသို့ scroll လိုခြင်း မရှိရမည်။
4. Screen reader ကို မိနစ် ၁၀ စမ်းကြည့်ပါ- Mac နှင့် iPhone တွင် VoiceOver၊ Android တွင် TalkBack၊ သို့မဟုတ် Windows တွင် NVDA (အခမဲ့)။ heading၊ link နှင့် form field များကို နားထောင်ပါ။ အမည်မရှိသော "button" သို့မဟုတ် "link, click here" ဆိုသည်မှာ ပြုပြင်ရမည့် အလုပ် ဖြစ်သည်။
5. စာသား၊ ခလုတ်နှင့် input များ၏ contrast ကို contrast checker ဖြင့် စစ်ပါ။
6. ပြင်ပြီး တူညီသော လုပ်ငန်းများကို ပြန်စမ်းပါ။
7. accessibility ကြေညာချက် ကို ထုတ်ဝေပါ- မည်သည့်စံနှုန်းကို ရည်မှန်းသလဲ၊ ပြဿနာများကို ဘယ်လို အစီရင်ခံရမလဲ ဆိုသည်ကို ဖော်ပြပြီး ထိုအစီရင်ခံချက်များကို ပြန်ဖြေပါ။

အဖြစ်များသော အမှားများ

• Code ကို ပြင်မည့်အစား overlay widget ကို အားကိုးခြင်း။
• focus outline များကို ပိုမရှင်းလင်းဟု ထင်၍ အစားထိုးမပြဘဲ ဖယ်ရှားခြင်း။
• Placeholder စာသားကို label တစ်ခုတည်း အဖြစ် သုံးခြင်း။ တစ်စုံတစ်ဦး ရိုက်စပြုသည်နှင့် ပျောက်သွားပြီး မကြာခဏ contrast နိမ့်သည်။
• "Click here" နှင့် "Read more" link များ။ အခြေအနေမပါဘဲ screen reader သုံးသူများသည် တူညီသော link စာရင်းကို ကြားရသည်။
• Keyword များ ထည့်ထားသော alt text။ Alt text သည် လူအတွက်ဖြစ်သည်; ပုံကို ဖော်ပြပါ။
• တစ်ကြိမ်သာ စမ်းခြင်း။ feature အသစ်တိုင်းက keyboard ဝင်ရောက်ခွင့်ကို ဖျက်နိုင်သည်။ ထုတ်ဝေမီ စမ်းသပ်ခြင်း တွင် keyboard အဆင့်ကို ထည့်ပါ။

Accessibility စစ်ဆေးစာရင်း

• အဓိက စာမျက်နှာများတွင် အလိုအလျောက် စစ်ဆေးမှု (Lighthouse သို့မဟုတ် axe) သန့်ရှင်းသည်
• လုပ်ငန်းတိုင်းကို keyboard တစ်ခုတည်းဖြင့် ပြီးနိုင်သည်
• Focus သည် အမြဲမြင်ရပြီး sticky element များ နောက်တွင် ဘယ်တော့မှ မဖုံးကွယ်ပါ
• Semantic heading၊ landmark၊ button နှင့် link များ၊ lang သတ်မှတ်ထား
• အဓိပ္ပာယ်ရှိသော alt text၊ အလှဆင်ပုံများတွင် alt=""၊ ဗီဒီယိုတွင် caption
• စာသား contrast ≥ 4.5:1 (ကြီးသောစာသား ≥ 3:1)၊ UI အစိတ်အပိုင်း ≥ 3:1
• 200% zoom နှင့် 320 px အကျယ်တွင် အလုပ်လုပ်သည်
• form field တိုင်းတွင် မြင်ရသော label နှင့် ရှင်းလင်းသော error message များ
• ပြဿနာများ အစီရင်ခံနိုင်သော နည်းလမ်းပါသော accessibility ကြေညာချက်

ဤအယူအဆများနောက်ကွယ်ရှိ အကြောင်းအရာအတွက် ဝဘ် accessibility ဆိုသည်မှာ ဘာလဲ ကို ဖတ်ပါ။ Accessible ဒီဇိုင်းနှင့် ကောင်းသော ဒီဇိုင်းသည် အများအပြား ထပ်နေသည်; AI ဖြင့် မျက်စိကျသော အက်ပ် ဒီဇိုင်းဆွဲနည်း က visual အပိုင်းကို ဖုံးလွှမ်းသည်။

Mythex တွင် Accessibility

Mythex သည် သင်တောင်းသော စံနှုန်းဖြင့် တည်ဆောက်သဖြင့် ပထမ prompt နှင့် နောက်ဆက်တွဲ စာတိုင်းတွင် "WCAG 2.2 AA" ကို ထည့်ပါ။ Preview ၏ ဖုန်းအရွယ် frame ဖြင့် သေးငယ်သော မျက်နှာပြင်များကို စစ်နိုင်သည် (Preview and Code)၊ သို့သော် keyboard၊ zoom နှင့် screen reader စမ်းသပ်မှုများသည် ထုတ်ဝေထားသော URL သို့မဟုတ် သီးခြား tab တွင် ဖွင့်ထားသော preview ပေါ်တွင် အကောင်းဆုံး အလုပ်လုပ်သည်။ agent ကို စာမျက်နှာတစ်ခု စစ်ဆေးပြီး တွေ့ရှိသည်များကို ပြင်ဆင်ခိုင်းကာ ပြင်ဆင်ချက်များကို သင်ကိုယ်တိုင် စမ်းပါ- အလိုအလျောက် စစ်ဆေးမှုသည် အစပြုချက်သာ ဖြစ်ပြီး အတည်ပြုချက် မဟုတ်ပါ။

မေးခွန်းများ