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

พื้นฐานของการทดสอบด้วยตนเอง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การตรวจสอบด้วยสายตาจะบอกสิ่งต่อไปนี้

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

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

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

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

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

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

การสาธิต: การทดสอบด้วยตนเอง

จนถึงตอนนี้ เราได้ทำการทดสอบอัตโนมัติในหน้าเว็บสาธิต และพบและแก้ไขปัญหา 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 ที่อัปเดตแล้ว ของเรา ซึ่งมีการแก้ไขการเข้าถึงแบบอัตโนมัติและการเข้าถึงด้วยตนเองทั้งหมด

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