การทดสอบการเข้าถึงด้วยตนเอง

ข้อมูลเบื้องต้นเกี่ยวกับการทดสอบด้วยตนเอง

การทดสอบการช่วยเหลือพิเศษด้วยตนเองจะใช้การทดสอบแป้นพิมพ์ ภาพ และกระบวนการรู้คิด เครื่องมือ และเทคนิคต่างๆ เพื่อค้นหาปัญหาที่เครื่องมืออัตโนมัติทำไม่ได้ เนื่องจากเครื่องมืออัตโนมัติไม่ได้ครอบคลุมเกณฑ์ความสำเร็จทั้งหมดที่ระบุใน WCAG จึงมีความจำเป็นที่คุณต้องไม่ใช้การทดสอบการช่วยเหลือพิเศษแบบอัตโนมัติและหยุดการทดสอบไป

ในขณะที่เทคโนโลยีก้าวหน้าไปมากขึ้น เครื่องมืออัตโนมัติเพียงอย่างเดียวก็ครอบคลุมการทดสอบได้มากขึ้น แต่ปัจจุบันคุณจำเป็นต้องเพิ่มทั้งการตรวจสอบด้วยเทคโนโลยีความช่วยเหลือพิเศษและการตรวจสอบด้วยตนเองลงในโปรโตคอลการทดสอบเพื่อให้ครอบคลุมจุดตรวจสอบ WCAG ทั้งหมดที่เกี่ยวข้อง

ข้อดีของการทดสอบการช่วยเหลือพิเศษด้วยตนเองมีดังนี้

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

ข้อเสียของการทดสอบการช่วยเหลือพิเศษด้วยตนเอง

  • ซับซ้อนและใช้เวลามากกว่าการทดสอบอัตโนมัติ
  • อาจทำซ้ำในวงกว้างได้ยาก
  • ต้องใช้ความเชี่ยวชาญด้านการช่วยเหลือพิเศษเพิ่มเติมเพื่อทำการทดสอบและตีความผลลัพธ์

มาเปรียบเทียบกันว่าองค์ประกอบการช่วยเหลือพิเศษและรายละเอียดใดบ้างที่เครื่องมืออัตโนมัติตรวจจับได้ในขณะนี้กับองค์ประกอบที่ตรวจไม่พบ

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


ประเภทการทดสอบด้วยตนเอง

มีเครื่องมือและเทคนิคที่ต้องดำเนินการด้วยตนเองหลายอย่างซึ่งคุณควรพิจารณาเมื่อดูหน้าเว็บหรือแอปสำหรับการช่วยเหลือพิเศษแบบดิจิทัล จุดมุ่งเน้น 3 ด้านที่ใหญ่ที่สุดในการทดสอบด้วยตนเองคือ ฟังก์ชันแป้นพิมพ์ การตรวจสอบที่เน้นภาพ และการตรวจสอบเนื้อหาทั่วไป

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

การตรวจสอบแป้นพิมพ์

มีการประมาณไว้ว่าประมาณ 25% ของปัญหาการช่วยเหลือพิเศษทั้งหมดในโลกดิจิทัลนั้นเกี่ยวข้องกับการขาดการรองรับแป้นพิมพ์ ตามที่เราได้เรียนรู้ในโมดูลโฟกัสแป้นพิมพ์ การเปลี่ยนแปลงนี้จะส่งผลต่อผู้ใช้ทุกประเภท ได้แก่ ผู้ใช้ที่มีความบกพร่องทางการมองเห็นเฉพาะแป้นพิมพ์ ผู้ใช้โปรแกรมอ่านหน้าจอที่มีสายตาเลือนราง/ตาบอด และผู้ที่ใช้ซอฟต์แวร์การรู้จำเสียงที่ใช้เทคโนโลยีที่อาศัยเนื้อหาซึ่งสามารถเข้าถึงจากแป้นพิมพ์ได้เช่นกัน

การทดสอบแป้นพิมพ์จะตอบคำถามต่างๆ เช่น

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

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

คีย์ ผลลัพธ์
Tab เลื่อนไปข้างหน้าองค์ประกอบหนึ่งที่ใช้งานอยู่ไปยังอีกองค์ประกอบหนึ่ง
Shift + Tab ย้ายองค์ประกอบที่ใช้งานอยู่ข้างหลังไปยังอีกองค์ประกอบหนึ่ง
ลูกศร วนผ่านตัวควบคุมที่เกี่ยวข้อง
Spacebar สลับสถานะและเลื่อนลงไปด้านล่างของหน้า
Shift + Spacebar เลื่อนหน้าขึ้น
Enter ทริกเกอร์การควบคุมที่เฉพาะเจาะจง
Escape ปิดวัตถุที่แสดงแบบไดนามิก

การตรวจสอบด้วยภาพ

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

การตรวจสอบด้วยภาพจะให้ข้อมูลต่อไปนี้

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

การตรวจสอบเนื้อหา

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

การตรวจสอบเนื้อหาจะตอบคำถามต่างๆ ได้ เช่น

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

การตรวจสอบเนื้อหาบางอย่างอาจทำงานอัตโนมัติได้บางส่วน ตัวอย่างเช่น คุณสามารถเขียนโปรแกรมวิเคราะห์โค้ด 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 ลิงก์ที่ซ่อนอยู่ในย่อหน้าเกี่ยวกับภาวะทางการแพทย์ที่แตกต่างกัน

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

มาแก้ไขกัน

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

หากคุณเลือกที่จะไม่เพิ่มเส้นใต้ คุณจะต้องแก้ไขสีให้เป็นไปตามข้อกำหนดของทั้งพื้นหลังและสำเนา

เมื่อดูการสาธิตโดยใช้เครื่องมือตรวจสอบคอนทราสต์ของลิงก์ คุณจะเห็นว่าสีลิงก์เป็นไปตามข้อกำหนดด้านคอนทราสต์ของสี 4.5:1 ระหว่างข้อความขนาดปกติและพื้นหลัง อย่างไรก็ตาม ลิงก์ที่ไม่ขีดเส้นใต้ต้องเป็นไปตามข้อกำหนดเกี่ยวกับคอนทราสต์ของสีแบบ 3:1 กับข้อความโดยรอบด้วย

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

ภาพหน้าจอของ WebAIM สำหรับข้อความลิงก์แสดงให้เห็นว่าลิงก์ไปยังข้อความเนื้อหาไม่ผ่านระดับ WCAG A
เมื่อลิงก์และข้อความเนื้อหาเหมือนกัน การทดสอบจะล้มเหลว
ภาพหน้าจอของ WebAIM แสดงให้เห็นว่าการทดสอบทั้งหมดผ่านเมื่อลิงก์เป็นสีเขียว
เมื่อลิงก์และข้อความเนื้อหาแตกต่างกัน จะผ่านการทดสอบ

ปัญหาที่ 4: คอนทราสต์ของสีไอคอน

อีกปัญหาหนึ่งที่พลาดคอนทราสต์ของสีก็คือไอคอนโซเชียลมีเดีย คุณได้เรียนรู้ว่าไอคอนที่จำเป็นต้องมีสีที่ตัดกับพื้นหลังแบบ 3:1 ในโมดูลสีและคอนทราสต์ แต่ในการสาธิต ไอคอนโซเชียลมีเดียมีอัตราส่วนคอนทราสต์อยู่ที่ 1.3:1

มาแก้ไขกัน

ไอคอนโซเชียลมีเดียจะเปลี่ยนเป็นสีเทาเข้มเพื่อให้เป็นไปตามข้อกำหนดด้านคอนทราสต์ของสีแบบ 3:1

ภาพหน้าจอของการสาธิตซึ่งมีเครื่องมือวิเคราะห์สีแสดงคอนทราสต์ของสีไอคอนที่ไม่สำเร็จ

ปัญหาที่ 5: เลย์เอาต์เนื้อหา

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

p.bullet {
   text-align: justify;
}
มาแก้ปัญหากัน

หากต้องการรีเซ็ตการจัดข้อความในการสาธิต คุณจะอัปเดตโค้ดเป็น text-align: left; หรือนำบรรทัดดังกล่าวออกจาก CSS ไปเลยก็ได้ เนื่องจากทางซ้ายเป็นแนวการวางเริ่มต้นสำหรับเบราว์เซอร์ อย่าลืมทดสอบโค้ดหากสไตล์ที่รับช่วงมาอื่นๆ จะนำการจัดแนวข้อความเริ่มต้นออก

p.bullet {
   text-align: left;
}

ขั้นตอนที่ 4

ภาพหน้าจอเว็บไซต์สาธิต Medical Mysteries Club
ตอนนี้เราได้แก้ไขปัญหาทั้งหมดที่ต้องดำเนินการด้วยตนเองในการสาธิตดังที่แสดงในรูปภาพนี้

เมื่อคุณระบุและแก้ไขปัญหาการเข้าถึงด้วยตนเองทั้งหมดดังที่ระบุไว้ในขั้นตอนก่อนหน้านี้แล้ว หน้าเว็บของคุณควรมีลักษณะคล้ายกับภาพหน้าจอของเรา

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

ขั้นตอนถัดไป

เยี่ยมไปเลย คุณศึกษาโมดูลการทดสอบแบบอัตโนมัติและแบบด้วยตนเองเสร็จสมบูรณ์แล้ว คุณสามารถดู CodePen ที่อัปเดตแล้ว ซึ่งมีการใช้การแก้ไขการเข้าถึงด้วยตนเองและแบบอัตโนมัติทั้งหมด

ไปที่โมดูลการทดสอบครั้งล่าสุดซึ่งมุ่งเน้นที่การทดสอบเทคโนโลยีความช่วยเหลือ

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับการทดสอบการช่วยเหลือพิเศษด้วยตนเอง

องค์ประกอบใดที่ต้องเป็นไปตามมาตรฐานคอนทราสต์ของสี WCAG

ไอคอน
ไอคอนต้องเป็นไปตามมาตรฐานคอนทราสต์ของสี แต่ไม่ใช่เพียงตัวเลือกเดียว
ส่วนหัว
ส่วนหัวต้องเป็นไปตามมาตรฐานคอนทราสต์ของสี แต่ไม่ใช่แค่ตัวเลือกเดียว
ข้อความเนื้อหา
ข้อความส่วนเนื้อหาต้องเป็นไปตามมาตรฐานคอนทราสต์ของสี แต่นั่นไม่ใช่ตัวเลือกเดียว
ทุกข้อที่กล่าวมา
ทุกองค์ประกอบควรตรงตามมาตรฐานความคมชัดที่เขียนโดย WCAG