ทดสอบเว็บไซต์ Drupal สำหรับการเข้าถึงด้วย WCAG 2.1

เผยแพร่แล้ว: 2023-05-16

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

ในฐานะนักพัฒนา Drupal คุณมีอำนาจที่จะสร้างความแตกต่างได้ด้วยการทำให้ไซต์ของคุณเป็นไปตามหลักเกณฑ์การเข้าถึงเนื้อหาเว็บ (WCAG) ในบล็อกนี้ เราจะสำรวจคุณลักษณะหลักและแนวทางปฏิบัติที่ดีที่สุดสำหรับการทดสอบการช่วยสำหรับการเข้าถึง WCAG 2.1 ใน Drupal เพื่อให้คุณสามารถสร้างเว็บไซต์ที่ครอบคลุมสำหรับผู้ใช้ทั้งหมด

การช่วยสำหรับการเข้าถึงคืออะไร (A11y)

การช่วยสำหรับการเข้าถึงหมายถึงการทำให้เว็บไซต์ใช้งานได้โดยผู้คนจำนวนมากที่สุดเท่าที่จะเป็นไปได้ โดยเฉพาะอย่างยิ่งเกี่ยวกับผู้ทุพพลภาพ A11y หมายถึงอะไร? A11y หมายถึงคำว่า "Accessibility" โดยที่ 11 หมายถึงจำนวนอักขระที่อยู่ระหว่าง "A" และ "Y"

WCAG และต้นกำเนิด

WCAG ย่อมาจาก Web Content Accessibility Guideline ถือเป็นเกณฑ์มาตรฐานสำหรับการเข้าถึงเว็บไซต์ หลักเกณฑ์ของ WCAG สร้างขึ้นโดย World Wide Web Consortium (W3C) เป็นวิธีที่ดีที่สุดและง่ายที่สุดในการทำให้เว็บไซต์ของคุณใช้งานได้สำหรับทุกคน รัฐบาลและองค์กรด้านการดูแลสุขภาพส่วนใหญ่ปฏิบัติตามหลักเกณฑ์ของ WCAG อย่างเคร่งครัด เพื่อให้แน่ใจว่าเว็บไซต์เป็นไปตามกฎหมายการเข้าถึง (เช่น มาตรา 508)

หลักการของ WCAG

มีหลักการหลักสี่ประการเกี่ยวกับความสามารถในการเข้าถึง หากคุณต้องการนำการปฏิบัติตามข้อกำหนดของ WCAG มาใช้ สิ่งเหล่านี้ตามด้วยตัวย่อ 'POUR' ซึ่งย่อมาจาก Perceivable, Operable, Understandable และ Robust

รับรู้ได้

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

ใช้งานได้

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

เข้าใจได้

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

แข็งแกร่ง

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

ทำไมคุณจึงควรปฏิบัติตาม WCAG

ด้านล่างนี้คือข้อดีบางประการของการนำ WCAG ไปใช้

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

เกณฑ์ความสำเร็จ WCAG 2.0/2.1: นำไปใช้อย่างแพร่หลายที่สุด

ทุกช่องใส่ข้อมูลบนไซต์มีป้ายกำกับที่เหมาะสม
เนื้อหาการตกแต่งถูกนำมาใช้ในลักษณะที่เทคโนโลยีอำนวยความสะดวกสามารถมองข้ามได้ ตัวอย่างเช่น รูปภาพตกแต่งจะถูกละเว้นโดยโปรแกรมอ่านหน้าจอ
มีคำบรรยายสำหรับเนื้อหาเสียง/วิดีโอที่บันทึกไว้ล่วงหน้าทั้งหมด
มีการตีความภาษามือสำหรับเนื้อหาเสียง
ลำดับของเนื้อหาที่มีความหมาย เช่น ส่วนหัวของหน้าใดๆ จะถูกวางตามลำดับ
ผู้ใช้สามารถหยุดชั่วคราวหรือหยุดเสียงหรือควบคุมระดับเสียงโดยไม่ขึ้นกับระดับเสียงของระบบโดยรวมสำหรับการเล่นวิดีโอโดยอัตโนมัติ
อัตราส่วนคอนทราสต์ของข้อความและรูปภาพของข้อความคือ 4.5:1 และข้อความและรูปภาพขนาดใหญ่คือ 3:1 อัตราส่วนคอนทราสต์ใช้ไม่ได้กับเนื้อหาเพื่อการตกแต่งหรือโลโก้หรือชื่อแบรนด์
เสียงพื้นหลังต่ำหรือไม่มีเลย เสียง/วิดีโอที่บันทึกไว้ล่วงหน้าไม่มีเสียงรบกวนรอบข้าง
ฟังก์ชันทั้งหมดของเนื้อหาสามารถเข้าถึงได้ผ่านทางอินเทอร์เฟซแป้นพิมพ์ จะไม่มีกับดักคำหลัก
ให้ผู้ใช้มีเวลาเพียงพอในการอ่านและใช้เนื้อหา
หากเนื้อหาเป็นแบบตามเวลา ผู้ใช้สามารถหยุดชั่วคราวหรือปรับข้อจำกัดของเวลาได้
ในกรณีของเนื้อหาที่เคลื่อนไหวอย่างรวดเร็ว เช่น ภาพหมุนอัตโนมัติ ผู้ใช้จะเห็นตัวเลือกในการหยุดชั่วคราวหรือหยุดเนื้อหานั้น
เมื่อเซสชันของผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์หมดอายุ ผู้ใช้จะสามารถใช้งานเซสชันต่อได้โดยไม่สูญเสียข้อมูลหลังการตรวจสอบสิทธิ์อีกครั้ง
ชื่อหน้า ส่วนหัว และป้ายกำกับจะอธิบายหัวข้อของหน้าเว็บ
โฟกัสของแป้นพิมพ์สามารถมองเห็นและเน้นได้ดี
ส่วนประกอบที่โฟกัสได้จะได้รับโฟกัสตามลำดับที่สื่อถึงความหมายและความสามารถในการปฏิบัติงาน
แต่ละส่วนของหน้าเว็บจะมาพร้อมกับส่วนหัวของส่วนนั้นๆ
ยกเว้นภาพตกแต่ง ภาพทั้งหมดมี Alt text ที่มีความหมาย
เสียง วิดีโอ ฟอร์ม เมนูดรอปดาวน์ ข้อความยึด URL และข้อความแสดงแทนสามารถเข้าถึงได้จากแป้นพิมพ์และโปรแกรมอ่านหน้าจอ
ความชัดเจนของเนื้อหาจะปรับตามระดับการซูมของหน้า มองเห็นเนื้อหาได้ชัดเจนแม้ในระดับการซูมสูงสุด
เมนูส่วนหัวและส่วนท้ายพร้อมบริบทความช่วยเหลือควรมีอยู่ในทุกหน้าทั่วทั้งไซต์
ไซต์มีการใช้งานโฮเวอร์และสถานะโฟกัสที่เหมาะสม

โปรแกรมอ่านหน้าจอ

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

ผลิตภัณฑ์แบบชำระเงิน เช่น JAWS (Windows) และ Dolphin Screen Reader (Windows)
ฟรีแวร์เช่น NVDA (Windows), ChromeVox (Chrome) และ Orca (Linux)
ซอฟต์แวร์ในตัว OS (ระบบปฏิบัติการ) เช่น VoiceOver (macOS, iPadOS, iOS), โปรแกรมผู้บรรยาย (Windows), ChromeVox (บน Chrome OS) และ TalkBack (Android)

การเข้าถึงสามระดับ

WCAG 2.1 มีเกณฑ์ความสำเร็จ 3 ระดับ

ระดับ A: ตรงตามเกณฑ์ความสำเร็จที่จำเป็นทั้ง 30 ข้อที่กำหนดไว้ใน WCAG 2.0 อย่างน้อยที่สุด เว็บไซต์ทั้งหมดควรปฏิบัติตามข้อกำหนดในระดับนี้
ระดับ AA: เป็นไปตามเกณฑ์ความสำเร็จระดับ A ทั้งหมด และเป็นไปตามเกณฑ์ความสำเร็จในการเข้าถึงเพิ่มเติมอีก 28 รายการ ระดับนี้บรรลุสเปกตรัมการเข้าถึงที่กว้างขึ้นและมักจะเป็นเป้าหมายสำหรับทีมพัฒนาส่วนใหญ่เพื่อให้บรรลุ
ระดับ AAA: เว็บไซต์ควรผ่านเกณฑ์ความสำเร็จทั้งสามระดับ รวมถึงเกณฑ์ความสำเร็จเพิ่มเติมอีก 28 เกณฑ์ โดยทั่วไปแล้วระดับนี้สงวนไว้สำหรับไซต์พิเศษ เช่น องค์กรของรัฐ

ไซต์ที่เข้ากันได้กับ WCAG ส่วนใหญ่อยู่ภายใต้เกณฑ์ความสำเร็จของการเข้าถึงระดับ A หรือ AA

การทดสอบการเข้าถึงเว็บไซต์ Drupal

ต่อไปนี้เป็นขั้นตอนในการทดสอบการเข้าถึงสำหรับเว็บไซต์ Drupal

เรียกใช้การตรวจสอบ Google Chrome Lighthouse และแก้ไขปัญหาการเข้าถึงที่เน้นไว้
เรียกใช้การตรวจสอบเครื่องมือ Wave
ตรวจสอบโฟกัสการเน้นแป้นพิมพ์และลำดับแท็บของหน้าด้วยตนเอง
ตรวจสอบความถูกต้องของหน้าด้วยซอฟต์แวร์ตัวอ่านหน้าจอที่จำเป็น ตัวอย่างเช่น VoiceOver
ตรวจสอบการช่วยสำหรับการเข้าถึงไซต์บนความละเอียดทั้งหมด เช่น เดสก์ท็อปแบบกว้าง แล็ปท็อป แท็บ และอุปกรณ์เคลื่อนที่
ตรวจสอบรหัสไซต์โดยใช้เครื่องมือตรวจสอบความถูกต้องของ W3C สำหรับ Markup และ CSS
ตรวจสอบคอนทราสต์ของสีของไซต์เพื่อให้แน่ใจว่าตรงตามมาตรฐาน (4:5:1) โดยใช้เครื่องมือส่วนขยายของ Chrome เช่น Kontrast หรือแอปพลิเคชันอย่าง Color Contrast Analyzer

Drupal ช่วยให้บรรลุมาตรฐานการเข้าถึงได้อย่างไร

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

1. สร้างการเข้าถึงใน Drupal

เป้าหมายของทีมพัฒนา Drupal คือการสร้างแพลตฟอร์มที่มีผู้ใช้มากที่สุดเท่าที่จะเป็นไปได้ แนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) 2.1 ข้อกำหนดระดับ AA ปฏิบัติตามเมื่อพัฒนาแพลตฟอร์ม Drupal หลัก สิ่งนี้บ่งชี้ว่าความพิการต่างๆ เช่น ความพิการที่ส่งผลต่อระบบการมองเห็น การได้ยิน ร่างกาย วาจา ความรู้ความเข้าใจ และระบบประสาท สามารถเข้าถึงเว็บไซต์ Drupal ได้

2. คุณสมบัติการเข้าถึงเริ่มต้น

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

3. Drupal ให้บริการปลั๊กอินและโมดูลสำหรับการเข้าถึง

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

Editoria11y ตัวตรวจสอบการช่วยสำหรับการเข้าถึง: โมดูลนี้ตรวจสอบเว็บไซต์เพื่อหาปัญหาเกี่ยวกับการช่วยสำหรับการเข้าถึง และให้คำแนะนำสำหรับวิธีแก้ปัญหา
ปลั๊กอินการช่วยสำหรับการเข้าถึง CKEditor: ส่วนเสริมนี้ช่วยปรับปรุงการเข้าถึงของโปรแกรมแก้ไขข้อความที่ใช้กันอย่างแพร่หลายสำหรับ Drupal, CKEditor
วิดเจ็ตการช่วยสำหรับการเข้าถึงแบบครบวงจร: โมดูลนี้มีวิดเจ็ตการช่วยสำหรับการเข้าถึงที่ช่วยให้ผู้ใช้สามารถเปลี่ยนขนาดข้อความ คอนทราสต์ และการตั้งค่าที่เกี่ยวข้องกับการช่วยสำหรับการเข้าถึงอื่นๆ ของเว็บไซต์
A11Y: ตัวช่วยแบบฟอร์ม: โมดูลนี้ช่วยทำให้เว็บฟอร์มของ Drupal ทั้งหมดตรงตามมาตรฐานการเข้าถึง
บล็อก ARIA Landmark Roles: โมดูลนี้เพิ่มองค์ประกอบเพิ่มเติมในแบบฟอร์มการกำหนดค่าบล็อกที่อนุญาตให้ผู้ใช้กำหนดบทบาทแลนด์มาร์ค ARIA และ/หรือป้ายกำกับ ARIA ให้กับบล็อก

4. การสนับสนุนจากชุมชนที่แข็งแกร่งสำหรับการเข้าถึง

นักพัฒนาและนักออกแบบที่มุ่งมั่นในการเข้าถึงได้เป็นส่วนสำคัญของชุมชน Drupal ความพยายามที่นำโดยชุมชนเพื่อทำให้ Drupal เข้าถึงได้มากขึ้นสำหรับผู้ทุพพลภาพคือ Drupal Accessibility Group กลุ่มนำเสนอคำแนะนำ เครื่องมือ และแนวทางปฏิบัติที่ดีที่สุดสำหรับการพัฒนาเว็บไซต์ Drupal ที่สอดคล้องกับ ADA

อ้างอิง:

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

ความคิดสุดท้าย

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