Accessibility for Designer
လွန်ခဲ့တဲ့အပတ်က ရုံးက Designer တွေနဲ့ တော်ကီပွားရင်း Accessibility နဲ့ပတ်သတ်တာတွေ သူတို့ကို ရှင်းပြဖြစ်တယ်။ ကိုယ်တိုင်ကလည်း အရင်ကတည်းက ဒီ topic ကိုစိတ်ဝင်စားလို့ လေ့လာနေတာဆိုတော့ အခွင့်အရေးရရင် ရသလို sharing လုပ်ဖြစ်တယ်။ အဓိကက Accessibility နဲ့ပတ်သတ်ပြီး awareness ကို community ထဲမှာ မြှင့်ချင်တာလည်းပါတာပေါ့။ အရှေ့မှာတော့ Ma ရဲ့ Design Systems Workshops မှာ Frontend x Designer အတွက် ဝင်ကူတုန်းကလည်း Designer တွေအနေနဲ့ သိသင့်တဲ့ Accessibility ထဲကအရာတွေ sharing လုပ်ပေးဖြစ်ခဲ့တယ်။အခုကတော့ အဲ့ဒီတုန်းကဟာလေးတွေကို blog ပြန်ရေးလိုက်တဲ့သဘောပါပဲ။
Accessiblity လို့ပြောရင် topic ကအကျယ်ကြီးလို့ပြောရမယ်။ အဲ့ထဲမှာမှ Web Engineer တွေ Frontend သမားတွေအနေနဲ့ လုပ်ရမယ့်အပိုင်းတွေက တော်တော်ကိုများတယ်။ Designer ဆီက Design တင်မက တခြားသော accessibility နဲ့ပတ်သတ်တဲ့ techniques တွေကို apply လုပ်ပေးရတယ်။ ဒါမှ disabled person တွေအတွက် User Experience ကောင်းစေမှာပါ။ Desiger တွေအတွက်ကတော့ Design နဲ့ပတ်သတ်တဲ့ Accessibility techniques တွေကို လေ့လာထားရင်ကို လုံလောက်ပါပြီ။
Accessibility ဆိုတာဘာလဲလို့ပြောရင်တော့ ရုပ်ပိုင်း/စိတ်ပိုင်းဆိုင်ရာ ချို့ယွင်းနေတဲ့လူတွေ (Disabled People) တွေအနေနဲ့ သာမန်လူတွေကဲ့သို့ နားလည်အသုံးပြုလုပ်ဆောင်နိုင်တာလို့ပြောရမယ်။ ဒီနေရာမှာ technology ပိုင်းမဟုတ်ပဲ အပြင် society မှာဆိုရင် လမ်းမလျှောက်နိုင်တဲ့သူက wheel chair သုံးပြီး သာမန်လူတွေလို သွားလာနိုင်တာမျိုးပေ့ါ။ ထိုင်းက ရထားဘူတာတွေမှာဆို wheel chair person တွေအတွက် ရထားဝန်ထမ်းကနေ ဓာတ်လှေကားနဲ့ လာခေါ်တာ ပြီးရင် wheel chair အတွက် နေရာသီးသန့်ထားပေးထားတာမျိုးထိ Accessbility နဲ့ပတ်သတ်ပြီး လုပ်ဆောင်ပေးထားတယ်။ ထိုနည်းတူ နည်းပညာပိုင်းမှာဆိုရင်လည်း ကိုယ့်ရဲ့ software ကို သူတို့တွေအတွက် သာမန်လူတွေကဲ့သို့ သုံးစွဲနိုင်အောင် လုပ်ပေးဖို့လိုပါတယ်။ ဒါ့အတွက် WCAG ကနေ Perceivable, Operable, Understandable, Robust ဆိုတဲ့ POUR Principles ထုတ်ပြီး standard guidlines တွေချပေးထားပါတယ်။
Accessibility နဲ့ပတ်သတ်ပြီးပြောရင် Conformance နဲ့ Compliance အကြောင်းကထည့်ပြောရတယ်။ သူ့မှာ Conformance အတွက် level သုံးခုရှိတယ်။
- A (lowest, minimum level)
- AA (recommended, minimum legal requirement)
- AAA (highest)
ဒီ level 3 ခုကို Engineer တွေက ဆိုင်ရာ Compliance ပေါ်မူတည်ပြီး လုပ်ဆောင်ပေးရတယ်။လက်ရှိလုပ်ဖူးသမျှ အတွေ့အကြုံအထိတော့ ASIA ဘက်မှာ Accessibility နဲ့ပတ်သတ်ပြီး Government ဘက်ကနေ enforce လုပ်ထားတာတော့မတွေ့ဖူးသေးဘူး (ကိုယ်တိုင်လည်းမကြုံသေးတာဖြစ်နိုင်ပါတယ်)။ ဒါပေမယ့် အနောက်နိုင်ငံတွေဖြစ်တဲ့ UK, US စတဲ့နိုင်ငံတွေမှာတော့ Government ကနေကို Disability Act (ADA) လိုမျိုး Law တွေထုတ်ပြီး Enforce လုပ်ထားတယ်။ သူတို့နိုင်ငံတွေမှာ software တစ်ခုရေးမယ်ဆို Accessibility အတွက် Conformance level AA ကို minimun requirement အနေနဲ့သတ်မှတ်ထားတယ်။တကယ်လို့ ကိုယ့် App က minimun requirement ကိုမမှီဘူးဆိုရင် တရားစွဲခံရနိုင်တယ်။ ဒီတော့ Designer တွေအနေ့နဲ့ ကိုယ့် ဆွဲပေးရမယ့် client က Accessbility နဲ့ပတ်သတ်ပြီးပြောလာရင် ဘာတွေလိုက်နာရမလဲ သိအောင် လေ့လာထားသင့်ပါတယ်။ Standards အနေနဲ့ WCAG ဘက်ကထုတ်တာတဲ့ Guidelines တွေလိုက်နာပေးရင်ရပါတယ်။ အကြမ်းအားဖြင့်ဆိုရင်
1. Color Contrast
Designer တွေအနေနဲ့ Design စပြီးဆွဲရတော့မယ်ဆို color palette ကို အရင်စဥ်းစားကြတယ်။အဲ့အချိန်မှာ ကိုယ်ရဲ့ palette က color တွေက contrst မှန်ဖို့လိုတယ်။ Color theory ပိုင်းကတော့ Designer တွေက ပိုသိမှာပါ။ ဥပမာ background/foreground color, button တွေ input တွေရဲ့ different state colors စတဲ့ color တွေ၊ နောက်တစ်ခုက light/dark theme switch လို့ရတာမျိုးဆိုရင်လည်း နှစ်ခုလုံးအတွက် color system ကို သေချာလည်းရွေးထားရမယ်။ AA requirement အရကတော့ဒီလိုရှိမယ်။ font size 24px နဲ့ အောက်ဆို contrast ratio က at least 4.5:1, 24 px ရဲ့ အထက်ဆို contrast ratio က at least 3:1 ဖြစ်မယ်။ Non-text content တွေအတွက်ဆိုလည်း 3:1 ဖြစ်မယ်။ ကိုယ်တိုင်က Engineer မလို့ အသေးစိတ်ကိုတော့ research လုပ်ကြည့်ဖို့ တိုက်တွန်းပါတယ်။
2. Layout
နောက်တစ်ခုက screen layout design နဲ့ information architecture ပါ။သူက သာမန်လူတွေအတွက်တင်မက screen reader, keyboard navigation or swtich device သုံးတဲ့ user တွေအတွက်အရမ်းအရေးကြီးတယ်။လိုအပ်တဲ့ information ကိုအလွယ်တကူ ရနိုင်လား၊ action တစ်ခု လုပ်နိုင်ဖို့ menu/button/breadcrumbs စတာတွေဆီ focus ရောက်အောင် tab navigation နဲ့ ဘယ်နှချက်နှိပ်ရလဲ၊ content hierarchy ကရော headings, lists တွေက scannable ဖြစ်နိုင်လား စသည်ဖြင့် layout ချတာကိုလည်း သူတို့အတွက်ပါ စဥ်းစားပေးနိုင်ရင် ပိုကောင်းတယ်။နောက်ဆုံး responsive layout ကို support လုပ်တာထိပါတယ်။ မဟုတ်ရင် mobile/desktop only user တွေအတွက်ကတော်တော်အခက်အခဲရှိနိုင်တယ်။
- Animation
Website မှာပါတဲ့ Motion တွေ animation တွေကလည်း accessibility မှာစဥ်းစားစရာ topic တစ်ခုပါပဲ။သာမန်user တွေအတွက်တောင် animation ကိုသေချာမလုပ်ထားတာနဲ့ လုပ်တာပေါ်မူတည်ပြီး user experience ကောင်းမကောင်း အလွယ်တကူသိနိုင်တယ်။ element level animation (focus/hover state), component level animation (popup/menu transition) တွေအပြင် page level animation တွေဖြစ်တဲ့ Parallax နဲ့ scroll-based effects တွေအထိ smooth ဖြစ်အောင်လုပ်ထားသင့်တယ်။ ဒါပေမယ့် screen reader သမားတွေအတွက်ကြ တစ်ခုခုလုပ်ရင် instant feedback ရဖို့အဓိကဖြစ်တဲ့အတွက် prefers-reduced-motion ဆိုတာကို device settings မှာ on ထားကြတယ်။ ဆိုတော့ website ထဲက animation တွေက အသုံးမဝင်တော့တဲ့အတွက် animation မပါပဲ navigation လုပ်နိုင်အောင် page loading ဖြစ်နေတယ်ဆိုလည်း screen readers တွေသိအောင် စတာတွေအတွက် alternative solution တွေစဥ်းစားပေးနိုင်လေ ပိုကောင်းလေလို့ပြောလို့ရပါတယ်။
Tools တွေအနေနဲ့ဆိုရင် Axe DevTools, Lighthouse, WebAIM Contrast Checker တွေအပြင် Figma plugin တွေလည်းရှိပါတယ်။ တခြား Design နဲ့မဆိုင်တဲ့ topic တွေနဲ့ ပိုပြီးအသေးစိတ်တဲ့ WCAG, WebAIM အပိုင်းတွေတော့ချန်ထားခဲ့ပါတယ်။ အရမ်းရှည်သွားမှာဆိုးလို့ပါ။
အခုချိန်ထိတော့ Accessibility နဲ့ပတ်သတ်ရင် legal requirement အရ မဖြစ်မနေလုပ်ဖို့လိုမှသာလျှင် business ဘက်က attention ပေးတာမျိုးပဲ တွေ့နေရပါသေးတယ်။ FAANG လို company ကြီးတွေမှာတော့ accessibility specialist တွေခန့်ထားပြီး dedicated team တစ်ခုအနေနဲ့ရှိတာတွေ့ရပါတယ်။ ဒါပေမယ့် ကိုယ့်အနေနဲ့ compliance ကြောင့်သာမက disabled people တွေအတွက် empathy ထားပြီး စဥ်းစားပေးမယ်ဆိုရင် ကိုယ်လုပ်လိုက်တဲ့ သေးငယ်တဲ့အရာလေးတစ်ခုက သူတို့အတွက် အထောက်အကူအများကြီးဖြစ်သွားစေမှာပါ။ ဒီစာလေးဖတ်ပြီးသွားလို့ နောက်ပိုင်း Design တွေဆွဲတဲ့အခါ Accessbility နဲ့ပတ်သတ်ပြီးထည့်စဥ်းစားမိလာတယ်ဆိုရင် awareness ရှိလာတယ်လို့ ပြောရမှာပါ။ ဒီလောက်ဆို Accessibilty နဲ့ပတ်သတ်တဲ့ မီးပွားလေးထွန်းညှိပေးနိုင်မယ်လို့ မျှော်လင့်မိပါတယ်။
