ข้อมูลเบื้องต้นเกี่ยวกับการทดสอบด้วยตนเอง
การทดสอบการช่วยเหลือพิเศษด้วยตนเองใช้การทดสอบแป้นพิมพ์ ภาพ การรับรู้ เครื่องมือต่างๆ และเทคนิคต่างๆ เพื่อค้นหาปัญหาที่เครื่องมืออัตโนมัติทำไม่ได้ เป็นแบบอัตโนมัติ ไม่ได้ครอบคลุมเกณฑ์ความสำเร็จทั้งหมดที่ระบุไว้ใน WCAG สำคัญที่คุณไม่ควรเรียกใช้การทดสอบการช่วยเหลือพิเศษโดยอัตโนมัติ แล้วหยุดการทดสอบ
เมื่อเทคโนโลยีก้าวหน้า เครื่องมืออัตโนมัติเพียงอย่างเดียวอาจครอบคลุมการทดสอบมากขึ้น แต่ปัจจุบันต้องเพิ่มการตรวจสอบทั้งด้วยตนเองและเทคโนโลยีความช่วยเหลือพิเศษลงในโปรโตคอลการทดสอบเพื่อให้ครอบคลุมจุดตรวจ WCAG ที่เกี่ยวข้องทั้งหมด
ข้อดีของการทดสอบการช่วยเหลือพิเศษด้วยตนเองมีดังนี้
- เรียบง่ายและใช้งานได้เร็วพอสมควร
- พบปัญหาในเปอร์เซ็นต์ที่สูงกว่าการทดสอบอัตโนมัติเพียงอย่างเดียว
- ใช้เครื่องมือเล็กๆ น้อยๆ และความเชี่ยวชาญที่จำเป็นต่อการประสบความสำเร็จ
ข้อเสียของการทดสอบการช่วยเหลือพิเศษด้วยตนเองมีดังนี้
- การทดสอบมีความซับซ้อนและใช้เวลานานมากกว่าการทดสอบอัตโนมัติ
- อาจทำซ้ำได้ยากในปริมาณมาก
- ต้องใช้ความเชี่ยวชาญด้านการช่วยเหลือพิเศษเพิ่มเติมเพื่อทำการทดสอบและตีความผลลัพธ์
มาเปรียบเทียบว่าองค์ประกอบการช่วยเหลือพิเศษและรายละเอียดใดบ้างที่ตรวจพบได้ในปัจจุบัน โดยใช้เครื่องมืออัตโนมัติ เทียบกับเครื่องมือที่ตรวจไม่พบ
ประเภทของการทดสอบด้วยตนเอง
มีเครื่องมือและเทคนิคมากมายที่ต้องพิจารณาเมื่อดูข้อมูล หน้าเว็บหรือแอปสำหรับการช่วยเหลือพิเศษ แบบดิจิทัล ด้านที่สำคัญที่สุด 3 ด้าน โดยการทดสอบด้วยตนเองได้แก่ ฟังก์ชันแป้นพิมพ์ การตรวจสอบที่เน้นภาพ และ การตรวจสอบเนื้อหาทั่วไป
เราจะพูดถึงแต่ละหัวข้อเหล่านี้แบบกว้างๆ ในโมดูลนี้ การทดสอบต่อไปนี้ไม่ใช่รายการการทดสอบด้วยตนเองทั้งหมด ที่คุณจะทำได้หรือควรเรียกใช้ เราขอแนะนำให้คุณเริ่มต้นด้วย รายการตรวจสอบการช่วยเหลือพิเศษด้วยตนเอง จากแหล่งที่มาที่เชื่อถือได้ และพัฒนารายการตรวจสอบด้วยตนเองสำหรับคุณโดยเฉพาะ เกี่ยวกับผลิตภัณฑ์และความต้องการของทีมได้ในระดับที่เจาะจง
การตรวจสอบแป้นพิมพ์
มีการประมาณว่า 25% ของปัญหาเกี่ยวกับความสามารถเข้าถึงได้ง่ายในโลกดิจิทัลทั้งหมดนั้นเกี่ยวข้องกัน ที่ขาดการรองรับแป้นพิมพ์ ตามที่เราได้เรียนรู้ไปในโมดูลโฟกัสของแป้นพิมพ์ ซึ่งส่งผลต่อผู้ใช้ทุกประเภท รวมถึงผู้ใช้แป้นพิมพ์ที่สายตาเลือนราง ผู้ใช้โปรแกรมอ่านหน้าจอที่มีสายตาเลือนราง/ตาบอด และผู้ที่ใช้ซอฟต์แวร์การรู้จำเสียงซึ่งใช้เทคโนโลยีที่อาศัยเนื้อหาที่เข้าถึงได้ด้วยแป้นพิมพ์เช่นกัน
การทดสอบแป้นพิมพ์จะตอบคำถามต่างๆ เช่น
- หน้าเว็บหรือฟีเจอร์ต้องใช้เมาส์ในการทำงานหรือไม่
- ลำดับแท็บมีความสมเหตุสมผลและเข้าใจง่ายหรือไม่
- สัญญาณบอกสถานะโฟกัสของแป้นพิมพ์มองเห็นได้เสมอหรือไม่
- คุณสามารถติดอยู่ในองค์ประกอบที่ไม่ควรดักจับโฟกัสได้ไหม
- คุณสามารถนำทางไปด้านหลังหรือรอบๆ องค์ประกอบที่ควรดักจับโฟกัสได้หรือไม่
- เมื่อปิดองค์ประกอบที่ได้รับโฟกัส ตัวบ่งชี้โฟกัสกลับไปอยู่ในตำแหน่งที่เหมาะสมหรือไม่
แม้ว่าฟังก์ชันของแป้นพิมพ์จะส่งผลกระทบอย่างมาก แต่ขั้นตอนการทดสอบก็ไม่ซับซ้อน ทั้งหมดที่คุณต้องทำคือ เตรียมเมาส์ไว้หรือติดตั้งแพ็กเกจ JavaScript ขนาดเล็ก และทดสอบเว็บไซต์โดยใช้เฉพาะแป้นพิมพ์ คำสั่งต่อไปนี้จำเป็นสำหรับการทดสอบแป้นพิมพ์
การตรวจสอบการมองเห็น
การตรวจสอบภาพจะมุ่งเน้นที่องค์ประกอบภาพของหน้าเว็บและใช้เครื่องมือ เช่น การขยายหน้าจอหรือการซูมเบราว์เซอร์ เพื่อตรวจสอบเว็บไซต์หรือแอปสำหรับการช่วยเหลือพิเศษ
การตรวจสอบด้วยภาพบอกสิ่งต่อไปนี้แก่คุณได้
- มีปัญหาเรื่องคอนทราสต์ของสีที่เครื่องมืออัตโนมัติตรวจไม่พบ เช่น ข้อความบนการไล่ระดับสีหรือรูปภาพหรือไม่
- มีองค์ประกอบใดที่ดูเหมือนส่วนหัว รายการ และองค์ประกอบโครงสร้างอื่นๆ แต่ไม่ได้เขียนโค้ดไหม
- ลิงก์การนำทางและการป้อนข้อมูลในแบบฟอร์มสอดคล้องกันทั่วทั้งเว็บไซต์หรือแอปไหม
- มีการกะพริบ การใช้แสง หรือภาพเคลื่อนไหวที่เกินจากคำแนะนำไหม
- เนื้อหามีการเว้นวรรคที่เหมาะสมไหม สำหรับตัวอักษร คำ บรรทัด และย่อหน้าใช่ไหม
- คุณเห็นเนื้อหาทั้งหมดโดยใช้แว่นขยายหน้าจอหรือการซูมเบราว์เซอร์ไหม
การตรวจสอบเนื้อหา
ซึ่งแตกต่างจากการทดสอบด้วยภาพที่มุ่งเน้นเลย์เอาต์ การเคลื่อนไหว และสี การตรวจสอบเนื้อหาจะมุ่งเน้นที่คำในหน้า คุณไม่เพียงแค่ดูสำเนาเท่านั้น แต่คุณควรทบทวนบริบทเพื่อให้มั่นใจว่าคนอื่นๆ เข้าใจเนื้อหาได้
การตรวจสอบเนื้อหาจะตอบคำถามต่างๆ เช่น
- ชื่อหน้าเว็บ ส่วนหัว และป้ายกำกับของแบบฟอร์มชัดเจนและอธิบายรายละเอียดไหม
- ตัวเลือกรูปภาพมีความกระชับ ถูกต้อง และมีประโยชน์ไหม
- การใช้สีเพียงอย่างเดียวเป็นวิธีเดียวในการสื่อความหมายหรือข้อมูลหรือไม่
- ลิงก์เป็นคำอธิบาย หรือคุณใช้ข้อความทั่วไป เช่น "อ่านเพิ่มเติม" หรือ "คลิกที่นี่" หรือไม่
- มีการเปลี่ยนแปลงภาษาภายในหน้าเว็บไหม
- มีการใช้ภาษาง่ายๆ และเป็นตัวย่อทั้งหมดเมื่ออ้างอิงถึงครั้งแรกไหม
การตรวจสอบเนื้อหาบางอย่างอาจเป็นแบบอัตโนมัติได้บางส่วน ตัวอย่างเช่น คุณสามารถเขียนโปรแกรมวิเคราะห์ JavaScript ที่ตรวจสอบ "คลิกที่นี่" และแนะนำให้คุณทำการเปลี่ยนแปลง อย่างไรก็ตาม โซลูชันที่กำหนดเองเหล่านี้มักต้องอาศัยมนุษย์ในการเปลี่ยนแปลงสำเนาเนื้อหาให้เป็นเนื้อหาตามบริบท
การสาธิต: การทดสอบด้วยตนเอง
ที่ผ่านมา เราได้ทำการทดสอบอัตโนมัติบนหน้าเว็บสาธิต และพบและแก้ไขปัญหาที่แตกต่างกัน 8 ประเภท ตอนนี้เราพร้อมดำเนินการตรวจสอบด้วยตนเองเพื่อดูว่าจะพบปัญหาการช่วยเหลือพิเศษเพิ่มเติมหรือไม่
ขั้นตอนที่ 1
การสาธิต CodePen ที่อัปเดตของเรามีทั้งหมด ของการอัปเดตการช่วยเหลือพิเศษอัตโนมัติที่ใช้
โปรดดูในโหมดแก้ไขข้อบกพร่องเพื่อดำเนินการ
การทดสอบถัดไป นี่เป็นสิ่งสำคัญ เพราะจะนำ <iframe> ที่อยู่รอบๆ ออก
หน้าเว็บสาธิต ซึ่งอาจรบกวนเครื่องมือทดสอบบางอย่าง ดูข้อมูลเพิ่มเติมเกี่ยวกับ
โหมดแก้ไขข้อบกพร่องของ CodePen
ขั้นตอนที่ 2
เริ่มกระบวนการทดสอบด้วยตนเองโดยวางเมาส์หรือแทร็กแพดไว้ข้างกัน และเลื่อน DOM ขึ้นและลงโดยใช้แป้นพิมพ์เท่านั้น
ปัญหา 1: สัญญาณบอกสถานะโฟกัสที่มองเห็นได้
คุณควรเห็นปัญหาแป้นพิมพ์แรกทันทีหรือจะไม่เห็นปัญหานั้นอีก เนื่องจากตัวบ่งชี้โฟกัสที่มองเห็นได้ถูกนำออกไปแล้ว เมื่อสแกน CSS ในเดโม คุณจะเห็น "outline: none" เป็นกังวลและได้เพิ่มเข้ามาในฐานของโค้ด
:focus {
outline: none;
}
มาแก้ไขกันเลย
ตามที่คุณได้เรียนรู้ในโมดูลโฟกัสของแป้นพิมพ์คุณต้องนำโค้ดบรรทัดนี้ออกเพื่อให้เว็บเบราว์เซอร์เพิ่มโฟกัสที่มองเห็นได้สำหรับผู้ใช้ คุณสามารถก้าวไปอีกขั้นและสร้างตัวบ่งชี้การมุ่งเน้นที่มีสไตล์เพื่อให้สอดคล้องกับรูปลักษณ์ของผลิตภัณฑ์ดิจิทัลของคุณ
:focus {
outline: 3px dotted #008576;
}
ปัญหา 2: ลำดับโฟกัส
เมื่อคุณแก้ไขตัวระบุโฟกัสและมองเห็นได้แล้ว ให้กดแป้น Tab ผ่านหน้าเว็บ ระหว่างที่พิมพ์ คุณควรจะสังเกตว่าฟิลด์ป้อนฟอร์ม เคยชินกับการสมัครรับจดหมายข่าว ไม่ได้รับความสนใจ ถูกนำออกแล้ว จากลำดับโฟกัสตามปกติด้วย Tabindex เชิงลบ
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
เนื่องจากเราต้องการให้ผู้ใช้สามารถใช้ฟิลด์นี้ในการลงชื่อสมัครรับจดหมายข่าวของเรา เราจึงเพียงแค่นำดัชนีแท็บเชิงลบออก หรือตั้งค่าเป็น 0 เพื่อให้การป้อนข้อมูลนั้นสามารถโฟกัสแป้นพิมพ์ได้อีกครั้ง
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>
ขั้นตอนที่ 3
เมื่อตรวจสอบโฟกัสของแป้นพิมพ์แล้ว เราจะไปยังการตรวจสอบภาพและเนื้อหา
ปัญหา 3: คอนทราสต์ของสีลิงก์
ขณะทำการทดสอบแป้นพิมพ์โดยกดแท็บขึ้นลงในหน้าเดโม คุณอาจสังเกตเห็นว่าแป้นพิมพ์เน้นไปที่ลิงก์ที่ซ่อนอยู่ 3 ลิงก์ใน เกี่ยวกับภาวะทางการแพทย์ต่างๆ
ลิงก์ต้องโดดเด่นกว่าข้อความโดยรอบเพื่อให้ผู้คนเข้าถึงได้ และแสดงการเปลี่ยนแปลงการจัดรูปแบบที่ไม่ใช่สีเมื่อวางเมาส์บนเมาส์และโฟกัสแป้นพิมพ์
มาแก้ไขกัน
วิธีแก้ไขอย่างรวดเร็วคือเพิ่มเส้นใต้ให้กับลิงก์ภายในย่อหน้าเพื่อทำให้โดดเด่น วิธีนี้จะช่วยแก้ปัญหาการช่วยเหลือพิเศษได้ แต่อาจไม่เหมาะกับลักษณะการออกแบบโดยรวมที่คุณต้องการ
หากคุณเลือกที่จะไม่เพิ่มเส้นใต้ คุณจะต้องแก้ไขสีให้ตรงตามข้อกำหนดสำหรับทั้งพื้นหลังและข้อความ
เมื่อดูการสาธิตโดยใช้เครื่องมือตรวจสอบคอนทราสต์ลิงก์ คุณจะเห็นว่าสีลิงก์เป็นไปตามข้อกำหนดคอนทราสต์ของสี 4.5:1 ระหว่างข้อความขนาดปกติกับพื้นหลัง อย่างไรก็ตาม ลิงก์ที่ไม่ขีดเส้นใต้ต้องเป็นไปตามข้อกำหนดคอนทราสต์ของสี 3:1 กับข้อความโดยรอบเช่นกัน
ทางเลือกหนึ่งคือการเปลี่ยนสีลิงก์ให้ตรงกับองค์ประกอบอื่นๆ ในหน้าเว็บ แต่หากคุณเปลี่ยนสีลิงก์เป็นสีเขียว คุณจะต้องปรับเนื้อความให้ตรงกับข้อกำหนดคอนทราสต์ของสีโดยรวมระหว่างองค์ประกอบทั้ง 3 รายการ ได้แก่ ลิงก์ พื้นหลัง และข้อความโดยรอบ
ปัญหา 4: คอนทราสต์ของสีไอคอน
ปัญหาอีกประการหนึ่งที่ทำให้คอนทราสต์ของสีหายไปคือไอคอนโซเชียลมีเดีย และในโมดูลสีและคอนทราสต์ คุณได้ทราบว่าไอคอนที่จำเป็นต้องมีคอนทราสต์ของสีเป็น 3:1 กับพื้นหลัง อย่างไรก็ตาม ในการสาธิตนี้ ไอคอนโซเชียลมีเดียมีอัตราส่วนคอนทราสต์ที่ 1.3:1
มาแก้ไขกัน
ไอคอนโซเชียลมีเดียจะเปลี่ยนเป็นสีเทาเข้มเพื่อให้เป็นไปตามข้อกำหนดด้านคอนทราสต์ของสี 3:1
ปัญหาที่ 5: การจัดวางเนื้อหา
ถ้าคุณดูการจัดวางเนื้อหาของย่อหน้า ข้อความจะสมบูรณ์ เหมาะสมแล้ว ตามที่คุณได้เรียนรู้มาใน โมดูลการพิมพ์ ทำให้เกิด "ลำธารแห่งอวกาศ" ซึ่งอาจทำให้บางคนอ่านข้อความได้ยาก ผู้ใช้ที่จะอ่าน
p.bullet {
text-align: justify;
}
หากต้องการรีเซ็ตการจัดแนวข้อความในการสาธิต คุณสามารถอัปเดตโค้ดเป็น
text-align: left;หรือนำบรรทัดนั้นออกจาก CSS ทั้งหมด เนื่องจากทางด้านซ้ายคือ
การจัดข้อความเริ่มต้นสำหรับเบราว์เซอร์ อย่าลืมทดสอบโค้ด เผื่อกรณีอื่นๆ
รูปแบบที่รับมาจะนำการจัดแนวข้อความเริ่มต้นออก
p.bullet {
text-align: left;
}
ขั้นตอนที่ 4
เมื่อคุณระบุและแก้ไขปัญหาเกี่ยวกับการช่วยเหลือพิเศษด้วยตนเองทั้งหมดที่ระบุไว้ในขั้นตอนก่อนหน้าแล้ว หน้าเว็บของคุณควรจะมีลักษณะคล้ายกับภาพหน้าจอของเรา
อาจเป็นไปได้ว่าคุณพบปัญหาเกี่ยวกับการช่วยเหลือพิเศษในการตรวจสอบด้วยตนเองมากกว่าที่เรากล่าวถึงในโมดูลนี้ เราจะสำรวจปัญหามากมายเหล่านี้ในโมดูลถัดไป
ขั้นตอนถัดไป
เยี่ยมไปเลย คุณได้ทำโมดูลการทดสอบอัตโนมัติและด้วยตนเองเสร็จสมบูรณ์แล้ว คุณสามารถดู CodePen ที่อัปเดตของเรา ซึ่งมีการใช้การแก้ไขการเข้าถึง แบบอัตโนมัติและแบบด้วยตนเองทั้งหมด
ไปที่โมดูลการทดสอบล่าสุดซึ่งมุ่งเน้นที่ การทดสอบเทคโนโลยีความช่วยเหลือพิเศษ
ตรวจสอบความเข้าใจ
ทดสอบความรู้ของคุณเกี่ยวกับการทดสอบการช่วยเหลือพิเศษด้วยตนเอง
องค์ประกอบใดต้องเป็นไปตามมาตรฐานคอนทราสต์ของสี WCAG