ข้อมูลเบื้องต้นเกี่ยวกับการทดสอบด้วยตนเอง
การทดสอบการช่วยเหลือพิเศษด้วยตนเองจะใช้การทดสอบแป้นพิมพ์ ภาพ และกระบวนการรู้คิด เครื่องมือ และเทคนิคต่างๆ เพื่อค้นหาปัญหาที่เครื่องมืออัตโนมัติทำไม่ได้ เนื่องจากเครื่องมืออัตโนมัติไม่ได้ครอบคลุมเกณฑ์ความสำเร็จทั้งหมดที่ระบุใน 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 ผ่านหน้า ระหว่างดำเนินการดังกล่าว คุณควรสังเกตเห็นว่าช่องป้อนข้อมูล แบบฟอร์มที่ใช้ในการสมัครรับจดหมายข่าวไม่ได้โฟกัส ระบบได้นำแท็บออกจากลำดับการโฟกัสตามปกติโดยดัชนีแท็บเชิงลบ
<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 นี้ ได้แก่ ลิงก์ พื้นหลัง และข้อความโดยรอบ
![ภาพหน้าจอของ WebAIM สำหรับข้อความลิงก์แสดงให้เห็นว่าลิงก์ไปยังข้อความเนื้อหาไม่ผ่านระดับ WCAG A](https://web.dev/static/learn/accessibility/test-manual/image/screenshot-webaim-link-d6607ee51a7f9.png?authuser=6&hl=th)
![ภาพหน้าจอของ WebAIM แสดงให้เห็นว่าการทดสอบทั้งหมดผ่านเมื่อลิงก์เป็นสีเขียว](https://web.dev/static/learn/accessibility/test-manual/image/screenshot-webaim-shows-a6f42f1c49134.png?authuser=6&hl=th)
ปัญหาที่ 4: คอนทราสต์ของสีไอคอน
อีกปัญหาหนึ่งที่พลาดคอนทราสต์ของสีก็คือไอคอนโซเชียลมีเดีย คุณได้เรียนรู้ว่าไอคอนที่จำเป็นต้องมีสีที่ตัดกับพื้นหลังแบบ 3:1 ในโมดูลสีและคอนทราสต์ แต่ในการสาธิต ไอคอนโซเชียลมีเดียมีอัตราส่วนคอนทราสต์อยู่ที่ 1.3:1
ไอคอนโซเชียลมีเดียจะเปลี่ยนเป็นสีเทาเข้มเพื่อให้เป็นไปตามข้อกำหนดด้านคอนทราสต์ของสีแบบ 3:1
![ภาพหน้าจอของการสาธิตซึ่งมีเครื่องมือวิเคราะห์สีแสดงคอนทราสต์ของสีไอคอนที่ไม่สำเร็จ](https://web.dev/static/learn/accessibility/test-manual/image/a-screenshot-the-demo-t-ea0c1b4ef7bcb.png?authuser=6&hl=th)
ปัญหาที่ 5: เลย์เอาต์เนื้อหา
ถ้าดูเลย์เอาต์ของเนื้อหาย่อหน้า จะเห็นว่าข้อความชิดขอบ ตามที่คุณได้เรียนรู้ในโมดูลการพิมพ์ การดำเนินการนี้จะสร้าง "แม่น้ำแห่งอวกาศ" ซึ่งอาจทำให้ผู้ใช้อ่านข้อความได้ยาก
p.bullet {
text-align: justify;
}
หากต้องการรีเซ็ตการจัดข้อความในการสาธิต คุณจะอัปเดตโค้ดเป็น text-align: left;
หรือนำบรรทัดดังกล่าวออกจาก CSS ไปเลยก็ได้ เนื่องจากทางซ้ายเป็นแนวการวางเริ่มต้นสำหรับเบราว์เซอร์ อย่าลืมทดสอบโค้ดหากสไตล์ที่รับช่วงมาอื่นๆ จะนำการจัดแนวข้อความเริ่มต้นออก
p.bullet {
text-align: left;
}
ขั้นตอนที่ 4
![ภาพหน้าจอเว็บไซต์สาธิต Medical Mysteries Club](https://web.dev/static/learn/accessibility/test-manual/image/screenshot-the-medical-m-6a48ef85663f8.png?authuser=6&hl=th)
เมื่อคุณระบุและแก้ไขปัญหาการเข้าถึงด้วยตนเองทั้งหมดดังที่ระบุไว้ในขั้นตอนก่อนหน้านี้แล้ว หน้าเว็บของคุณควรมีลักษณะคล้ายกับภาพหน้าจอของเรา
คุณอาจพบปัญหาการช่วยเหลือพิเศษในการตรวจสอบโดยเจ้าหน้าที่มากกว่าที่เรากล่าวถึงในโมดูลนี้ เราจะค้นพบเนื้อหาเหล่านี้จำนวนมากในโมดูลถัดไป
ขั้นตอนถัดไป
เยี่ยมไปเลย คุณศึกษาโมดูลการทดสอบแบบอัตโนมัติและแบบด้วยตนเองเสร็จสมบูรณ์แล้ว คุณสามารถดู CodePen ที่อัปเดตแล้ว ซึ่งมีการใช้การแก้ไขการเข้าถึงด้วยตนเองและแบบอัตโนมัติทั้งหมด
ไปที่โมดูลการทดสอบครั้งล่าสุดซึ่งมุ่งเน้นที่การทดสอบเทคโนโลยีความช่วยเหลือ
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับการทดสอบการช่วยเหลือพิเศษด้วยตนเอง
องค์ประกอบใดที่ต้องเป็นไปตามมาตรฐานคอนทราสต์ของสี WCAG