กำไร:
- ความสามารถในการควบคุมและปรับปรุงคอนทราสต์ของสี ข้อความแสดงแทน การเข้าถึงแป้นพิมพ์ และเกณฑ์ WCAG ด้วยการสนับสนุนปัญญาประดิษฐ์
- ความสามารถในการสร้างและตรวจสอบข้อความการช่วยสำหรับการเข้าถึง เช่น ประสบการณ์โปรแกรมอ่านหน้าจอ ข้อความแสดงแทน และป้ายกำกับแบบฟอร์มด้วยปัญญาประดิษฐ์
- ทำความเข้าใจขีดจำกัดของการตรวจสอบคำแนะนำในการเข้าถึงของ AI ด้วยเทคโนโลยีช่วยเหลือจริงและการทดสอบโดยผู้ใช้
ความสามารถในการเข้าถึง (เรียกสั้น ๆ ว่า a11y) คือความสามารถของผลิตภัณฑ์สำหรับทุกคน รวมถึงบุคคลที่มีความพิการ ผู้ใช้ที่มีความบกพร่องทางการมองเห็นสามารถนำทางด้วยโปรแกรมอ่านหน้าจอ (ซอฟต์แวร์เสริมที่แปลงข้อความเป็นคำพูด) บุคคลที่มีปัญหาด้านการเคลื่อนไหวสามารถทำอะไรก็ได้ด้วยแป้นพิมพ์ คนตาบอดสีสามารถรับข้อมูลได้โดยไม่ต้องอาศัยสี การออกแบบที่ครอบคลุมนั้นกว้างกว่า โดยให้ความหลากหลายของมนุษย์เป็นศูนย์กลางของการออกแบบ รวมถึงอายุ ภาษา วัฒนธรรม ความทุพพลภาพชั่วคราว (แขนหัก) หรือความพิการทางบริบท (หน้าจอกลางแดด) การเข้าถึงไม่ได้เป็น “พิเศษ” แต่เป็นความรับผิดชอบพื้นฐานและข้อกำหนดทางกฎหมายในประเทศส่วนใหญ่ AI เป็นตัวคัดกรองล่วงหน้าและตัวสร้างร่างที่ทรงพลังในสาขานี้ แต่การเข้าถึงที่แท้จริงจะได้รับการยืนยันโดยเทคโนโลยีช่วยเหลือจริงและการทดสอบโดยผู้ใช้เท่านั้น
WCAG และพื้นที่ควบคุมที่สำคัญ
WCAG (แนวทางการเข้าถึงเนื้อหาเว็บ) คือชุดเกณฑ์ที่ยอมรับในระดับสากลสำหรับการเข้าถึง โดยทั่วไปแล้วระดับ AA จะถูกกำหนดเป้าหมาย มีหลักการสี่ประการ: เนื้อหาต้องสามารถรับรู้ได้ อินเทอร์เฟซต้องใช้งานได้ ข้อมูลจะต้องเข้าใจได้และมีเทคนิคที่ดี พื้นที่ควบคุมที่พบบ่อยที่สุดในทางปฏิบัติคือ:
- คอนทราสต์ของสี: ความแตกต่างระหว่างข้อความและพื้นหลังเพียงพอหรือไม่ (สำหรับ AA อัตราส่วนอย่างน้อย 4.5:1 ในข้อความปกติ)
- ข้อความแสดงแทน (ข้อความแสดงแทน): รูปภาพมีข้อความที่เทียบเท่าซึ่งอธิบายให้โปรแกรมอ่านหน้าจอทราบหรือไม่
- การเข้าถึงคีย์บอร์ด: จะทำอะไรก็ได้โดยไม่ต้องใช้เมาส์? ลำดับการโฟกัสสมเหตุสมผลหรือไม่?
- ข้อมูลเฉพาะสี: วลีเช่น "กรอกข้อมูลในช่องสีแดง" จะไม่รวมผู้ใช้ที่ตาบอดสี
- ป้ายแบบฟอร์ม: แต่ละช่องป้อนข้อมูลมีป้ายชื่อที่โปรแกรมอ่านหน้าจอจะอ่านหรือไม่
- เป้าหมายการสัมผัส: ปุ่มมีขนาดใหญ่พอที่จะกดโดยใช้นิ้วได้อย่างสบายหรือไม่?
AI สามารถทำการสแกนเบื้องต้นอย่างรวดเร็วในหลายพื้นที่เหล่านี้: คุณสามารถระบุข้อความและถามว่า "คอนทราสต์เพียงพอหรือไม่" ให้คำอธิบายรูปภาพ และถาม "แนะนำข้อความแสดงแทน" ให้คำอธิบายอินเทอร์เฟซ และถามว่า "ปัญหาการเข้าถึงแป้นพิมพ์คืออะไร"
ข้อควรระวัง: เพียงเพราะ AI บอกว่า "ดูเหมือนเข้าถึงได้" ไม่ได้รับประกันการเข้าถึง การตรวจสอบอัตโนมัติจะตรวจจับข้อผิดพลาด WCAG บางส่วนเท่านั้น ที่เหลือก็จะเกิดขึ้นตามการใช้งานจริง
ข้อความแสดงแทน: เคล็ดลับของข้อความแสดงแทนที่ดี
ข้อความแสดงแทนจะแทนที่รูปภาพสำหรับผู้ใช้ที่มีความบกพร่องทางการมองเห็น ข้อความแสดงแทนที่ดีสื่อถึงฟังก์ชันและความหมายของรูปภาพ ไม่ใช่รายละเอียดการตกแต่ง ข้อความแสดงแทนสำหรับไอคอน "เพิ่มลงในรถเข็น" ควรเป็น "เพิ่มลงในรถเข็น" ไม่ใช่ "รูปภาพรถเข็นช็อปปิ้ง" เนื่องจากเป็นการกระทำที่สำคัญต่อผู้ใช้ AI สามารถสร้างโครงร่างข้อความย่อยได้ดี แต่เนื่องจากไม่ทราบบริบท จึงอาจสร้างข้อความที่สื่อความหมายมากเกินไปหรือไม่เกี่ยวข้องได้ คุณถามข้อความแสดงแทนแต่ละข้อความว่า "ทำไมภาพนี้ถึงอยู่ที่นี่" ครอบตัดคำถาม
ภาพ
ข้อความย่อยที่อ่อนแอ
ข้อความย่อยที่แข็งแกร่ง
ไอคอนรถเข็น (ปุ่ม)
"ไอคอนรถเข็นสีเทา"
"หยิบลงตะกร้า"
ภาพผลิตภัณฑ์
"รูปภาพ"
“โค้ตกันหนาวสีน้ำเงิน วิวด้านหน้า”
เส้นตกแต่ง
“สายประดับ”
(เว้นว่างไว้ — ตกแต่ง)
กราฟิก
"ภาพกราฟิก"
“ยอดขายปี 2567 เพิ่มขึ้นทุกไตรมาส”
ภาษาและขอบเขตที่ครอบคลุม
การเข้าถึงไม่ได้จำกัดอยู่เพียงการควบคุมทางเทคนิคเท่านั้น รวมภาษาด้วย ข้อความที่ถือว่าเพศ ("ผู้ใช้และคู่สมรสของเขา/เธอ") ไม่รวมตามความสามารถ ("เหลือบมอง" "ได้ยินง่าย") หรือมีสมมติฐานทางวัฒนธรรมจะไม่รวมผู้ใช้บางราย AI สามารถสแกนข้อความจากมุมมองนี้ได้ แต่คุณต้องแน่ใจว่าภาษาที่ “เป็นกลาง” ที่แนะนำนั้นยังคงเป็นธรรมชาติและเข้าใจได้ การแก้ไขมากเกินไปอาจทำให้ข้อความดูอึดอัดได้
มินิเคสสามอัน
กรณีที่ 1 — ตรวจพบข้อผิดพลาดด้านคอนทราสต์ตั้งแต่เนิ่นๆ ทีมงานให้ AI สแกนสีข้อความของหน้าจอ 20 หน้าจอ และพบว่าคอนทราสต์ต่ำกว่าเกณฑ์ AA ใน 7 ตำแหน่ง การแก้ไขเกิดขึ้นโดยไม่มีการพัฒนา หลีกเลี่ยงค่าใช้จ่ายในการแก้ไขในภายหลัง แต่ทีมงานก็ยังไม่ข้ามการทดสอบโปรแกรมอ่านหน้าจอจริง
กรณีที่ 2 — เฉพาะข้อมูลที่เกี่ยวข้องกับสีเท่านั้นที่ได้รับการแก้ไข แบบฟอร์มหนึ่งแสดงช่องข้อผิดพลาดโดยมีเส้นขอบสีแดงเท่านั้น AI แจ้งเรื่องนี้; ทีมงานยังเพิ่มข้อความและไอคอนในแต่ละข้อผิดพลาดด้วย ผู้ใช้ตาบอดสีสามารถเห็นข้อผิดพลาดได้แล้ว บทเรียน: สีเพียงอย่างเดียวไม่สามารถถ่ายทอดข้อมูลได้
กรณีที่ 3 — AI ทำให้เกิดการอนุมัติที่ผิดพลาด นักออกแบบรายหนึ่งข้ามการทดสอบโปรแกรมอ่านหน้าจอเพราะเขาเรียกว่า AI “สามารถเข้าถึงได้” จากการทดสอบจริงพบว่าลำดับโฟกัสสับสนและบางปุ่มไม่สามารถอ่านได้เลย บทเรียน: การยืนยันอัตโนมัติคือจุดเริ่มต้น จำเป็นต้องมีการทดสอบเทคโนโลยีช่วยเหลือจริง
พร้อมท์ที่คัดลอกได้
สแกนคำอธิบายอินเทอร์เฟซนี้ล่วงหน้าเพื่อการเข้าถึง:1) มีข้อมูลที่ดำเนินการตามสีเพียงอย่างเดียวหรือไม่?2) มีป้ายกำกับข้อความสำหรับแต่ละองค์ประกอบที่คลิกได้?3) มีองค์ประกอบใดบ้างที่ไม่สามารถเข้าถึงได้ผ่านแป้นพิมพ์?4) ลำดับโฟกัสสมเหตุสมผลหรือไม่?แสดงรายการปัญหาและข้อเสนอแนะแต่ละรายการ เพิ่มหมายเหตุ "ต้องมีการทดสอบจริง" สูตร: <<text>>
แนะนำข้อความแสดงแทนสำหรับรูปภาพเหล่านี้ กฎเกณฑ์: สื่อถึง FUNCTION/ความหมายของภาพ ไม่ใช่รายละเอียดการตกแต่ง เขียนการดำเนินการสำหรับไอคอนปุ่ม สำหรับรูปภาพตกแต่ง ให้พูดว่า "ข้อความแสดงแทนควรเว้นว่างไว้" คำอธิบายบริบทและรูปภาพ: <<รายการ>>
ตรวจสอบข้อความเหล่านี้เพื่อดูภาษาที่ครอบคลุม: มีข้อสันนิษฐานทางเพศ ภาษาที่ไม่กีดกันตามความสามารถ (เช่น "เห็น" "ได้ยิน") สมมติฐานทางวัฒนธรรมหรือไม่ เสนอทางเลือกอื่นที่ยังคงความเป็นธรรมชาติ อย่าแก้ไขมากเกินไป ข้อความ: <<รายการ>>
เขียนข้อผิดพลาดและข้อความป้ายกำกับที่สามารถเข้าถึงได้สำหรับแบบฟอร์มนี้: ป้ายกำกับที่มองเห็นได้สำหรับแต่ละฟิลด์ คำอธิบายสำหรับโปรแกรมอ่านหน้าจอ และข้อความที่อธิบายข้อผิดพลาด โดยไม่คำนึงถึงสี (ข้อความ + ไอคอน) เสียงและน้ำเสียง: <<การ์ด>>ช่องแบบฟอร์ม: <<รายการ>>
พรอมต์อ่อน / พรอมต์แข็งแกร่ง
จุดอ่อน: "เขียนข้อความแสดงแทนสำหรับรูปภาพนี้"
ผลลัพธ์: “รูปภาพ” หรือข้อความอธิบายมากเกินไปซึ่งขาดฟังก์ชันนี้
แข็งแกร่ง: "แนะนำข้อความแสดงแทนสำหรับรูปภาพเหล่านี้ ถ่ายทอดฟังก์ชัน/ความหมายของรูปภาพ เขียนการดำเนินการสำหรับไอคอนปุ่ม ทำเครื่องหมายไอคอนตกแต่งว่า 'ต้องเว้นว่างไว้'"
ผลลัพธ์: ข้อความย่อยตามบริบท เน้นฟังก์ชัน และถูกต้อง
ความแตกต่าง: พรอมต์ที่แข็งแกร่งนำมาซึ่งโฟกัสการทำงาน + รูปแบบปุ่ม + ความแตกต่างในการตกแต่ง
ข้อผิดพลาดทั่วไป
- การเข้าใจผิดว่าการอนุมัติปัญญาประดิษฐ์เป็นการรับประกันการเข้าถึง ไม่สามารถทดแทนการทดสอบจริงได้
- เพียงโหลดข้อมูลเป็นสี ผู้ใช้ตาบอดสีพลาดข้อมูล
- อธิบายรูปภาพ ไม่ใช่ฟังก์ชัน ในข้อความแสดงแทน ต้องเขียนการดำเนินการสำหรับไอคอนปุ่ม
- ปล่อยให้การเข้าถึงเป็นที่สุดท้าย หากไม่ได้สตาร์ทที่ระยะ wireframe จะมีราคาแพงในการแพตช์ในภายหลัง
- ภาษาที่แก้ไขมากเกินไป ภาษาที่ครอบคลุมซึ่งสูญเสียความเป็นธรรมชาติยังทำให้ความสามารถในการเข้าใจลดลงอีกด้วย
โดยสรุป
การเข้าถึงหมายความว่าทุกคนสามารถเข้าถึงผลิตภัณฑ์ได้ ไม่ใช่เรื่องพิเศษ แต่เป็นสิ่งจำเป็นและถือเป็นความรับผิดชอบทางกฎหมายในสถานที่ส่วนใหญ่ AI มีคุณค่าในฐานะตัวสร้าง preflight และร่างด่วนสำหรับคอนทราสต์ ข้อความแสดงแทน การเข้าถึงคีย์บอร์ด และการสแกนภาษาแบบรวม แต่การอนุมัติอัตโนมัติจะตรวจจับข้อผิดพลาด WCAG บางส่วนเท่านั้น การเข้าถึงจริงได้รับการยืนยันโดยการทดสอบกับโปรแกรมอ่านหน้าจอและผู้ใช้เทคโนโลยีช่วยเหลือจริง ใช้โมเดลเป็นเบราว์เซอร์ด้านหน้ารับหลักฐานจากการทดสอบจริง
งานสมัคร
- สแกนคำอธิบายอินเทอร์เฟซล่วงหน้าสำหรับการเข้าถึงเมื่อพร้อมท์แรก
- แก้ไขเฉพาะข้อมูลตามสีหรือรายการที่ไม่มีป้ายกำกับ
- สร้างข้อความแสดงแทนเชิงฟังก์ชันสำหรับภาพบนหน้าจอของคุณด้วยพรอมต์ที่สอง
- ตรวจสอบข้อความของคุณเพื่อดูภาษาที่รวมด้วยข้อความแจ้งที่สาม
- หากเป็นไปได้ ให้ลองทดสอบจริงด้วยโปรแกรมอ่านหน้าจอ และจดบันทึกว่าการสแกนอัตโนมัติพลาดอะไรไป
รายการตรวจสอบ
- [ ] ฉันสแกนคอนทราสต์ การเข้าถึงแป้นพิมพ์ และป้ายกำกับไว้ล่วงหน้า
- [ ] ฉันไม่ได้ทิ้งข้อมูลไว้เพียงเรื่องสีเท่านั้น
- [ ] ฉันเขียนข้อความย่อยในลักษณะที่ใช้งานได้จริงและปล่อยให้ข้อความตกแต่งว่างไว้
- [ ] ฉันควบคุมภาษาแบบครอบคลุม ฉันรักษาความเป็นธรรมชาติไว้
- [ ] ฉันไม่ได้ถือว่าการอนุมัติอัตโนมัติเป็นการรับประกันการเข้าถึง
- [ ] ฉันวางแผน/ดำเนินการทดสอบเทคโนโลยีช่วยเหลือจริง