# Web Accessibility

Inclusive community တစ်ခုတည်ဆောက်ဖို့ accessibility ကောင်းမှရမယ်။ အခုကတော့ website တည်ဆောက်တဲ့နေရာနဲ့ပတ်သတ်ပြီးပြောတာပေါ့။ ဒါပေမယ့် Accessibility ဆိုတာ နေရာတိုင်းမှာလိုအပ်တယ်။ ဥပမာ Wheelchair သုံးတဲ့သူတွေအတွက် Bus, Train တွေမှာ လွယ်ကူအောင်လုပ်ပေးတာမျိုးတွေလိုပေါ့။&#x20;

Assistive technology တွေကိုပိုကောင်းလာအောင် လုပ်ကြဖို့လိုတယ်။ Assistive technology ဆိုတာ မြင်သာအောင်ပြောရရင် မျက်မှန်တို့ ဂျိုင်းထောက်တို့လိုကောင်မျိုးတွေကိုပြောတာပဲ။ \
Website နဲ့ပတ်သတ်လာတော့ screen reader, Keyboard, mouth stick, sip and puff တို့လို input device တွေ၊ နောက် speech control software လိုကောင်တွေကို assistive technology လို့ခေါ်တာပေါ့။&#x20;

ဒီနေရာမှာတော့ website တွေကို အဲ့ဒီလို input device တွေနဲ့အသုံးပြုတာတို့ နောက် content တွေကို လွယ်လွယ်ကူကူ ရနိုင်ဖို့ အဆင်ပြေအောင်လို့လုပ်ပေးရတာမျိုးပေါ့။

ဒီတော့ မေးကြလိမ့်မယ် မလုပ်ပေးလည်း ရတာပဲမဟုတ်ဘူးလားဆိုတာမျိုး။

အရှေ့မှာပြောခဲ့တာရှိတယ် ဥပဒေတွေပြဌာန်းထားတယ်ဆိုတဲ့ကိစ္စ၊ အဲ့ဒီထဲမှာ Digital information ကို access လုပ်တဲ့နေရာမှာလည်း တန်းတူအခွင့်အရေးရှိဖို့တွေလည်းပါတယ်။ Accessible ဖြစ်ဖို့က by law နဲ့ပြဌာန်းထားတာဖြစ်တဲ့အတွက်မလုပ်လို့မရဘူး။ ကိုယ့် product က ကိုယ်တစ်ယောက်တည်းသုံးမှာဆိုရင်တော့ သဘောပေါ့။\
Product က Reputation ကောင်းလာနိုင်တဲ့ဟာမျိုး၊ Global market ထဲဝင်ရမှာမျိုးရင်ဆိုရင်တော့ ထည့်စဉ်းစားဖို့လိုပြီ။ မစဉ်းစားရင် နောက်ကျ တရားအစွဲခံရတာမျိုးတွေ ဥပဒေအရလုပ်လို့ရတယ်။ တစ်ခုတော့ရှိတာပေါ့၊ နိုင်ငံကလည်း ဥပဒေစိုးမိုးဖို့လည်း လိုသေးတာကိုး။

အကျိုးအမြတ်ကဘာလဲပေါ့ \
ROI (Return of Investment) ကိုကြည့်ရင် company တစ်ခုနဲ့တစ်ခု တူချင်မှတော့တူမယ်။ Forester Research ရဲ့ အစီရင်ခံစာအရ $1 invest တိုင်း  $100 နှုန်းပြန်ရတယ်ဆိုတာမျိုးတွေ သိရတယ်။ ပြောခဲ့တာရော ကမ္ဘာလူဦးရေ 1.3 ဘီလီယံက People with disabilities တွေဆိုတာ နည်းတဲ့လူတွေမှ မဟုတ်တာ သူတို့ဆီကနေလည်း အကျိုးအမြတ်ဆိုတာ ရနိုင်တာပဲ။ နောက် Acessibility သည် people with disabilities အတွက်တင်မဟုတ်ဘဲ people without disabilities တွေအတွက်ပါ အကျိုးရှိစေတယ်ဆိုတာ သဘောက်ပေါက်ထားရမယ်။



ဟုတ်ပြီ ဒါဆိုရင် Website တစ်ခုက accessibility ကောင်းမကောင်းဆိုတာကို ဘာနဲ့တိုင်းတာမလဲပေါ့။

W3C ဆိုတဲ့ Web Wide Web Consortium ကနေ သတ်မှတ်ထားတဲ့ Web Accessibility Guidelines (WCAG) ဆိုတာရှိတယ်။ အဲ့ဒီ WCAG Standard တွေနဲ့ တိုင်းတာပြီးတော့မှ Accessibility ကောင်းမကောင်းပြောလို့ရတယ်။

WCAG ကလည်း သမိုင်းအဆက်ဆက် တဖြည်းဖြည်းနဲ့ လူအားလုံး accessible ဖြစ်နိုင်ဖို့ကို ပြောင်းလဲလာခဲ့ရင်းနဲ့ version တွေတစ်ခုပြီးတစ်ခုလုပ်လာတယ်။

* 1997 - 1999: WCAG 1.0
* 2001 - 2008: WCAG 2.0
* 2017 - 2018: WCAG 2.1
* 2020 - 2022: WCAG 2.2

လက်ရှိကတော့ WCAG 2 version ကိုပဲသုံးတယ်။

WCAG 3.0 အထိတော့ရောက်နေပြီ preview အဆင့်မှာပဲ ရှိသေးတယ်။ 2028 လောက်ဆိုရင်တော့ ပြီးမယ်ပြောတယ်။

WCAG 3.0

* 2016: Research begins
* 2021: WCAG 3.0 First Draft

WCAG Standard တွေရှိနေပေမယ့် လူအားလုံးကို 100% ပါဝင်နိုင်တဲ့အထိတော့ မရှိသေးဘူး၊ တတ်နိုင်ဆုံးအကောင်းဆုံး လုပ်လာခဲ့ကြရတာမျိုးပေါ့။ သေချာတာကတော့ WCAG version အသစ်တစ်ခုတိုင်းကတော့ လူတိုင်းပိုပိုပြီး ပါဝင်လာနိုင်တယ်လို့ပဲပြောရမှာပေါ့။&#x20;

WCAG 2.x အထိက အခြေခံ Principle တွေနဲ့သတ်မှတ်ထားပြီးတော့မှ Guideline တွေ၊ Success Criteria ဆိုတဲ့ အသေးစိတ်လိုက်နာရတဲ့အချက်တွေအဖြစ် ပြန်ပြီးတော့ သတ်မှတ်ထားတယ်။

WCAG 2.1 မှာ အခြေခံ Principle လေးမျိုးရှိတယ်



## POUR Web Accessibility Principles

1. Perceivable
2. Operable
3. Understandable
4. Robust

အဲ့ဒီလေးမျိုးကိုအခြေခံပြီးတော့မှ Guideline 13 မျိုးပြန်ခွဲတယ်။&#x20;

အဲ့ဒီကနေမှ Success Criteria 78 မျိုးပြန်ခွဲတယ်။

| 4 Principles                               | 13 Guidelines                                                                                                                    | 78 Success Criteria |
| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| <ol><li>Perceivable</li></ol>              | <p>1.1 Text Alternatives<br>1.2 Time-based media<br>1.3 Adaptable<br>1.4 Distinguishable</p>                                     |                     |
| <ol start="2"><li>Operable</li></ol>       | <p>2.1 Keyboard accessible<br>2.2 Enough Time<br>2.3 Seizures and Physical Reaction<br>2.4 Navigable<br>2.5 Input Modalities</p> |                     |
| <ol start="3"><li>Understandable</li></ol> | <p>3.1 Readable<br>3.2 Predictable<br>3.3 Input assistance</p>                                                                   |                     |
| <ol start="4"><li>Robust</li></ol>         | 4.1 Compatible                                                                                                                   |                     |
|                                            |                                                                                                                                  |                     |

Success Criteria တစ်ခုချင်းစီမှာမှ \
Level of conformance ဆိုပြီး

* A (minimum) \[30 Success Criteria]
* AA \[20 Success Criteria]
* AAA \[28 Success Criteria]

အဆင့်တွေသတ်မှတ်ထားတယ်၊ အဲ့ဒီမှာ အနည်းဆုံး Level A လောက်ထိတောင် အဆင်ပြေအောင် လုပ်မထားဘူးဆိုရင် ကိုယ့် website ကို မသုံးနိုင်တဲ့သူတွေ သေချာပေါက်အများကြီးရှိသွားမယ်။\
\
Guideline တစ်ခုချင်းစီကိုအသေးစိတ်ပြန်ရှင်းပြပါမယ်။\


## Perceivable&#x20;

ကိုယ့်ရဲ့ content ကို Assistive technology သုံးပြီးဖြစ်ဖြစ်မသုံးဘဲနဲ့ဖြစ်ဖြစ် ရှာဖွေလက်ခံနိုင်စွမ်းရှိရမယ်။\


### Perceivable 1.1

Text Alternative

Text နဲ့မဟုတ်တဲ့ content တွေအတွက် text alternative လည်းပါရမယ်ပေါ့။

ဥပမာ img tag မှာ alt attribute သုံးပြီး ဒီပုံက ဘာကိုဖော်ပြသလဲဆိုတာကို ထည့်ပေးတာမျိုးပေါ့။



### Perceivable 1.2

Time-based media

Time-based media တွေအတွက် တခြား option တွေလည်းထည့်ပေးရမယ်။

ဥပမာ video တွေမှာ caption နဲ့ပြပေးတာမျိုးအပြင် transcript ပါပြပေးထားတာမျိုး။

ဒါမျိုးက အကြားအာရုံချို့တဲ့သူတွေအတွက်တင်မဟုတ်ဘဲနဲ့ တခြားဘာသာစကားတစ်ခုကို နားလည်ဖို့ စာတန်းထိုးကြည့်ဖို့လိုတာမျိုးပေါ့။

### Perceivable 1.3

Adaptable

Content ရဲ့ အဓိကအကြောင်းအရာကိုမပျောက်စေဘဲနဲ့ သုံးတဲ့ device တွေနဲ့ ကိုက်ညီအောင် ပြပေးတာမျိုး။

ဥပမာ Responsive ဖြစ်အောင်လုပ်ထားတယ်ဆိုပေမယ့် mobile device နဲ့ဖြစ်ဖြစ် desktop နဲ့ဖြစ်ဖြစ် အကြောင်းအရာကတော့ လုံးဝအတူတူဖြစ်ရမယ်ဆိုတာမျိုး။



### Perceivable 1.4

Distinguishable

Content ကို background နဲ့ခွဲခြားသိမြင်နိုင်စွမ်းရှိရမယ်။&#x20;

ဥပမာ color blind သမားက contrast ratio ပြောင်းသုံးလည်း သူအတွက် အဆင်ပြေနေရမယ်။\
ခွဲခြားသိမြင်နိုင်ရမယ်ဆိုတာက မျက်လုံးနဲ့မြင်ရတဲ့ ဟာကိုတင်ပြောတာမဟုတ်ဘဲ

အသံတွေမှာလည်း သူ့ background နဲ့ခွဲခြားပြီးသိနိုင်ရတာမျိုးလည်းပါတယ်။

background audio သည် စကားပြောသံထက် 20 decibals ပိုပြီး ငြိမ်သက်နေရမယ်ဆိုတာမျိုးရှိတယ်။

ဒီ color contrast လိုဟာမျိုးဆိုရင်လည်း color blind ဖြစ်မှတင်မဟုတ်ဘူး နေပူကျဲကျဲကြီးမှာ သုံးရတဲ့အခါမျိုး ကြုံဖူးကြမှာပါ၊ ဆိုလိုတာက သာမာန်လူတွေဟာလည်း accessibility ကနေ အကျိုးရလဒ်ရနိုင်တယ်ဆိုတာ သဘောပေါက်ရမယ်။

## Operable

ဘယ်သူမဆို ကိုယ့် website ကိုသုံးနိုင်ရမယ်။ သူ့ဘာသူ ဘယ် input device နဲ့သုံးသုံးအဆင်ပြေရမယ်ပေါ့။

### Operable 2.1

Keyboard Accessible

website တစ်ခုလုံးကို keyboard နဲ့ပဲသုံးမယ်ဆိုရင်လည်း ရရမယ်။ တချို့ motor impairment ရှိသူတွေက mouse နဲ့သုံးဆိုရင် သုံးနိုင်မှာမဟုတ်ဘူး။ သူတို့ဆိုရင် keyboard နဲ့ပဲသုံးရင်လည်း သုံးမယ်ပေါ့။



### Operable 2.2

Enough time

ကိုယ့် website ကိုသုံးဖို့အတွက် လုံလောက်တဲ့အချိန်လည်းပေးရမယ်။

ဥပမာ capture တွေဖြေဖို့ အချိန်အလုံအလောက်ပေးရမယ်။

Banking software တွေဆိုရင် session ပြည့်ရင်တောင် မပြောမဆို ထွက်သွားတာမျိုးမဟုတ်ဘဲ&#x20;

session ပြည့်ကြောင်းလေး alert ပြပြီး extend လုပ်မလားဆိုတာမျိုးပြောရမယ်။



### Operable 2.3

Seizures and Physical Reactions

website ကိုသုံးတဲ့သူအတွက် seizure မဖြစ်အောင်လည်း အမြဲတမ်းကာကွယ်ပြီးလုပ်ပေးရမယ်။

ဥပမာ 1997 မှာတုန်း Japan မှာ live လွှင့်တဲ့ Pokemon Episode တစ်ခုကိုကြည့်ပြီးတော့ ကလေးအယောက် ၆၀၀ကျော် ၇၀၀နီးနီး ဆေးရုံရောက်ကုန်တယ်။ ဘာကြောင့်လဲဆိုတော့ အဲဒီ Episode မှာ အနီရောင် အပြာရောင် အလင်းတန်းတွေဟာ 1စက္ကန့်အတွင်းကို ၁၂ခါလောက် flash ဖြစ်တယ်၊ အဲ့ဒီနှုန်းက လူတစ်ယောက်ကို seizure ဖြစ်စေနိုင်ပါတယ်။ အဲ့ဒီဖြစ်ရပ်ကြောင့် တခြားနိုင်ငံတွေမှာမပြဖို့အတွက် ban ခံရပါတယ်။ အဲ့ဒီအဖြစ်ပျက်ကို Pokémon Shock လို့လည်း ခေါ်ပါတယ်။\
animation or video တွေဟာ maximum 3 times per second ပဲ flash လုပ်ရမယ်ဆိုတာရှိတယ်။



### Operable 2.4

Navigable

website ကိုအသုံးပြုသူအနေနဲ့ သူဟာ website ရဲ့ ဘယ်နေရာမှာ focus လုပ်နေသလဲဆိုတာကို လွယ်လွယ်ကူကူသိနိုင်အောင်လုပ်ပေးထားရပါမယ်။ ဥပမာ focus indicator ကို အနည်းဆုံး 2px အထူထားပေးရတယ်ဆိုတာမျိုးရှိပါတယ်။



### Operable 2.5

Input Modalities

website တစ်ခုလုံးဟာ keyboard အပြင်အခြားသော input device တွေနဲ့အသုံးပြုမယ်ဆိုရင်လည်း အဆင်ပြေရပါမယ်။ &#x20;

ဥပမာ touch နဲ့သုံးတဲ့သူတွေအတွက် touch target ဟာ minimum 24px ရှိရမယ်၊ border radius ထည့်ရင်တောင် 24px ရဲ့အပြင်မှာပဲ border-radius ကရှိရမှာဖြစ်တယ်ဆိုလိုတာက border-radius ထည့်ချင်ရင် size က 24px ထက်ပိုကြီးရမယ် ဒါမှ touch area က 24px လုံးဝမလျော့ပဲရှိနေမယ်။



## Uderstandable

ကိုယ့်ရဲ့ website content တွေဟာ နားလည်လွယ်ရမယ်။

### Understandable 3.1

Readable

ဖတ်လို့လွယ်ရမယ်။ ရိုးရှင်းတဲ့အသုံးနှုန်းတွေ ရင်းနီးပြီးသားအသုံးအနှုန်းတွေပဲ သုံးပေးရမယ်။

Technical terms တွေထည့်ချင်ရင်တောင် abbr လိုကောင်မျိုးနဲ့ define လုပ်ပေးရမယ်။ နောက် lang attribute ကိုလည်း လိုအပ်သလိုသုံးပေးရမယ်။



### Understandable 3.2

Predictable

website မှာပြထားတဲ့ layout တွေ က consistent ဖြစ်ရမယ်၊ ဒါမှ သုံးတဲ့သူအနေနဲ့ predict လုပ်နိုင်မယ်။ နောက် component တွေဟာလည်း Expected behavior အတိုင်းပဲဖြစ်ရမယ်။&#x20;

ဥပမာ Cummulative Layout Shift ဆိုတဲ့ CLS လို ဟာမျိုးမဖြစ်အောင် ဂရုစိုက်ရမယ်။



### Understandable 3.3

Input Assistance

အသုံးပြုသူအနေနဲ့ input မှားသွားရင်တောင် ဘယ်လိုပြင်ဖို့လိုတာလဲဆိုတာမျိုး သိအောင် နားလည်လွယ်အောင် ပြုပြင်လွယ်အောင် လုပ်ပေးထားရမယ်။

ဥပမာ Valid indicator, Error indicator တွေ Error message တွေကို စနစ်တကျပြပေးရမယ်။



## Robust

website သည် technology အမျိုးမျိုးနဲ့ အဆင်ပြေအောင် လုပ်ထားရမယ်။

### Robust 4.1

Compatible

website သည် လက်ရှိ assistive technology တွေအပြင် အနာဂတ်မှာရှိလာနိုင်တာတွေအတွက်လည်း အဆင်ပြေအောင်လုပ်ထားရမယ်။

ဒီနေရာမှာ အနာဂတ်မှာဘာတွေရှိလာမလဲဆိုတာ မသိနိုင်ပေမယ့် အဆင်ပြေအောင်လုပ်ထားလို့တော့ ရပါတယ်လို့ပြောချင်ပါတယ်။&#x20;

ဥပမာ Semantic HTML နဲ့ရေးထားတဲ့အခါ Assistive technologies အပြင် SEO ကိုပါကောင်းစေတယ်။ အခုနောက်ပိုင်း AI တွေခေတ်စားလာတဲ့အခါမှာလည်း Semantic HTML နဲ့ရေးထားရင် Generative AI တွေအတွက်ပိုအဆင်ပြေတာမျိုးပါ။\
Semantic HTML == Descriptive HTML\
\
website တစ်ခုတည်ဆောက်တဲ့နေရာမှာ Accessibility testing ကိုလည်း ထည့်သွင်းဆောင်ရွက်ရပါမယ်။\
ဒါတွေသိထားရုံနဲ့လုံလောက်ပြီလားဆိုတော့ မလုံလောက်သေးပါဘူး။\
Accessibility testing လုပ်ရင်းနဲ့မှ Accessible component တွေကို တည်ဆောက်တဲ့ Technique တွေကိုရှာဖွေရင်း နဲ့ Accessible website တစ်ခုဖြစ်လာဖို့ အများကြီးကြိုးစားရပါမယ်။\
\
လက်တွေ့ရေးရတဲ့ HTML, CSS တွေကို မှန်မှန်အသုံးချတတ်ဖို့ကလည်း အရေးကြီးပါတယ်။ အထက်မှာပြောပြခဲ့တဲ့ အကြောင်းအရာတွေနဲ့ ပေါင်းစပ်သိထားတော့မှသာ လက်တွေ့ တည်ဆောက်တဲ့အခါမှာ နားလည်နိုင်စွမ်းတွေ problem solving တွေပိုကောင်းလာမှာဖြစ်ပါတယ်။&#x20;

အသစ်အသစ်သော WCAG Guideline တွေကို အမြဲလေ့လာသင်ယူကြရင်းနဲ့ လူတိုင်းအားလုံးအသုံးပြုနိုင်တဲ့ website တွေတည်ဆောက်ကြပါစို့။
