Prioritizing Accessibility in Web Development

สวัสดีครับวันนี้ผมก็จะมาเล่า Prioritizing Accessibility in Web Development ที่ไปฟังจากงาน CityJS conference มาครับ ผู้บรรยายที่มาเล่าก็จะเป็นคนนี้ครับ

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

• Web Accessibility คืออะไร
• เราจะเริ่มยังไงให้เว็บมี Accessibility มากขึ้น
• ทดสอบยังไงให้รู้ว่าเว็บเรามี Accessibility รึยัง

Web Accessibility คืออะไร

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

A11Y ย่อมาจาก Accessibility ซึ่ง 11 ย่อมาจากตัวอักษรที่อยู่ระหว่าง A กับ Y ซึ่งใช้เป็น Hashtag ปัจจุบันในการพัฒนาเว็บไซต์ให้มี Accessibility รวมถึง Extention ต่างที่นำ Hashtag นี้ไปใช้ด้วย

รู้แล้วใช่ไหมครับว่า Web Accessibility คืออะไร จากนั้นเราลองมาทำความเข้าใจว่าผู้พิการใช้งานเว็บยังไง

https://www.youtube.com/watch?v=93UgG72os8M

เราจะเริ่มยังไงให้เว็บมี Accessibility มากขึ้น

ผู้บรรยายได้แนะนำเว็บไซต์หนึ่งชื่อว่า WCAG ( Web Content Accessibility Guidelines )

WCAG ( Web Content Accessibility Guidelines )

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

• 4 Principle ( Perceivable , Operable , Understandable , Robustness )
• 3 Level : A , AA , AAA
• Extention ต่างๆ สำหรับช่วยเพิ่ม Accessibility

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

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

Understandable การเข้าใจได้ คือ การออกแบบ Design เว็บของเราให้ควรเข้าถึงเนื้อหาได้ง่ายและเข้าใจว่าเว็บนี้ใช้งานยังไงอาจจะเป็นการเพิ่มรายละเอียดหรือคำอธิบาย ๆ ต่าง ๆ ในการใช้งานเบื้องต้นก็ได้ครับ

Robustness การพัฒนาเว็บไซต์ปัจจุบันมีการ Update framework ต่าง ๆ มากมาย แต่ก็ไม่ควรลืมที่จะทำ Accessibility ให้เว็บของเราอย่างเด็ดขาดเพื่อให้ทุกคนสามารถที่จะเข้าถึงได้

• ** อันนี้ก็เป็นปัจจัยหลักที่จะทำให้เว็บของเราได้ดีขึ้น ***

Level A

• Non-context content จะสังเกตุได้ว่าใน Element Tag html ต่าง ๆ จะมีการประกาศตัวแปรพวก Attribute จริง ๆ ควรจะระบุทุกครั้ง ยกตัวอย่างผู้พิการทางสายตาที่ใช้งานการอ่านผ่าน Screen Reader หรือที่เรียกการว่า Accessibility Voice ที่ใช้สำหรับผู้พิการทางสายตา จะทำการอ่าน element ในเว็บของเรารวมถึง Attribute ที่ช่วยเพิ่มคำอธิบายหรือหัวข้อที่เราจะกรอกลงไปด้วย

Example :

<img alt="person smail" scr="smail.png">
<label for="first name"></label>
<input type="text" id="first name">

• Keyboard เราควรทำให้เว็บรองรับการใช้งานผ่าน keyboard ไม่ว่าจะเป็น function หรือการกดปุ่มต่าง ๆ ในหน้าเว็บของเรา ช่วยในการเข้าถึงสำหรับผู้พิการยิ่งขึ้น

Level AA

• Contrast (Minimum) การเลือกสีที่ตัดการระหว่าง text-color และ background color ก็มีผลต่อการทำให้คนที่เข้ามาดูเข้าใจเว็บเราได้ง่ายขึ้นยิ่ง สีที่ตัดการแล้วมองออกชัด ก็มีผลต่อการวัดผล Accessibility เช่นกัน

Level AAA

• Contrast (Enhanced) ใน Level ถัดมาก็จะพูดถึงเชรดสีเหมือนเดิมแต่อาจจะเป็นการเลือกสีที่ชัดขึ้นและสว่างกว่าเดิมก็มีผลในการวัดผล Accessibility ของเว็บยิ่งขึ้นไปอีก และทำให้คนที่เข้ามาเห็นข้อความได้ง่ายขึ้นอีกด้วย

https://webaim.org/resources/contrastchecker/

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

Extention ต่างๆ สำหรับช่วยเพิ่ม Accessibility (ตัวอย่างที่เอามาใช้)

• axe Accessibility Linter ( VsCode )
• eslint-plugin-jsx-a11y ( React )

Extention ที่กล่าวไปข้างต้นจะทำการแจ้งเตือนทันทีเมื่อลืมเติม Attribute ต่าง ๆ ใน Html ของเราแบบนี้

โดยทั้งหมดนี้ก็คือการเพิ่ม Accessibility ให้เว็บของเรานั้นเองครับ

ทดสอบยังไงให้รู้ว่าเว็บเรามี Accessibility รึยัง

ปัจจุบันมีเครื่องมือมากมายที่จะทดสอบตัว Accessibility ของเว็บ วันนี้จะยกตัวอย่างใกล้ ๆ ตัวที่สามารถเอามาใช้งานได้เลยอยู่ใน Google Chrome Browser ของเรานั้นเอง ชื่อว่า Lighthouse ถูกพัฒนาขึ้นโดย Google จะสามารถวัด Accessibility , Perfermance และ SEO ของเว็บได้ด้วย เราก็จะใช้ตัวนี้ในการทดสอบ

ภาพที่ทดสอบจาก facebook หน้า profile ของผม

tool ก็จะแนะนำว่าควรไปเติมอะไรในเว็บบ้าง จะสังเกตุได้ว่าการที่ทำ Accessibility ได้ตัว SEO ไปด้วย มีผลทำให้เว็บของเรามีสิทธิค้นเจอใน Google

คำแนะนำจาก tool lighthouse

การทดสอบอีกอย่างหนึ่งที่เขาพูดถึงก็คือ Acceptance Criteria ไม่ว่าเราจะทดสอบยังไงกับตัวเครื่องมือต่าง ๆ แต่ก็ยังต้องใช้คนในการทดสอบอยู่ดี เพราะจะเห็นผลลัพธ์จริง ๆ ก็ต่อเมื่อมีคนมาใช้งาน และได้รับ Feedback กลับมาทำให้เราพัฒนาเว็บไซต์ให้ดีขึ้นไปอีกขั้น อันนี้ก็เป็น Acceptance Criteria ที่เขายกตัวอย่างขึ้นมา

รูป UI ที่เขาใช้พูดในงาน conference ตัวอย่างที่ใช้เขียน Acceptance Criteria

ตัวอย่างการเขียน Acceptance Criteria

Error ที่เจอบ่อยๆ ใน Web Accessibility ก็คือ

• Low contrast ( สีไม่ contrast ทำให้มองยาก )
• Missing alt text for image ( ลืมเติม alt ใน tag Imag )
• Empty link ( tag a เปล่า ๆ ไม่มี link )
• Missing form input labels ( ลืมเติม label ที่ระบุว่า ช่องกรอกอะไร )
• Missing Document language ( ลืมเติมภาษาให้ตรง html ที่ระบุว่า เว็บใช้ภาษาอะไร)

ข้อดีจากการที่ทำตัว Accessibility

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

ทั้งหมดนี้ก็เป็นเรื่องที่สรุปคราว ๆ มาจากที่ผู้บรรยายพูด สามารถเข้าไปดูได้ที่นี้เลยครับ ไปฟังกันเลย ❤

ปีนี้คนไทยไปเยอะมากงาน conference

ภาพจากงาน conference

ขอขอบคุณพี่ ๆ เพื่อนๆ ที่ได้รวมเดินทางไปงานนี้ด้วยกัน รวมถึงพี่ที่สนับสนุนการไป conference ครั้งนี้ด้วยครับ ❤ ❤