เครื่องมือ เช็ค Accessibility สำหรับ Designer

Natk

Accessibility เป็นเรื่องที่สำคัญในการทำเว็บไซต์ และแอพในยุคปัจจุบัน โดยใน Accessibility ไม่ได้มีเพียงแค่การออกแบบเพื่อคนที่พิการทางด้านสายตาเท่านั้น แต่ยังมีผู้พิการแบบอื่น อีกมากมาย เช่น

  1. Anxiety – ผู้ใช้ที่มีอาการวิตกกังวล
  2. Autistic spectrum – ผู้ใช้ที่มีอาการออทิสติก
  3. Screen readers – ผู้ใช้ที่ต้องการระบบอ่านออกเสียงบนหน้าจอ
  4. Low vision – ผู้ใช้ที่มีภาวะสายตาเลือนราง
  5. Dyslexia – ผู้ใช้ที่มีอาการดิสเล็กเซีย
  6. Physical or motor disabilities – ผู้ใช้ที่ขาดอวัยวะบางส่วนหรือเคลื่อนไหวไม่ได้
  7. Deaf or hard of hearing – ผู้ที่สูญเสียการได้ยิน

นอกจากนี้ออกแบบเพื่อ Accessibility นอกจากจะทำให้คนพิการเข้าถึงข้อมูลได้แล้วนั้น ยังช่วยให้คนที่ไม่พิการในสภาพแวดล้อมต่าง ๆ เช่นแสงจ้า รถติด เลี้ยงลูก แขนหัก หกคะล้มกดมือถือไม่ได้ สามารถเข้าถึงข้อมูลของเราได้อย่างเท่าเทียมกันด้วย

บทความนี้จะรวบรวมเครื่องมือการออกแบบเพื่อ Accessiblity สำหรับ Designer & Developer และผู้ที่ทำเว็บไซต์ จะมีอะไรบ้างนั้นไปติดตามกันเลยค่ะ


🎨 เครื่องมือ เช็ค Accessibility – Contrast

เช็ค Accessibility ด้วย Contast tool - macOs App
เช็ค Accessibility ด้วย Contast tool – macOs App

Contrast — โปรแกรมบน Mac ช่วยเช็คระดับ Contrast ว่าสีของตัวหนังสือและพื้นหลังของเรานั้นผ่านมาตรฐาน WCAG หรือไม่ โดยระดับของสีจะถูกวัด และจะแสดงระดับ AA, AAA บนหน้าจอโปรแกรม

ColorBox — เว็บไซต์ช่วยหาคู่สี คำนวนจาก Hue, Saturation, Lightness โปรเจคจาก Lyft อันนี้เลือกระดับความสว่างของสีได้ หน้าตาโปรแกรมจะคล้ายๆกับ Leonado ที่ Designil เขียนไว้ด้วยค่ะ

Hex Naw — เว็บไซต์ ช่วยคำนวนค่า Ratio ของ Contrast เพียงแค่ใส่สีพื้นหลัง + สีตัวหนังสือลงไป เว็บไซต์ หน้าตาแสดงผลสวยงาม ดูง่าย

WebAIM – เว็บไซต์ที่ควรมีติดเครื่องสำหรับ Designer เอาไว้ใช้เช็ค contrast ให้ได้มาตรฐานจาก WCAG
โดย WebAIM แนะนำว่าใช้เว็บไซต์นี้คู่กับตัว Color picker บน Browser อย่าง Color zilla และใช้กับ WAVE ที่จะแนะนำด้านล่างนี้ค่ะ

stark accessibility checker
stark accessibility checker

Stark – ปลั๊กอิน Sketch, Adobe XD, Figma เป็นปลั๊กอินที่ดีไซน์เนอร์ทุกคนคู่ควร เพราะเป็นปลั๊กอินที่สามารถเช็คได้ทั้งระดับ Contrast ไปจนถึง Colorblind simulation หรือการจำลองสีสำหรับคนตาบอดสี

Color blindness simulation หรือโปรแกรมจำลองสี แบบที่คนตาบอดสีมองเห็นนั้นมีแนะนำด้านล่างนี้ด้วย


👓 โปรแกรมจำลองสี ออกแบบเพื่อผู้พิการทางสายตา

Colorblind – Dalton for Google Chrome – ปลั๊กอิน Chrome สำหรับการจำลองสีบนหน้าจอเว็บไซต์ของเรา ออกแบบเพื่อคนตาบอดสี

Color Oracle — เครื่องมือจำลองสีบนเครื่อง Mac, Window, Linux จาก Oracle

Toptal’s color filter — เว็บไซต์สำหรับทดสอบว่า หน้าจอเว็บไซต์ของเราจะถูกมองเห็นแบบไหนจากคนตาบอดสีประเภทต่าง ๆ

nocoffee simulator
nocoffee simulator

NoCoffee – เราไม่ได้มีแต่เพียงแค่คนตาบอดสีที่ใช้งานเว็บไซต์ของเรา แต่ยังมีคนพิการทางสายตาประเภทอื่นอีก เช่น คนที่เป็นเบาหวานมีจุดบนตา, คนที่มองเห็นภาพไม่ชัด, คนที่ต้องใช้แว่นขยายในการดูหน้าจอ NoCoffee จะช่วยจำลองหน้าเว็บไซต์ของเราให้หลากหลายแบบเลยค่ะ


เครื่องมือเช็ค Accessibility บนหน้าเว็บไซต์

accessibility checker browser
accessibility checker browser

Google Chrome audits – ใช้ระบบ Audits บน inspect mode จาก Google chrome ในการเช็คระดับ Accessibility ของเว็บไซต์ของเรา

ยกตัวอย่างด้านบนเป็นการทดสอบระดับของ Accessibility ของเว็บไซต์ Yale

ANDI — เครื่องมือช่วยเช็คเว็บไซต์และ Content ของเรา โหลดลง Browser ได้เลย

WAVE — ตัวนี้เป็นของ WebAim ที่ได้กล่าวถึงไว้ด้านบน

WAVE - Accessibility evaluation tool
WAVE – Accessibility evaluation tool
  • เว็บนี้ใช้งานได้โดยกรอก URL ของเว็บไซต์เราลงไป WAVE จะประเมินระดับ Accessibility ของเราออกมาเป็นระดับคะแนนตามภาพด้านบน
  • มี Browsers extensions สำหรับวิเคราะห์หน้าเว็บของเราด้วย

AChecker — เว็บไซต์ตัวนี้ช่วยเรา Validate HTML,CSS ว่าเขียนถูกหลัก Accessibility หรือไม่ เพียงแค่ใส่ URL ของเว็บไซต์เราลงไป

A11ygator — เว็บไซต์ฟรีสำหรับทดสอบว่าเว็บไซต์ของเราผ่านมาตรฐาน WCAG หรือไม่ แล้วก็ยังมี browser extension อีกเช่นกันค่ะ อันนี้ดูง่ายกว่า Achecker นิดนึงเพราะว่าแยกเป็นกลุ่มๆให้เลย แถมเขียนแบบละเอียดด้วย


สำหรับ iOS dev

สำหรับคนทำแอพ เวลาเราพัฒนาแอพที่ต้องทำงานกับ Accessibility นั้นเราต้องมานั่งเรียนตัว Native screen reader ของแต่ละ Device ด้วย อย่างของนัททำงานกับ Desktop เป็นหลัก นัทก็จะเรียนวิธีการใช้ Jaws หรือถ้าเป็น Mac ก็จะมี VoiceOver ที่เปิดได้ในคอมพิวเตอร์

และเช่นกัน IOS ก็จะมีตัว VoiceOver ในการเปล่งเสียงตัวหนังสือจากหน้าจอออกมา

แนะนำ Accessibility Inspector เป็นฟีเจอร์นึงส่วนหนึ่งของ Xcode ที่แอดนัทได้ไปนั่งดูวิดีโอจากงาน WWDC สำหรับใครที่สนใจศึกษาเพิ่มเติม ลองไปดูวิดีโอนี้ได้ค่า
วิดีโอสอนใช้ Accessibility inspector wwdc2019

VoiceOver เนี่ยก็จะช่วยให้ User ผู้ที่พิการทางสายตาใช้งานแอพลิเคชั่นได้โดยไม่ต้องมองเห็น และในตัว VoiceOver เองก็จะมีตัว Gestures สำหรับผู้พิการทางสายตาด้วย เช่น

  • Tap
  • Double-tap
  • Triple-tap
  • Swipe left, right, up, or down

อ่านเพิ่มเติมได้ที่ VoiceOver gestures

และสำหรับใครที่อยากทดลองใช้ ลองเปิดตัว VoiceOver ในมือถือตัวเอง ลองเปิดการตั้งค่าได้ที่ Settings > Accessibility > VoiceOver

VoiceOver จะช่วยอธิบายสิ่งที่อยู่บนหน้าจอของ User ไม่ว่าจะเป็นระดับแบตเตอรี่, ใครกำลังโทรเข้ามา, แอพไหนที่นิ้วของ User กำลังจิ้มอยู่ สามารถปรับแต่งเสียงของ VoiceOver ได้ตามโทนเสียงที่ต้องการ และเวลาเราสัมผัสหน้าจอ หรือกำลัง Drag นิ้วไปมา VoiceOver จะบอกทั้งหมดว่าเรากำลังจะกดไปโดนอะไร ไม่ว่าจะเป็นปุ่ม ลิงค์ และอื่น ๆ ถ้าเราจะใช้งานแอพนั้น เราค่อยกด Double Tap

Apple ยังมีตัว Voice Control ที่ช่วยให้ User เขียน แก้ไข ดูแผนที่ สั่งงานด้วยคำสั่งเสียงได้ด้วย

หากสนใจการออกแบบของฝั่ง Apple อ่านต่อเพิ่มเติมได้ที่ Accessibility on iOS


ช่อง Youtube ไว้เรียนรู้การใช้งานของผู้พิการทางสายตา

ช่อง youtube สำหรับศึกษา Accessibility - the blind life
ช่อง youtube สำหรับศึกษา Accessibility – the blind life

The Blind Life สำหรับคนที่อยากรู้ว่าคนตาบอดใช้แอพยังไง ช่องนี้ด้านบนดีมาก คุณพี่ Sam เป็นคนตาบอดประเภท Partial vision impairment ที่ยังพอมองเห็นบ้าง แต่ว่าต้องใช้เครื่องมืออย่าง Zoomtext เวลาใช้ PC บางครั้งก็ต้องใช้ Screen reader ประกอบการใช้งาน

เวลาใช้มือถือแอนดรอย Android จาก Google จะมี TalkBack เป็น Screen reader ถ้าใครทำแอพสาย Andriod ต้องไม่พลาดกับช่องกับช่องนี้เลยนะคะ

ข้ามมากันที่ฝั่งของ IOS คุณ Derek Daniels
ถ้าอยากรู้ว่าคนตาบอดใช้อุปกรณ์ของ Apple หรือที่เรียกกันว่า VoiceOver อยากให้ทุกคนลองติดตามช่องนี้ได้เลยค่ะ


Resources เพิ่มเติม

สำหรับใครที่กำลังมองหา Best practices วิธีการเรียนรู้ด้าน Accessibility นัทขอแนะนำเว็บไซต์ด้านล่างนี้เลยค่ะ รวบรวมเนื้อหาเกี่ยวกับการใช้งาน Screen reader ไว้เพียบ

Wiki Screen reader


อ่านจบแล้ว? เราแนะนำบทความนี้

Reference:
https://github.com/LisaDziuba

Natk

Natk

UI Specialist ซิดนีย์ ออสเตรเลีย เป็นดีไซน์เนอร์มา 12 ปี | สนใจเรื่อง User Interface, User Experience, Accessibility, Education | ผู้ก่อตั้งกลุ่มเฟซบุ๊ก Tech ไทยในออสเตรเลีย | ผู้ดูแลเว็บไซต์ Designil
บทความทั้งหมด