ALLY: รายการตรวจสอบการเข้าถึง UI สำหรับนักออกแบบ

✅ การออกแบบผลิตภัณฑ์ดิจิทัลที่ทุกคนเข้าถึงได้เป็นสิ่งสำคัญ การทำให้การออกแบบของเราเข้าถึงได้ เรากำลังสร้างโลกที่ครอบคลุมมากขึ้น ต่อไปนี้คือเคล็ดลับและการดำเนินการที่ต้องคำนึงถึงขณะออกแบบเพื่อการเข้าถึง:

เทคโนโลยีอำนวยความสะดวก:

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

โปรแกรมอ่านหน้าจอ:

ซอฟต์แวร์การเข้าถึงโปรแกรมอ่านหน้าจอ เช่น TalkBack ของ Google บน Android, VoiceOver ของ Apple บน iOS และ JAWS ของ Freedom Scientific บนเดสก์ท็อป โปรแกรมอ่านหน้าจอจะอ่านออกเสียงข้อความบนหน้าจอและองค์ประกอบต่างๆ (เช่น ปุ่ม) รวมถึงข้อความทางเลือกที่มองเห็นได้และมองไม่เห็น

ข้อความและรูปแบบ:

• การนำเสนอภาพข้อความและรูปภาพของข้อความมีอัตราคอนทราสต์เพียงพออย่างน้อย4.5:1 (ระดับ AA)
• ใช้ฟอนต์ที่อ่านง่าย และหลีกเลี่ยงฟอนต์ตกแต่งหรือเล่นหาง
• หลีกเลี่ยงการใช้ตัวพิมพ์ใหญ่ทั้งหมดเนื่องจากจะทำให้อ่านข้อความได้ยากขึ้นสำหรับผู้ที่มีความบกพร่องในการอ่าน
• ใช้ขนาดตัวอักษรและระยะห่างระหว่างบรรทัดที่เหมาะสมเพื่อให้อ่านง่ายขึ้น
• หลีกเลี่ยงการใช้สีเพียงอย่างเดียวในการสื่อความหมาย

• อย่าใช้สีเป็นวิธีเดียวในการถ่ายทอดข้อมูล
• ตรวจสอบให้แน่ใจว่ามีความเปรียบต่างเพียงพอระหว่างข้อความและสีพื้นหลัง นี่คือเครื่องมือที่เป็นประโยชน์:https://webaim.org/resources/contrastchecker/
• ทดสอบการออกแบบของคุณโดยใช้เครื่องจำลองการตาบอดสีเพื่อให้แน่ใจว่าผู้ที่ตาบอดสีสามารถเข้าถึงได้

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

• ใช้ป้ายกำกับที่ชัดเจนและรัดกุมสำหรับช่องแบบฟอร์มทั้งหมด
• ใช้ประเภทอินพุตที่เหมาะสมสำหรับช่องแบบฟอร์ม (เช่น อีเมล โทรศัพท์ ฯลฯ)
• ใช้ข้อความแสดงข้อผิดพลาดที่เหมาะสมและให้ข้อเสนอแนะที่ชัดเจนเกี่ยวกับการส่งแบบฟอร์มโดยใช้สี น้ำหนักแบบอักษร หรือข้อความที่ขีดเส้นใต้
• ตรวจสอบให้แน่ใจว่าแบบฟอร์มนั้นนำทางได้ง่ายและสามารถกรอกได้โดยใช้การนำทางด้วยแป้นพิมพ์เท่านั้น
• สถานะโฟกัสการออกแบบที่มีพื้นที่คอนทราสต์ที่มีอัตราส่วนคอนทราสต์ขั้นต่ำ 3:1 ที่เรียกว่าพื้นที่ตัดกัน (ดูด้านล่าง)

• จัดเตรียมการถอดเสียงหรือคำบรรยายสำหรับเนื้อหาเสียงและวิดีโอทั้งหมด
• ตรวจสอบให้แน่ใจว่าสามารถเข้าถึงส่วนควบคุมเสียงและวิดีโอได้และใช้งานง่าย
• จัดเตรียมรูปแบบอื่นสำหรับเนื้อหามัลติมีเดีย (เช่น คำอธิบายเสียงสำหรับเนื้อหาวิดีโอ)
• สำหรับ Devs: ใช้ป้ายกำกับ aria และแท็ก Alt สำหรับรูปภาพและมัลติมีเดียเพื่ออธิบายสิ่งที่พวกเขาเป็น สิ่งนี้จะทำให้โปรแกรมอ่านหน้าจอไม่ข้ามไปทั้งนี้ขึ้นอยู่กับความหมาย
• ข้อความแสดงแทนแปล UI แบบภาพเป็น UI แบบข้อความ ข้อความแสดงแทนเป็นป้ายกำกับสั้นๆ (สูงสุด 125 อักขระ) ในโค้ดที่อธิบายรูปภาพสำหรับผู้ใช้ที่มองไม่เห็น

• ตรวจสอบให้แน่ใจว่าการออกแบบได้รับการปรับให้เหมาะกับอุปกรณ์พกพา
• ใช้การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์เพื่อให้แน่ใจว่าเค้าโครงจะปรับให้เข้ากับขนาดหน้าจอต่างๆ
• ตรวจสอบให้แน่ใจว่าเป้าหมายการสัมผัสมีขนาดใหญ่พอที่จะเปิดใช้งานได้ง่าย พื้นที่ควรมีอย่างน้อย 44x44 พิกเซลและ 48x48dp สำหรับ Android รายละเอียดเพิ่มเติมที่นี่

การออกแบบโดยคำนึงถึงการช่วยสำหรับการเข้าถึงไม่ใช่เรื่องง่าย เริ่มด้วยความเห็นอกเห็นใจ — พิจารณากรณีขอบและตระหนักถึงความสามารถต่างๆ ในการใช้ผลิตภัณฑ์ของคุณ รายการตรวจสอบนี้ไม่ใช่รายการมาตรฐานการช่วยสำหรับการเข้าถึงอย่างครบถ้วน แต่เป็นจุดเริ่มต้น ดังนั้นโปรดตรวจสอบลิงก์ด้านล่าง

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

การอ่านและทรัพยากรเพิ่มเติม:

https://m2.material.io/design/usability/accessibility.html

https://design.gitlab.com/accessibility/keyboard-only

https://web.dev/focus/

https://www.sarasoueidan.com/blog/focus-indicators/