การทดสอบการเข้าถึง: color-contrast และโฟกัส
ตรวจสอบอัตราความเปรียบต่างของสี และยืนยันว่าตัวบ่งชี้โฟกัสเป็นไปตามมาตรฐานการเข้าถึงของ WCAG
การทดสอบการเข้าถึง: color-contrast และโฟกัส เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใด CSS จึงส่งผลต่อการเข้าถึง
CSS ควบคุมคอนทราสต์ของสี การมองเห็นตัวบ่งชี้โฟกัส การมองเห็นองค์ประกอบ (display:none จะนำองค์ประกอบออกจากแผนผังการเข้าถึง) และลำดับการอ่าน (การจัดลำดับภาพใหม่ด้วยลำดับของ flexbox เทียบกับลำดับใน DOM) การเลือกใช้ CSS ส่งผลโดยตรงว่าผู้ใช้ที่มีความพิการจะสามารถใช้งานส่วนติดต่อได้หรือไม่
ข้อกำหนดคอนทราสต์สีของ WCAG
WCAG 2.1 AA กำหนดให้อัตราคอนทราสต์สำหรับข้อความขนาดปกติเป็น 4.5:1 และสำหรับข้อความขนาดใหญ่เป็น 3:1 (ตัวหนาขนาด 18px ขึ้นไป หรือขนาดปกติ 24px ขึ้นไป) AAA กำหนดอัตราไว้ที่ 7:1 และ 4.5:1 ตามลำดับ อัตราเหล่านี้เปรียบเทียบความสว่างของสีข้อความด้านหน้ากับความสว่างของสีพื้นหลัง
การตรวจสอบคอนทราสต์ใน DevTools
คลิกองค์ประกอบข้อความใดก็ได้ใน DevTools → แผงสไตล์ ช่องตัวอย่างสีจะแสดงป้ายอัตราคอนทราสต์ เครื่องหมายถูกหมายถึงผ่าน ส่วนเครื่องหมาย X หมายถึงไม่ผ่าน เครื่องมือเลือกสีจะแสดงเส้นเกณฑ์ AA/AAA บนไล่ระดับสี
การทดสอบคอนทราสต์แบบอัตโนมัติ
axe-core, Lighthouse และ Pa11y จะตรวจสอบอัตราคอนทราสต์ขององค์ประกอบข้อความทั้งหมดโดยอัตโนมัติ เรียกใช้ axe-core ร่วมกับ @axe-core/react ในระหว่างการพัฒนา เพื่อรับคำเตือนคอนทราสต์แบบเรียลไทม์ในคอนโซลของเบราว์เซอร์
ตัวบ่งชี้โฟกัส
CSS outline: none หรือ outline: 0 บน :focus จะนำวงแหวนโฟกัสเริ่มต้นของเบราว์เซอร์ออก ทำให้การนำทางด้วยแป้นพิมพ์มองไม่เห็น นี่เป็นความล้มเหลวด้านการเข้าถึงที่ร้ายแรง ควรแทนที่ด้วยสไตล์โฟกัสแบบกำหนดเองที่มองเห็นได้ แทนการลบตัวบ่งชี้โฟกัสออกทั้งหมด
<button autofocus>Keyboard-focused button</button>
:focus-visible เทียบกับ :focus
:focus มีผลกับเหตุการณ์โฟกัสทั้งหมด รวมถึงการคลิกเมาส์ (ทำให้มีวงแหวนปรากฏเมื่อคลิก ซึ่งนักออกแบบมักไม่ชอบ) ส่วน :focus-visible มีผลเฉพาะเมื่อเบราว์เซอร์ตรวจพบว่ากำลังใช้การนำทางด้วยแป้นพิมพ์ จึงแสดงวงแหวนโฟกัสให้ผู้ใช้แป้นพิมพ์เห็น โดยไม่แสดงเมื่อคลิกด้วยเมาส์
ข้อกำหนดตัวบ่งชี้โฟกัสของ WCAG
WCAG 2.2 เพิ่มเกณฑ์ความสำเร็จ 2.4.11 (ลักษณะโฟกัสระดับ AA): ตัวบ่งชี้โฟกัสต้องมีคอนทราสต์อย่างน้อย 3:1 เมื่อเทียบกับสีที่อยู่ติดกัน และต้องล้อมรอบเส้นรอบรูปของคอมโพเนนต์ สไตล์โฟกัสแบบกำหนดเองต้องเป็นไปตามข้อกำหนดเหล่านี้ ไม่ใช่เพียงมีอยู่เท่านั้น
โหมดสีที่บังคับใช้
โหมดคอนทราสต์สูงของ Windows จะแทนที่สี CSS ด้วยสีระบบที่ผู้ใช้กำหนด ใช้ @media (forced-colors: active) เพื่อจัดเตรียมสไตล์ทางเลือกที่ทำงานในโหมดคอนทราสต์สูง ทดสอบได้ที่การตั้งค่า Windows → การเข้าถึง → คอนทราสต์สูง
การใช้สีเป็นตัวบ่งชี้เพียงอย่างเดียว
WCAG 1.4.1 ห้ามใช้สีเป็นวิธีเดียวในการสื่อข้อมูล สถานะข้อผิดพลาดที่เปลี่ยนเป็นสีแดงเพียงอย่างเดียวไม่ผ่านเกณฑ์นี้ ควรใช้สีร่วมกับไอคอน ป้ายข้อความ รูปแบบ หรือตัวขีดเส้นใต้ เพื่อให้มีข้อมูลที่ไม่ขึ้นอยู่กับสีอยู่เสมอ
การปรับขนาดและระยะห่างของข้อความ
WCAG 1.4.4 กำหนดให้ปรับขนาดข้อความได้ถึง 200% โดยไม่สูญเสียเนื้อหา WCAG 1.4.12 กำหนดว่าการแทนที่ระยะห่างของข้อความ (การเพิ่มระยะห่างระหว่างตัวอักษรและความสูงบรรทัด) ต้องไม่ทำให้เค้าโครงเสียหาย ใช้หน่วยสัมพัทธ์ (rem, em) สำหรับตัวอักษรเพื่อรองรับข้อกำหนดทั้งสอง
ชุดเครื่องมือการทดสอบ
ตรวจสอบความรู้
เหตุใด outline: none จึงไม่ควรเป็น CSS สุดท้ายสำหรับสถานะ :focus ขององค์ประกอบ
สรุป
การทดสอบ CSS ด้านการเข้าถึงครอบคลุมอัตราคอนทราสต์สี (ขั้นต่ำ 4.5:1 สำหรับ AA) ตัวบ่งชี้โฟกัสที่มองเห็นได้และเป็นไปตาม WCAG 2.2 โดยใช้ :focus-visible การหลีกเลี่ยงการใช้สีเป็นตัวสื่อข้อมูลเพียงอย่างเดียว การรองรับโหมด forced-colors และการใช้หน่วยตัวอักษรแบบสัมพัทธ์เพื่อให้ปรับขนาดได้ตามข้อกำหนด เครื่องมืออัตโนมัติร่วมกับการทดสอบแป้นพิมพ์ด้วยตนเองช่วยให้ครอบคลุมได้อย่างครบถ้วน
คำถามที่พบบ่อย
บทเรียน “การทดสอบการเข้าถึง: color-contrast และโฟกัส” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การทดสอบการเข้าถึง: color-contrast และโฟกัส” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การทดสอบการเข้าถึง: color-contrast และโฟกัส”
ตรวจสอบอัตราความเปรียบต่างของสี และยืนยันว่าตัวบ่งชี้โฟกัสเป็นไปตามมาตรฐานการเข้าถึงของ WCAG คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การทดสอบการเข้าถึง: color-contrast และโฟกัส” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- แนวคิดการทดสอบการถดถอยทางภาพ
- Percy และ Chromatic สำหรับ Storybook
- การทดสอบหน่วย CSS ด้วย Jest
- การทดสอบการเข้าถึง: color-contrast และโฟกัส