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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

มาแก้ปัญหานี้กัน

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

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>

ขั้นตอนที่ 3

เมื่อตรวจสอบโฟกัสของแป้นพิมพ์แล้ว เราจะไปที่การตรวจสอบภาพและเนื้อหา

ปัญหาที่ 3: คอนทราสต์ของสีลิงก์

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

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