เมื่อวันพฤหัสบดีที่ผ่านมาผมได้มีโอกาสเข้าร่วมการรับฟังความคิดเห็นที่มีต่อ ร่าง คู่มือ แนวปฏิบัติเกี่ยวกับการออกแบบและพัฒนาแอปพลิเคชั่นบนสมาร์ตโฟนสำหรับกลุ่มเปราะบาง ตามแนวทาง WCAG 2.0 โดยผมมาในฐานะภาครัฐที่ได้หนังสือเชิญจากทาง NECTEC ผู้จัดงานในครั้งนี้

โดยหลักๆแล้ว Workshop นี้จะเน้นใน ภาคการปฏิบัติมากกว่าการนั่งฟังบรรยายครับ และกิจกรรมจัดขึ้นครึ่งวันเช้า โดยแบ่งออกเป็นสอง sessions ได้แก่

• Group Session Policy Review and Discussion by Critical Thinking Method
• Group Session Development Guideline Review & Discussion by creating a wireframe for Inclusive Mobile Design

โดยก่อนที่ผมจะพาไปรีวิวและสรุปสิ่งที่ได้ในวันนี้ ผมอยากให้ทุกท่านรู้จักกับคำสองคำได้แก่ กลุ่มเปราะบาง และ WCAG 2.0 เป็นแนวทางการพัฒนาและออกแบบเว็บไซต์ที่ทุกคนเข้าถึงได้

Table of Content

• What is Vulnerable Group
• อะไรคือ WCAG 2.0
• รีวิว Workshop ทั้ง 2 Sessions
• สรุปสิ่งได้เรียนรู้จาก Workshop ในวันนี้

What is Vulnerable Group

กลุ่มเปราะบาง (Vulnerable Group) คือกลุ่มคนที่รัฐบาล เล็งเห็นว่าเป็นผู้ที่มีความจำเป็นที่จะต้องพึ่งพาผู้อื่น ไม่สามารถออกความคิดเห็นอย่างอิสระได้ หรือ ผู้ที่พักรักษาตัวในโรงพยาบาล เด็กทารก ผู้ที่มีความพิการทางร่างกาย ร่วมไปถึง คนแก่ และผู้ด้อยโอกาส โดยเป็นกลุ่มคนที่ถือบัตรสวัสดิการแห่งรัฐ หรือ บัตรคนจนทั่วทั้งประเทศไทย ราว 14.98 ล้านคน

ภายใน Workshop วันนี้จะเน้นไปที่กลุ่มเปราะบางประเภท ผู้สูงอายุ และ ผู้พิการทางร่างกายต่างๆ อาทิเช่น ตา หู แขน และ ขา เป็นต้น

โดย ดร. ปวรัตน์ นนทศิลป์ ได้กล่าวว่าตอนที่ทางเราออกผลิตภัณฑ์อย่างแอพทางรัฐนั้น ท่านพบว่า ประชาชนในกลุ่มนี้ไม่ได้เข้าใช้สิทธิ์ในการรับเงินดิจิทัล 10,000 เป็นจำนวนมาก จึงทำให้ท่านเข้าไปถามหาฟีดแบค

ท่านได้รับฟีดแบคดังกล่าวนั้นมาจาก ผู้พิการทางการได้ยินท่านหนึ่ง โดยเขา กล่าวว่า เขาไม่สามารถอ่านได้ อันเนื่องมาจากการพิการทางการได้ยิน

ทำให้ท่านรู้สึกตระหนักและคิดว่าควรจะต้องมีการทำอะไรซักอย่างนำมาสู่ กิจกรรม Workshop ในวันนี้นั้นเองครับ

อะไรคือ TWCAG 2.0

TWCAG ย่อมจาก Thailand Web Content Accessibility Guideline โดยเป็น แนวทางการพัฒนาเว็บไซต์ที่ทุกคนเข้าถึง เข้าใจเนื้อหาต่างๆได้ โดยอ้างอิงมาจาก มาตรฐานสากลอย่าง WCAG 2.1 ที่ว่าด้วยข้อแนะนำการพัฒนาและเงื่อนไขที่สามารถระบุได้ว่าหน้าเว็บไซต์น้นได้ทำตามคำแนะนำหรือไม่ ซึ่งถูกพัฒนาด้วย W3C หรือ The World Wide Web Consortium

โดย TWCAG ประกอบไปด้วย 4 หลักการ

• Perceivable – การใช้งานสำหรับทุกคน
  • หลักการนี้จะว่าด้วยการที่สว่นประกอบต่างๆ ของหน้า ถูกนำเสนอด้วยวิธีที่ผู้ใช้งานสามารถรับรู้ได้อย่างตรงไปตรงมา ไม่ว่าจะเป็นการมองเห็น หรือ การได้ยิน เช่น การใช้ สีพื้นหลังและตัวอักษรให้ ชัดเจนเพียงพอเพื่อความ contrast หรือ การทีที่มีคำบรรยาย caption สำหรับภาพเคลื่อนไหว
• Operable – การใช้งานง่าย
  • ส่วนประกอบต่างๆของหน้าจอ จะต้องเสนอในแบบที่ใช้งานได้ง่าย เช่น ฟังก์ชั่นของผลิตภัณธ์ง่าย และทำให้ผู้ใช้ ใช้งานได้อย่างมีประสิทธิภาพ
• Understandable – ความเข้าใจง่าย
  • ส่วนติดต่อกับผู้ใช้งานบนหน้าจอต้องเข้าใจง่าย เช่น ข้อควมและบริการต้องอ่านและเข้าใจง่าย ไม่สร้างความสับสน หลีกเลี่ยงการเกิดข้อผิดพลาดคือเข้าใจผิด
• Robust – ความแข็งแรงและความยืดหยุ่น
  • เนื้อหาภายในต่างๆต้องเข้าใจง่ายและเชื่อถือได้ ทันสมัย และ ททันเทคโนโลยี เช่น การเขียน หน้า เว็บไซต์ด้วย HTML CSS เป้นต้น

ภายใน WCAG ก็จะมี เกณฑ์ความสำเร็จ แบ่งออกเป็น 3 ระดับได้ แก่

• A หรือขั้นต่ำสุด เป็น a-must ที่ต้องทำไม่อย่างนั้น การเข้าถึงจะทำได้โดยยาก หรือ ไม่ได้เลย
• AA ขั้นกลาง เพื่อช่วยให้ผู้ใช้งาน ใช้ได้อย่างสะดวกขึ้น
• AAA ขั้นสูงสุด เพื่อให้ผู้ใช้งานเข้าาถึงและใช้งานเนื้อหาเว็บได้สูงสุด

ท่าน ดร. ปวรัตน์ นนทศิลป์ มองว่าในเบื้องต้น แอพลิเคชั่นในไทย ท่านไม่ได้คาดหวังที่จะให้ถึงระดับ AAA ขอเพียงแค่ A เพื่อให้เข้าถึง กลุ่ม users ได้หลากหลายขึ้นก็ดีมากแล้ว

รีวิว Session

Group Session Policy Review and Discussion by Critical Thinking Method

ใน session แรก ทางทีมงานได้จัดกลุ่ม เราออกเป็น 5 กลุ่มย่อย กลุ่มละ 5-6 คน โดยจะมี roadmap พร้อม flash card จำนวนนึง โดยโจทย์ก็คือ ให้เราวางแผนกันเป็นทีม และ คิดว่า ในระยะเวลาของแม่บท 5 ปี เราจะทำอะไรบ้างแบ่งตามระดับดังนี้

• User level – สีแดง
• Development Solution Level – สีฟ้า
• Policy Level – สีเขียว

ในการ์ดแต่ละใบจะมี คำอธิบายด้านหลัง ประกอบอยู่ เช่น คำว่า Open-Source Libraries การ์ดสีฟ้าที่ว่าด้วยการพัฒนา open-source library เพื่อให้ผู้คนได้นำไปใช้เพื่อเพิ่มประสิทธิภาพในด้านการเข้าถึงให้กับแอพลิเคชั่นด้ง่ายขึ้น จากการช่วยกันคิด ทีมผม ก็ปะติดปะต่อและได้ผลลัพธ์ออกมาแบบนี้

โดยในช่วงปี แรก จนถึงก่อนปี ที่ 3 เป็นช่วงที่กลุ่มผมมองว่าหนักสุดเพราะต้องมีการวางนโยบาย และ แนะแนวแก่ user ว่าทำไมควรจะต้องดูแลเรื่องการเข้าถึง ทั้งยังสร้าง แคมเปนเพิ่มการตระหนักรู้ รวมทั้งการสร้าง โปรเจคสำหรับการทดสอบอีกด้วย

หลังจากนั้นใน ปี ที่ 3 ทางทีมเราจะเน้นไปที่การสร้าง และช่วยเหลือ developers ที่ต้องการนำ เรื่อง Accessibility รวมทั้งสร้าง นโยบายที่ว่าด้วยการที่ต้องนำ Accessibility เข้าไปในแอพ ไม่อย่างนั้นจะมีโทษ พร้อมทั้งวิธีตรวจสอบ และ รับผลลัพธ์ตอบกับ กลับมา

และในปี 5 ก็จะเป็น เก็บ feedback และทำให้เป็นที่รู้จักใน ระดับ โลก รวมทั้งสร้าง ecosystem เพื่อรองรับ users และ ทาง บริษัทเอกชนอีกด้วย

หลังจากที่ทุกกลุ่มทำเสร็จ เขาจะให้ แต่ละกลุ่มเดินมาดูของอีกกลุ่มว่า แต่ละกลุ่มวางแผนออกมาเป็นเช่นไร รวมทั้งถามถึงเหตุผลว่า ทำไมจึงออกแบบเป็นเช่นนี้

Group Session Development Guideline Review & Discussion by creating a wireframe for Inclusive Mobile Design

session ถัดมา อาจารย์จะให้ แต่ละทีมบออกแบบ **Low-Fidelity Prototyping** สำหรับแอพลิเคชั่นแจ้งเตือนภัยพิบัติโดยให้คำนึงถึงหลักการ WCAG ด้วย พร้อมทั้งให้ wireframe จอโทรศัพท์ โจทย์ ฟีเจอรืที่ต้องการ และ personas ของ user ที่จะเข้าใช้งาน

ทีมของเรามองว่า แอพควรจะเป็นแอพที่ใช้งานง่าย เข้าใจง่าย เนื่องจาก persona ของเราเป็นคนแก่ และคนที่พิการทางการได้ยิน ที่บกพร่องทักษะการอ่านด้วย

เราจึงมองว่า ตัวแอพลิเคชั่นก็ควรที่จะเน้นไปที่รูปภาพ หรือ สัญญะ ที่สื่อความหมายได้ง่าย แบ่งออกเป็น 3 หน้า UI และ อีก หนึ่งหน้า แจ้งเตือน

โดยหน้าแรก จะเป็น การที่ ให้ user เลือกว่าพวกเขาบกพร่องทางร่างกายอย่างไรโดยใช้เป็น รูปภาพ ตา หู ร่างกาย 👂🏼 🦿👁️ กับ รูป ✅❌ เพื่อเปิดใช้งานฟีเจอร์ว่าจะให้มีแจ้งเตือนแบบไหนบนแอปพลิเคชั่น

หน้าที่สองจะเป็น หน้า tutorial เพื่อบอกว่า แต่ละรูป ภัยพิบัติจะแสดงออกมาเป็นอย่างไร โดยในหน้าก็จะมีรูปภัยพิบัติ เช่น ดินถล่ม ไฟไหม้ น้ำท่วม สึนามิ เป็นต้น

และในหน้าสุดท้ายที่เป็น main feature จะแสดงแผนที่ระบุตำแนห่งที่เกิดภัยพิบัติ และระบุด้วยสี ว่ารุนแรงแค่ไหน รวมทั้งมุดสีฟ้าเพื่อบอก escape route ให้กับ ผู้ใช้งาน ด้านล่างแผนที่จะระบุ

ในกรณีที่ผู้ใช้งาน ตาบอดสี หรือ ตาบอดจะใช้เป็น เสียง แจ้งเตือนเพื่อระบุว่าเขาอยู่ในระยะไม่ปลอดภัย ส่วน ผู้ที่บกพร่องทางการได้ยิน ก็จะ สามารถสังเกตได้ที่ความถี่ของแฟลชที่กระพริบ นะตอนนั้น

ในหน้าแจ้งเตือน เราจะให้มี UI ขึ้น มีเสียงเตือนภัยออกมาจาก โทรศัพท์ และ สั่นเพื่อทำให้ ผู้ใช้งานรู้ตัวแม้ว่าขณะนั้นจะไม่ได้ดูมือถืออยู่ก็ตาม

หลังจากที่แต่ละกลุ่มออกแบบเสร็จ อาจารย์ก็จะให้ เวียนกันไปดูของแต่ละกลุ่มว่าเขาออกแบบกันอย่างไร รวมทั้งตั้งคำถามว่าทำไมถึงทำอย่างงั้น

สรุปสิ่งได้เรียนรู้จาก Workshop ในวันนี้

• เพื่อให้ได้ตาม Accessibility การปฏิบัติตามหลักการ ของ WCAG จะช่วยรองรับ ในส่วนของ user experience ให้ดีขึ้น
• หากในกลุ่มไหนที่มีภาครัฐอยู่เยอะก็จะ ทำ session 1 ในช่วง ปี แรกว่าควรจะต้องมีการตั้งนโยบาย สีเขียว ออกมาก่อนแล้วจึงลงมือทำ ในขณะที่เป็นเอกชน จะมีในส่วนของ สีส้ม หรือ ระดับบ user level และ สีฟ้า เพื่อทดสอบว่าระบบหรือโมเดลที่จะใช้นั้นไปพร้อมกับกำหนดนโยบายเพื่อให้ป้องกันความเสียหายหากกำหนดนโยบายแล้วไม่มีใครใช้

References

https://www.dct.or.th/th/project/detail/394

https://kb.hsri.or.th/dspace/bitstream/handle/11228/3717/jaruayporn.pdf?sequence=2&isAllowed=y#:~:text=