ส่วนเพิ่มเติมใน 2.2: ลักษณะโฟกัสและขนาดเป้าหมาย
ใช้เกณฑ์ที่เพิ่มเข้ามาในรุ่นล่าสุด
ส่วนเพิ่มเติมใน 2.2: ลักษณะโฟกัสและขนาดเป้าหมาย เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
สิ่งที่ 2.2 เพิ่มเข้ามา
WCAG 2.2 เพิ่มเกณฑ์ความสำเร็จใหม่เก้าข้อในปี 2023 โดยสองข้อที่ใช้ได้จริงกับส่วนติดต่อผู้ใช้ในชีวิตประจำวันคือ ลักษณะโฟกัสและขนาดเป้าหมาย
อย่าให้โฟกัสถูกบัง
กฎใหม่2.4.11 (โฟกัสไม่ถูกบัง) ระดับ AA ระบุว่าองค์ประกอบที่มีโฟกัสต้องไม่ถูกส่วนหัวแบบติดค้างหรือแถบคุกกี้บังจนมิด
เหตุใดโฟกัสที่ถูกบังจึงเป็นปัญหา
หากแบนเนอร์แบบติดค้างบังตัวควบคุมที่มีโฟกัส ผู้ใช้แป้นพิมพ์จะไม่รู้ว่าตนอยู่ที่ใด ผู้ใช้ต้องมองเห็นรายการที่เพิ่งกด Tab ไปถึง
ลักษณะโฟกัสในระดับ AAA
เกณฑ์2.4.13 (ลักษณะโฟกัส) เป็นข้อกำหนดระดับ AAA โดยกำหนดพื้นที่ตัวบ่งชี้ขั้นต่ำและความเปรียบต่าง 3:1 เพื่อให้เห็นกรอบโฟกัสได้อย่างชัดเจน
ขนาดเป้าหมาย (ขั้นต่ำ)
กฎระดับ AA 2.5.8 (ขนาดเป้าหมายขั้นต่ำ) กำหนดให้เป้าหมายสำหรับการแตะมีขนาดอย่างน้อย 24 คูณ 24 พิกเซล CSS หรือมีระยะห่างรอบ ๆ เพียงพอ
เหตุใดจึงเป็น 24 พิกเซล
เป้าหมายขนาดเล็กใช้งานยากสำหรับผู้ที่มีอาการสั่นหรือนิ้วมือใหญ่ ขนาดขั้นต่ำ24pxช่วยลดการแตะพลาดโดยไม่ทำให้การออกแบบทุกส่วนดูใหญ่เทอะทะ
ข้อยกเว้นด้านระยะห่าง
เป้าหมายที่เล็กกว่า 24px ยังผ่านได้ หากวงกลม24pxรอบจุดกึ่งกลางไม่ทับซ้อนกับเป้าหมายข้างเคียง การเพิ่มระยะห่างช่วยชดเชยขนาดที่เล็กได้
กำหนดขนาดเป้าหมายด้วย CSS
กำหนดขนาดขั้นต่ำจริงให้ปุ่มขนาดเล็ก เพื่อให้มีขนาดเกินขั้นต่ำ 24px ได้อย่างสบาย
button {
min-width: 24px;
min-height: 24px;
}ลิงก์ในบรรทัดได้รับการยกเว้น
ลิงก์ที่อยู่ในประโยคได้รับการยกเว้นจาก2.5.8 เพราะการย่อข้อความเพื่อขยายพื้นที่ลิงก์จะทำให้ประสบการณ์การอ่านแย่ลง
ความช่วยเหลือที่สม่ำเสมอ: 3.2.6
ข้อกำหนดใหม่อีกข้อของ 2.2 คือ3.2.6 (ความช่วยเหลือที่สม่ำเสมอ) ระดับ A ซึ่งทำให้ลิงก์ช่วยเหลือและข้อมูลติดต่ออยู่ในตำแหน่งสัมพัทธ์เดิมในทุกหน้า
การกรอกข้อมูลซ้ำ: 3.3.7
เกณฑ์3.3.7 (การกรอกข้อมูลซ้ำ) ระดับ A ระบุว่าอย่าให้ผู้ใช้พิมพ์ข้อมูลที่เคยให้ไปแล้วซ้ำ เว้นแต่ข้อมูลนั้นจำเป็น เช่น รหัสผ่าน
ตรวจสอบอย่างรวดเร็ว
จดจำขนาดขั้นต่ำของเป้าหมายสำหรับการสัมผัสตาม WCAG 2.2
ทบทวน: ข้อเพิ่มเติมใน 2.2
2.2 เพิ่มกฎเกี่ยวกับโฟกัสและเป้าหมาย: ทำให้โฟกัสมองเห็นได้ กำหนดเป้าหมายขนาด 24px หรือเว้นระยะให้ดี และหยุดการกรอกข้อมูลซ้ำ ต่อไป: การลากและการยืนยันตัวตน 🎯
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “ส่วนเพิ่มเติมใน 2.2: ลักษณะโฟกัสและขนาดเป้าหมาย” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ส่วนเพิ่มเติมใน 2.2: ลักษณะโฟกัสและขนาดเป้าหมาย” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ส่วนเพิ่มเติมใน 2.2: ลักษณะโฟกัสและขนาดเป้าหมาย”
ใช้เกณฑ์ที่เพิ่มเข้ามาในรุ่นล่าสุด คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ส่วนเพิ่มเติมใน 2.2: ลักษณะโฟกัสและขนาดเป้าหมาย” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- A, AA, AAA: เลือกระดับเป้าหมายที่เหมาะสม
- ส่วนเพิ่มเติมใน 2.2: ลักษณะโฟกัสและขนาดเป้าหมาย
- การลากและการยืนยันตัวตนที่เข้าถึงได้
- เขียนคำประกาศความสอดคล้องที่มีหลักฐานรองรับ