คู่มือฉบับสมบูรณ์สำหรับส่วนประกอบ Front-End ที่เข้าถึงได้

สารบัญ

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

• :เน้นสไตล์
• เติมข้อความอัตโนมัติ
• ปุ่ม
• การ์ด
• ม้าหมุน
• ปุ่ม "ปิด"
• ตัวเลื่อนเนื้อหา
• ช่องทำเครื่องหมาย
• ระบบสี
• จานสี
• การ์ตูน
• ไลบรารีส่วนประกอบ
• ข้อความยินยอมคุกกี้
• การนำทางหน้าปัจจุบัน
• โหมดมืด
• แผนภูมิข้อมูล
• การสร้างภาพข้อมูล
• เครื่องมือเลือกวันที่
• ปุ่มปิดการใช้งาน
• วงเวียน
• รูปแบบแบบฟอร์ม
• เชิงอรรถ
• ซ่อนเนื้อหา
• ลิงค์ไอคอน
• อินพุต
• การนำทางด้วยแป้นพิมพ์
• ลิงค์
• เครื่องเลื่อนสื่อ
• modals
• เมนูนำทาง
• ช่องรหัสผ่าน
• ชอบ-ลด-*
• ปุ่มตัวเลือก
• โครงกระดูก
• “ข้าม” ลิงค์
• SVGs
• แท็บ
• โต๊ะ
• การทดสอบ
• การเข้าถึงส่วนประกอบบุคคลที่สาม
• สวิตช์สลับ
• เครื่องมือ
• คำแนะนำเครื่องมือ
• เครื่องเล่นวิดีโอ/เสียง

เข้าถึงได้ :focus สไตล์

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

มีวิธีการออกแบบที่ดีกว่า :focus รูปแบบ ในบทความของเธอ เคล็ดลับสำหรับรูปแบบการโฟกัส นิค ชาน ไฮไลต์เคล็ดลับที่เป็นประโยชน์บางประการเกี่ยวกับวิธีปรับปรุงรูปแบบการโฟกัสด้วยราคาที่ถูกกว่า และช่องว่างภายใน ออฟเซ็ต และโครงร่างที่เหมาะสม ต้องการความสนุกสนานมากขึ้นด้วย :focus styles? Lari Maza ก็กลับมาเช่นกัน

เรายังสามารถใช้ :focus-within เพื่อจัดรูปแบบองค์ประกอบหลักขององค์ประกอบที่โฟกัส และ :focus-visible เพื่อไม่ให้แสดงรูปแบบโฟกัสเมื่อโต้ตอบกับเมาส์/พอยน์เตอร์ หากทำให้เกิดปัญหาใดๆ ในการออกแบบของคุณ

สิ่งสำคัญคือ โปรดพิจารณาข้อกังวลเกี่ยวกับการช่วยสำหรับการเข้าถึง :focus-visible : ดังที่ Hidde de Vries ได้กล่าวไว้ ไม่ใช่ทุกคนที่อาศัยรูปแบบการโฟกัสจะใช้แป้นพิมพ์และทำให้รูปแบบการโฟกัสของแป้นพิมพ์เท่านั้นที่ลดราคาสำหรับผู้ใช้เมาส์ด้วยเช่นกัน เนื่องจากโฟกัสก็เช่นกัน ระบุว่ามีบางอย่างโต้ตอบได้ (ขอบคุณ Jason Webb สำหรับเคล็ดลับ!)

สุดท้าย เป็นที่น่าสังเกตว่าเมื่อเร็วๆ นี้ Chrome, Edge และเบราว์เซอร์ที่ใช้ Chromium อื่นๆ หยุดแสดงตัวบ่งชี้การโฟกัส ( วงแหวนโฟกัส ) เมื่อผู้ใช้คลิกหรือแตะปุ่ม (ขอบคุณ Kim Johannesen สำหรับคำแนะนำ!)

การเติมข้อความอัตโนมัติที่เข้าถึงได้

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

Gov.uk ทีมงานเบื้องหลัง Government Digital Service ในสหราชอาณาจักร มีการเติมข้อความอัตโนมัติแบบโอเพนซอร์สที่เข้าถึงได้ (เหนือสิ่งอื่นใด) ซึ่งเป็นองค์ประกอบ JavaScript ที่เป็นไปตามแนวทางปฏิบัติที่ดีที่สุดของ WAI-ARIA คุณสามารถเลือกเวลาที่จะเริ่มแสดงคำแนะนำ และอนุญาตให้แสดงเมนูเป็นการวางซ้อนในตำแหน่งที่แน่นอน หรือเลือกคำแนะนำแรกโดยค่าเริ่มต้น ทีมงานยังมีหน้าสาธิตพร้อมตัวอย่างและการใช้งานการเติมข้อความอัตโนมัติที่เข้าถึงได้มากมาย

ปุ่มที่เข้าถึงได้และลิงก์ไอคอน

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

เพื่อแสดงให้เห็นว่าเราสามารถทำได้ดีขึ้นได้อย่างไร Kitty Giraudel ได้ทุ่มเทบทความ "Accessible Icon Links" ให้กับปัญหานี้ พวกเขาใช้ลิงก์ไอคอนที่ประกอบด้วย SVG ที่มีนก Twitter อันเป็นสัญลักษณ์เพื่อแสดงประเด็น และแสดงวิธีทำให้สามารถเข้าถึงได้ทีละขั้นตอน: ด้วยข้อความอธิบายที่ซ่อนไว้ด้วยสายตา จากนั้นนำมาร์กอัป SVG ออกจากแผนผังการช่วยสำหรับการเข้าถึงด้วย aria-hidden และในที่สุดก็แก้ไขความจริงที่ว่าองค์ประกอบ svg สามารถมุ่งเน้นไปที่ Internet Explorer โดยการเพิ่ม focusable ที่สามารถโฟกัสได้ ในตอนท้ายของบทความ คิตตี้ยังแสดงวิธีเปลี่ยนสิ่งเหล่านี้ให้เป็น ส่วนประกอบ React เล็กน้อย

รายละเอียดเล็กๆ น้อยๆ ที่จะสร้างความแตกต่างอย่างมากให้กับผู้ใช้จำนวนมาก

ในการสร้างปุ่มไอคอนที่เข้าถึงได้และซ่อนไว้อย่างครบถ้วน Sara Soueidan และ Scott O'Hara ได้เจาะลึกความซับซ้อนและรายละเอียดของปุ่มไอคอนทั้งหมด โดยสำรวจเทคนิคจำนวนหนึ่งเพื่อให้ใช้งานได้ Sara และ Scott สำรวจเทคนิคจำนวนหนึ่ง โดยแนะนำให้ใช้เทคนิคที่เหมาะสมสำหรับข้อความที่ซ่อนอยู่ในการมองเห็นที่เข้าถึงได้ ซึ่งเป็นข้อความที่จะซ่อนด้วยสายตาแต่โปรแกรมอ่านหน้าจอสามารถเข้าถึงได้ ซึ่งสามารถทำได้ด้วยคลาสยูทิลิตี้ .sr-only หรือ hidden และ aria-labelledby หรือ aria-label เพียงอย่างเดียว Sara ไม่แนะนำให้ใช้ไอคอน SVG เพื่อติดป้ายกำกับสำหรับปุ่ม เมื่อฉันสามารถระบุปุ่มบนตัวมันเองได้โดยตรง

โดยทั่วไปแล้ว ยังมีความสับสนอยู่บ้างเล็กน้อยว่าองค์ประกอบใดที่จะใช้สำหรับการโต้ตอบกับผู้ใช้: เราใช้ลิงก์เมื่อใด และเราใช้ปุ่มเมื่อใด Marcy Sutton ได้เขียนรายละเอียดเกี่ยวกับ Links vs. Buttons ใน Modern Applications ด้วยลิงก์ ผู้เยี่ยมชมจะไปยังแหล่งข้อมูลใหม่ โดยนำพวกเขาออกจากบริบทปัจจุบัน แต่ปุ่มแจ้งการเปลี่ยนแปลงในอินเทอร์เฟซ

Marcy สรุปกรณีการใช้งานสำหรับทั้งลิงก์และปุ่มในแอปพลิเคชันหน้าเดียว แสดงให้เห็นว่าปุ่มเป็นองค์ประกอบที่สมบูรณ์แบบสำหรับการเปิดหน้าต่างโมดอล เรียกป๊อปอัป สลับอินเทอร์เฟซ หรือเล่นเนื้อหาสื่อ คุณสามารถตรวจสอบบทความของ Vadim Makeev เรื่อง “เมื่อปุ่มไม่ใช่ปุ่ม?”

ปุ่มสำหรับผู้พิการที่เข้าถึงได้

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

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

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

ในบทความเกี่ยวกับ CSS-Tricks ของเธอ Sandrina Pereira ได้สำรวจปัญหาที่วิธีทั่วไปในการใช้ <button disabled> ไม่เพียงแต่ป้องกันการคลิกเท่านั้น แต่ยังรวมถึงการโฟกัสด้วย แม้ว่าสิ่งนี้อาจดูเหมือนไม่เป็นอันตราย แต่ก็ทำให้เกิดความสับสนสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ คำแนะนำของเธอ: การสลับ disabled การใช้งานด้วย aria-disabled ทำให้ประสบการณ์ใช้งานสนุกยิ่งขึ้นเนื่องจากปุ่มยังสามารถเข้าถึงได้โดยโฟกัสและสามารถเรียกใช้คำแนะนำเครื่องมือได้เช่นกัน แม้ว่าจะทำเครื่องหมายว่าปิดใช้งาน

บัตรสำหรับผู้พิการ

การ์ดมีข้อดีมากมาย พวกมันทำงานได้ดีบนอุปกรณ์เคลื่อนที่ ให้พื้นที่การคลิกขนาดใหญ่ และความจริงที่ว่าพวกมันสามารถซ้อนกันได้ทั้งแนวนอนและแนวตั้ง ทำให้การตัดสินใจเกี่ยวกับเลย์เอาต์จำนวนมากง่ายขึ้น อย่างไรก็ตาม ไม่มีมาตรฐานการช่วยสำหรับการเข้าถึง ไม่มีองค์ประกอบ <card> หรือรูปแบบการออกแบบ ARIA ในทางกลับกัน อุปสรรคในการเข้าถึงข้อมูลที่คุณอาจพบนั้นขึ้นอยู่กับวัตถุประสงค์และเนื้อหาของการ์ด ในคอลเล็กชันส่วนประกอบที่รวมเข้าด้วยกัน Heydon Pickering จะพิจารณาการเปลี่ยนแปลงบางอย่างของส่วนประกอบการ์ดอย่างง่าย และวิธีรักษาสมดุลระหว่างโครงสร้าง HTML ของเสียงและการโต้ตอบตามหลักสรีรศาสตร์

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

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

Carousels ที่เข้าถึงได้และตัวเลื่อนเนื้อหา

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

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

ปุ่มปิดที่เข้าถึงได้

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

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

ช่องทำเครื่องหมายและปุ่มตัวเลือกที่สามารถเข้าถึงได้

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

Sara ครอบคลุมเทคนิคต่างๆ ในการซ่อนองค์ประกอบ วิธีที่แต่ละองค์ประกอบส่งผลต่อการเข้าถึงเนื้อหา และวิธีซ่อนองค์ประกอบด้วยสายตา เพื่อให้แทนที่องค์ประกอบเหล่านี้ด้วยทางเลือกที่มีสไตล์มากขึ้น: SVG

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

ระบบสีที่เข้าถึงได้

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

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

จานสีที่สามารถเข้าถึงได้

การค้นหาโทนสีหรือเฉดสีที่สมบูรณ์แบบไม่ได้เป็นเพียงเรื่องของรสนิยมเท่านั้น แต่ยังรวมถึงการเข้าถึงด้วย ท้ายที่สุดแล้ว หากขาดความคมชัดของสี ในกรณีที่เลวร้ายที่สุด ผลิตภัณฑ์อาจไม่สามารถใช้งานได้สำหรับผู้ที่มีความบกพร่องทางสายตา WCAG 2.0 ระดับ AA ต้องการอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความปกติ) และ 3:1 สำหรับข้อความขนาดใหญ่ และ WCAG 2.1 ต้องใช้อัตราส่วนคอนทราสต์อย่างน้อย 3:1 สำหรับส่วนประกอบกราฟิกและ UI (เช่น อินพุตแบบฟอร์ม ชายแดน) AAA ต้องการอัตราส่วนคอนทราสต์อย่างน้อย 7:1 สำหรับข้อความปกติและ 4.5:1 สำหรับข้อความขนาดใหญ่ เครื่องมือตรวจสอบคอนทราสต์ที่มีรายละเอียดมากเพื่อช่วยคุณตรวจจับข้อผิดพลาดที่อาจเกิดขึ้นล่วงหน้ามาจาก Gianluca Gini: Geenes

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

การทำความเข้าใจความบกพร่องทางสายตา

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

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

การ์ตูนที่เข้าถึงได้

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

Comica11y เป็นการทดลองโดย Paul Spencer ที่มุ่งหวังที่จะบรรลุประสบการณ์การอ่านการ์ตูนออนไลน์ที่รวมทุกอย่างไว้ด้วยกัน จะเกิดอะไรขึ้นถ้าเราสามารถมีโหมดการอ่านที่แตกต่างกันสำหรับการ์ตูน เช่น คำบรรยาย การจัดการโฟกัสที่เหมาะสมเพื่อนำทางระหว่างพาเนล โหมดคอนทราสต์สูง ฟิลเตอร์ตาบอดสี SVG ฟองแบบตั้งโปรแกรม ข้อความที่เลือกและแปลได้ รองรับ LTR และ RTL และแม้กระทั่ง ขนาดตัวอักษรปรับได้? ความคิดริเริ่มที่ยอดเยี่ยมที่แสดงให้เห็นว่าเราสามารถจัดการกับความท้าทายของ UI และใช้เว็บเพื่อปรับปรุงประสบการณ์ได้อย่างมาก

ไลบรารีส่วนประกอบที่เข้าถึงได้

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

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

และถ้าคุณต้องการส่วนประกอบขั้นสูงอีกเล็กน้อย ส่วนประกอบแบบรวมของ Heydon Pickering — เราได้กล่าวถึงตัวอย่างบางส่วนจากด้านบนนี้ — ช่วยคุณได้: ด้วยบทช่วยสอนที่ครอบคลุมเกี่ยวกับการ์ดที่สามารถเข้าถึงได้ ตารางข้อมูล การแจ้งเตือน ตัวเลื่อน อินเทอร์เฟซแบบแท็บ คำแนะนำเครื่องมือ เมนู และการสลับ

ข้อความยินยอมคุกกี้ที่เข้าถึงได้

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

แล้วเราจะทำให้พวกเขาดีขึ้นได้อย่างไร? ในแบนเนอร์คุกกี้และการช่วยสำหรับการเข้าถึง Sheri Byrne-Haber เน้นถึงปัญหาทั่วไปที่ข้อความแจ้งของคุกกี้มักมี: จากลักษณะที่ปรากฏให้เห็นเป็นโฟกัสกับดัก การปรากฏในลำดับแท็บ ประเภทของการยอมรับ และรูปแบบอื่นของการเปิดเผยความยินยอม Quentin Bellanger ให้ตัวอย่างโค้ดพื้นฐานของโมดอลยินยอมคุกกี้และบทช่วยสอน นอกจากนี้ยังมีโซลูชันโอเพนซอร์ซฟรีอีกด้วย ได้แก่ Osano Cookie Consent และ cookie-consent-box แต่อาจต้องใช้งานการเข้าถึงบางอย่าง

สถานะการนำทางของหน้าปัจจุบันที่เข้าถึงได้

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

ตั้งแต่การใส่ไอคอน SVG ใน HTML และการใช้ aria-hidden เพื่อซ่อนจากเทคโนโลยีอำนวยความสะดวก ไปจนถึงการใช้ ems แทนพิกเซล และการถ่ายทอดบริบทเพิ่มเติมสำหรับผู้ใช้โปรแกรมอ่านหน้าจอด้วยแอตทริบิวต์ aria-current โพสต์ให้ข้อมูลเชิงลึกเกี่ยวกับวิธีการ รองรับสถานะการนำทางที่เข้าถึงได้อย่างแท้จริง

คู่มือฉบับสมบูรณ์เกี่ยวกับโหมดมืดบนเว็บ

โหมดมืดกำลังกลายเป็นความชอบของผู้ใช้อย่างรวดเร็วกับ Apple, Windows และ Google ที่นำโหมดนี้ไปใช้กับระบบปฏิบัติการของตน แต่โหมดมืดบนเว็บล่ะ? Adhuham เขียนคู่มือที่ครอบคลุมเกี่ยวกับโหมดมืดซึ่งเจาะลึกถึงตัวเลือกและวิธีการต่างๆ ในการใช้งานการออกแบบโหมดมืดบนเว็บ

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

การพิจารณาการออกแบบนั้นได้รับการแก้ไขด้วยแน่นอน ด้วยเคล็ดลับอันมีค่าในการทำให้ภาพ เงา การออกแบบตัวอักษร ไอคอน และสีพร้อมสำหรับโหมดมืด ในขณะที่ใช้อยู่: เพื่อให้แน่ใจว่าเราจะไม่ทำลายคอนทราสต์สูงในโหมดโดยไม่ได้ตั้งใจ ให้ดูที่โหมด Styling สำหรับ Windows High Contrast ( ขอบคุณสำหรับคำแนะนำ Courtney Heitman! )

แผนภูมิข้อมูลที่สามารถเข้าถึงได้

การสร้างภาพข้อมูลเป็นวิธีที่ยอดเยี่ยมในการทำให้ข้อมูลโดดเด่น อย่างไรก็ตาม พวกเขายังมาพร้อมกับความท้าทายในการเข้าถึงของพวกเขาเอง เมื่อ Sara Soueidan ร่วมมือกับ SuperFriendly เพื่อสร้างไมโครไซต์ที่สามารถเข้าถึงได้สำหรับรายงานประจำปีของ Khan Academy เธอต้องการให้แน่ใจว่าวิธีการนำเสนอและการนำข้อมูลไปใช้นั้นสามารถเข้าถึงได้มากที่สุด ไม่ว่าผู้เยี่ยมชมจะสำรวจไซต์อย่างไร วิธีแก้ปัญหาของเธอ: SVG

ในกรณีศึกษาเกี่ยวกับแผนภูมิข้อมูลที่เข้าถึงได้ Sara สรุปทุกสิ่งที่คุณจำเป็นต้องพิจารณาเมื่อคุณต้องการทำให้แผนภูมิ SVG และการแสดงภาพสามารถเข้าถึงได้ โดยเริ่มจากขั้นตอนที่สำคัญที่สุดในการเลือกเทคนิคการฝังที่เหมาะสม นอกจากนี้ยังครอบคลุมถึงเหตุผลที่คุณควรหลีกเลี่ยงการพยายามทำให้แผนภูมิ SVG สามารถเข้าถึงได้โดยใช้บทบาท ARIA และสาเหตุที่ Sara ไม่ได้เลือก <figure> เพื่อฝังแผนภูมิ คู่มืออ้างอิงที่ยอดเยี่ยม นอกจากนี้: โดยเฉพาะอย่างยิ่งในกราฟ เรายังสามารถใช้ป้ายข้อความที่เข้าถึงได้ดีกว่า และ Sara จะครอบคลุมในบทความแยกต่างหากเช่นกัน

การแสดงข้อมูลที่เข้าถึงได้

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

Sarah แนะนำว่าอย่าพึ่งพาสีในการอธิบายข้อมูล และหลีกเลี่ยงสีที่สว่างและคอนทราสต์ต่ำโดยทั่วไป การใช้รูปแบบและรูปร่างนอกเหนือจากสีจะเป็นประโยชน์ และภาษาที่ชัดเจน ป้ายกำกับ และคำอธิบายประกอบสามารถช่วยอธิบายการสร้างภาพข้อมูลได้อย่างชัดเจน ทุกบทความเต็มไปด้วยตัวอย่างและแหล่งข้อมูลมากมายสำหรับการอ่านเพิ่มเติม ควรตรวจสอบด้วย: การทบทวนการแสดงภาพข้อมูลการเลือกตั้งประธานาธิบดีสหรัฐฯ ของ Sarah ( ขอบคุณ Stephanie Eckles สำหรับเคล็ดลับ! )

ตัวเลือกวันที่ที่เข้าถึงได้

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

Duet Date Picker เป็นเช่นนั้น เป็นตัวเลือกวันที่ที่เข้าถึงได้และสอดคล้องกับ WCAG 2.1 ซึ่งสามารถนำไปใช้และใช้กับเฟรมเวิร์ก JavaScript ใดๆ หรือไม่มีเฟรมเวิร์กเลยก็ได้ มันมาพร้อมกับฟังก์ชั่นในตัวที่ให้คุณตั้งค่าวันที่ขั้นต่ำและสูงสุดที่อนุญาต และมีน้ำหนักประมาณ 10kb ที่ย่อเล็กสุดและ Gzip'ed (ซึ่งรวมถึงสไตล์และไอคอนทั้งหมด)

หากคุณต้องการทางเลือกอื่น ให้ลองดู React Dates ห้องสมุดที่เปิดตัวโดย Airbnb ที่ได้รับการปรับให้เหมาะสมสำหรับความเป็นสากล ในขณะเดียวกันก็เข้าถึงได้และเหมาะกับอุปกรณ์เคลื่อนที่

การจัดแต่งเส้นแบ่งแนวนอน

<hr> องค์ประกอบมักจะค่อนข้างน่าเบื่อ เส้นแนวนอนเรียบๆ ที่ให้ภาพแบ่งและแบ่งเนื้อหา แต่คุณรู้หรือไม่ว่าพวกเขาสามารถจัดสไตล์โดยใช้ CSS และ SVG เพื่อให้เนื้อหาของคุณและออกแบบสัมผัสที่เป็นส่วนตัวได้ดี

Sara Soueidan ทำอย่างนั้นทั้งหมด: <hr> ในเว็บไซต์ส่วนตัวของเธอไม่ได้แสดงเป็นบรรทัดที่น่าเบื่อ แต่คุณจะเห็นนกนั่งอยู่บนลวด เพื่อช่วยให้คุณทำให้ <hr> ของคุณน่าอยู่ยิ่งขึ้นด้วย Sara ได้สรุปว่าเธอจัดรูปแบบเส้นแนวนอนอย่างไรด้วยความช่วยเหลือของ CSS และ SVG magic นอกจากนี้ เธอยังมองหาวิธีปรับปรุงเพิ่มเติมเพื่อปรับให้เข้ากับบริบทต่างๆ ในขณะที่ยังคงความหมายและเข้าถึงได้ รายละเอียดเล็ก ๆ น้อย ๆ ที่ดี

รูปแบบแบบฟอร์มข้ามเบราว์เซอร์ที่เข้าถึงได้

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

“<select> ยาพิษของคุณ” ของ Sarah Higley เป็นการลงลึกแบบสองส่วนที่ครอบคลุมถึงความท้าทายและความซับซ้อนของการจัดสไตล์องค์ประกอบ <select> ด้วยตัวแปรที่แก้ไขได้และแบบเลือกได้หลายแบบ ความสามารถในการเปรียบเทียบ (พร้อมข้อมูล!) และคำแนะนำที่ใช้งานได้จริง ว่าจะทำอย่างไรให้ถูกต้อง

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

ในบล็อกของเธอ Sara Soueidan ลงรายละเอียดเกี่ยวกับวิธีซ่อนและจัดรูปแบบช่องทำเครื่องหมายและปุ่มตัวเลือก โบนัส: ตัวอย่างโค้ดของ Adrian Roselli ให้ข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับการสลับที่อยู่ภายใต้การออกแบบ แหล่งข้อมูลที่ยอดเยี่ยมใช้งานได้ทันทีและจัดรูปแบบรูปแบบที่เข้าถึงได้

การซ่อนเนื้อหาอย่างมีความรับผิดชอบ

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

ตามที่ Kitty แนะนำ คุณอาจต้องการหลีกเลี่ยงความคลาดเคลื่อนมากเกินไประหว่างเนื้อหาภาพและเนื้อหาพื้นฐานที่เปิดเผยต่อเลเยอร์การช่วยสำหรับการเข้าถึง ยิ่งซิงค์มากเท่าไหร่ก็ยิ่งดีเท่านั้น Kitty กำหนดสถานการณ์ที่แตกต่างกันสามสถานการณ์เพื่อช่วยให้คุณประเมินว่าควรใช้เทคนิคใดเมื่อใด: หากคุณต้องการซ่อนบางสิ่งทั้งที่มองเห็นได้และจากแผนผังการช่วยสำหรับการเข้าถึง (เช่น แสดง/ซ่อนวิดเจ็ต การนำทางนอกจอ หรือกล่องโต้ตอบที่ปิด เป็นต้น) ให้ใช้ display: none หรือแอตทริบิวต์ HTML ที่ hidden หากคุณต้องการซ่อนบางสิ่งจากแผนผังการช่วยสำหรับการเข้าถึงแต่ให้มองเห็นได้ ให้ใช้ aria-hidden="true" (กรณีที่ถูกต้องคือเนื้อหาที่มองเห็นได้ไม่มีความหมาย, ไอคอน) และสุดท้ายแต่ไม่ท้ายสุด หากคุณต้องการซ่อนบางสิ่งแต่ให้สามารถเข้าถึงได้ ให้ใช้กลุ่มการประกาศ CSS ที่มองเห็นได้ชัดเจน (เช่น สำหรับเนื้อหาเสริมที่มีบริบทมากขึ้น เช่น ปุ่มไอคอนหรือลิงก์) ภาพรวมที่ดี

เชิงอรรถและ Sidenotes ที่สามารถเข้าถึงได้

ในสาระสำคัญ เชิงอรรถไม่ได้มากไปกว่าการเชื่อมโยงแบบข้าม — ลิงก์ไปยังคำอธิบายของแหล่งที่มา ไม่ว่าจะวางไว้ที่ด้านล่างของเอกสาร หรือในแถบด้านข้าง หรือปรากฏแบบอินไลน์ อย่างไรก็ตาม เนื่องจากเชิงอรรถเป็นลิงก์ข้าม เราจึงต้องตรวจสอบให้แน่ใจว่าผู้ใช้โปรแกรมอ่านหน้าจอเข้าใจเมื่อลิงก์อ้างอิงถึงเชิงอรรถ และเราสามารถทำได้ด้วยแอตทริบิวต์ aria-describedby ตัวนับสำหรับทุกลิงก์จะถูกใช้งานผ่านตัวนับ CSS ด้วย :target เราจะเน้นแถวที่ผู้อ่านข้ามไปและเราจัดเตรียมลิงก์ย้อนกลับไปยังตำแหน่งเชิงอรรถจริงในเนื้อหา

Kitty Giraudel ลงรายละเอียดเพื่ออธิบายวิธีสร้างเชิงอรรถที่เข้าถึงได้ และคุณยังสามารถตรวจสอบวิธีสร้างเชิงอรรถที่เข้าถึงได้ด้วย React และใช้ react-a11y-footnotes เพื่อสร้างใน React with Eleventy (ขอบคุณ Kitty Giraudel สำหรับคำแนะนำ!)

อินพุตที่เข้าถึงได้

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

เริ่มต้นด้วยพื้นฐานของ WAI, ARIA และ WCAG บทความนี้จะสำรวจวิธีทำให้อินพุตเข้าถึงได้ง่ายขึ้น คำแนะนำสามารถนำไปใช้ได้โดยไม่ต้องเปลี่ยนส่วนต่อประสานผู้ใช้ และอย่างที่ Oscar กล่าวไว้: “หากไม่แน่ใจ ก็ลงมือทำเลย จะไม่มีใครสังเกตเห็น ยกเว้นผู้ใช้บางรายของคุณ และพวกเขาจะขอบคุณสำหรับมัน”

ลิงค์ที่สมบูรณ์แบบ

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

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

การนำทางด้วยแป้นพิมพ์ทั่วทั้งแอปที่เข้าถึงได้

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

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

เมนู Tap/Click ที่เข้าถึงได้

ยังเป็นความคิดที่ดีหรือไม่ที่จะออกแบบ mega-drop-downs ที่เปิดขึ้นเมื่อวางเมาส์เหนือ อาจจะไม่. เมนูโฮเวอร์มีปัญหาในการใช้งานและการเข้าถึงได้มากมาย เนื่องจากไม่สอดคล้องกัน ทำให้สับสน และแน่นอนว่าต้องการโซลูชันอื่นสำหรับอุปกรณ์เคลื่อนที่ อันที่จริง Mark Root-Wiley แนะนำว่าถึงเวลาแล้วที่จะวางเมนูโฮเวอร์เพื่อสนับสนุนเมนูคลิกที่ชัดเจนและเข้าถึงได้

ในบทความของเขา มาร์กจะลงรายละเอียดเกี่ยวกับวิธีสร้างเมนูคลิกที่เข้าถึงได้ พร้อมด้วยคำแนะนำและข้อมูลอ้างอิงที่เป็นประโยชน์จากการค้นคว้าของเขา แนวคิดคือการเริ่มสร้างเมนูเป็นเมนูโฮเวอร์เฉพาะ CSS ที่ใช้ li:hover > ul และ li:focus-within > ul เพื่อแสดงเมนูย่อย จากนั้น เราใช้ JavaScript เพื่อสร้างองค์ประกอบ <button> ตั้งค่าแอตทริบิวต์ aria และเพิ่มตัวจัดการเหตุการณ์ ผลลัพธ์สุดท้ายมีให้ในตัวอย่างโค้ดบน CodePen และใน GitHub repo นี่ควรเป็นจุดเริ่มต้นที่ดีสำหรับเมนูของคุณเช่นกัน

ส่วนประกอบ Media Scroller ที่เข้าถึงได้

คุณจะสร้างองค์ประกอบตัวเลื่อนสื่อตอบสนองที่ทำงานบนทีวี โทรศัพท์ และเดสก์ท็อปได้อย่างไร Adam Argyle จะนำคุณผ่านกระบวนการทีละขั้นตอน

ออกแบบมาเพื่อโฮสต์ภาพขนาดย่อของสื่อหรือผลิตภัณฑ์ ส่วนประกอบ scroller สร้างขึ้นจาก <ul> พร้อมมาร์กอัปที่เข้าถึงได้ CSS แปลงรายการแบบเรียบง่ายเป็นประสบการณ์การเลื่อนที่ราบรื่นซึ่งแสดงภาพและจัดชิดให้เป็นตาราง เพื่อเพิ่มความละเอียดรอบคอบ JavaScript ช่วยอำนวยความสะดวกในการโต้ตอบกับดัชนีเร่ร่อน ช่วยให้ผู้ใช้แป้นพิมพ์ข้ามผ่านรายการจำนวนมาก และสุดท้ายแต่ไม่ท้ายสุด แบบสอบถามสื่อ prefers-reduced-data ทดลองจะเปลี่ยนตัวเลื่อนสื่อให้กลายเป็นประสบการณ์ที่ไม่ซับซ้อน หากจำเป็น . ฉลาด!

Modals ที่เข้าถึงได้

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

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

ตามหลักการแล้ว เราจะใช้บางสิ่งที่ง่ายเหมือนกับองค์ประกอบ dialog ใน HTML แต่น่าเสียดายที่มันมีปัญหาด้านการเข้าถึงจำนวนมาก ด้วย Shadow DOM การจัดการโฟกัสก็ไม่ใช่เรื่องง่ายเช่นกัน เราสามารถใช้แอตทริบิวต์ inert เพื่อลบ จากนั้นคืนค่าความสามารถขององค์ประกอบแบบโต้ตอบที่จะค้นพบและมุ่งเน้น สำหรับเบราว์เซอร์รุ่นเก่า เราสามารถใช้ inert polyfills จาก Google Chrome และจาก WICG

• หน้าต่างโมดอลที่เข้าถึงได้ของ Scott O'Hara เป็นสคริปต์ที่เข้าถึงได้อย่างสมบูรณ์ที่เชื่อถือได้
• ในไม่ช้า Kitty Giraudel จะเปิดตัว a11y-dialog Next ซึ่งเป็นสคริปต์น้ำหนักเบา (1.6 KB) ที่ดักจับและเรียกคืนโฟกัส สลับแอตทริบิวต์ aria–* และปิดกล่องโต้ตอบเมื่อคลิกซ้อนทับและ Escape สิ่งสำคัญคือ ต้องไม่สับสนระหว่างเวอร์ชันนี้กับเวอร์ชันก่อนหน้า (6.1.0) เนื่องจากใช้ <dialog> ซึ่งยังขาดการสนับสนุนในการใช้งาน และมีปัญหาในการเข้าถึงที่ยังเหลืออยู่
• คุณสามารถดู Parvus ซึ่งเป็นไลท์บ็อกซ์รูปภาพแบบโอเพนซอร์สที่เรียบง่าย เข้าถึงได้โดยไม่มีการพึ่งพา ในสถานการณ์ทั่วไป เราจะมีรูปภาพที่เชื่อมโยงกับรูปภาพในเวอร์ชันที่ใหญ่กว่า ด้วย Parvus การเพิ่มคลาส .lightbox ให้กับลิงก์ที่ล้อมรอบรูปภาพ ก็เพียงพอแล้ว และสคริปต์จะทำอย่างอื่นให้คุณโดยอัตโนมัติ

ช่องรหัสผ่านที่เข้าถึงได้

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

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

รองรับการตั้งค่าผู้ใช้ด้วยความ prefers-reduced-*

ผู้ใช้แต่ละคนไม่เหมือนกัน และในขณะที่ผู้ใช้บางคนชอบแอนิเมชั่น คนอื่นๆ อาจมีปัญหาทางการแพทย์เกี่ยวกับการเคลื่อนไหว แบบสอบถามสื่อ prefers-reduced-motion ทำให้คุณสามารถสลับเปิดหรือปิดภาพเคลื่อนไหวได้ แต่ยังมีวิธีแก้ปัญหาอื่นๆ อีกในการจัดการภาพเคลื่อนไหวขึ้นอยู่กับความชอบของผู้ใช้ ในบล็อกโพสต์ของเขา Elijah Manor กล่าวถึงเทคนิคต่างๆ เช่น @media, matchMedia และ React hook ที่กำหนดเองเพื่อจัดการกับ CSS, SVG SMIL และภาพเคลื่อนไหว JavaScript

เมื่อพูดถึงการทำให้ทุกคนเข้าถึงเนื้อหาของคุณ มีคิวรี่สื่อที่ prefers-reduced-* อีกรายการหนึ่งที่ควรทราบ แม้ว่าเบราว์เซอร์ยังไม่รองรับก็ตาม (แต่คุณสามารถเลียนแบบได้ในเบราว์เซอร์ Polypane และ Chromium): prefers-reduced-data โดยจะระบุว่าเมื่อใดที่ผู้ใช้ต้องการใช้ข้อมูลน้อยที่สุด เช่น การเชื่อมต่อช้าหรือข้อมูลมีจำกัด

• Tatiana Mac ได้เขียนบทความที่ละเอียดมากเกี่ยวกับการใช้แนวทางที่ไม่เคลื่อนไหวในแอนิเมชั่นก่อน โดยแนะนำให้วางสไตล์เฉพาะแอนิเมชั่นทั้งหมดในสไตล์ชีตเฉพาะแอนิเมชั่น และให้บริการก็ต่อเมื่อผู้เข้าชมไม่ได้ระบุว่า "ลดการเคลื่อนไหว"
• Kitty Giraudel ให้แนวทางในการใช้โหมดลดการเคลื่อนไหวในตัวอย่างของ UI ของธนาคารและตัวอย่างโค้ดด้วย
• ทีมงาน Polypane ได้สรุปสิ่งที่คุณต้องรู้เกี่ยวกับการสืบค้นสื่อเพื่อพิสูจน์อนาคตของเว็บไซต์ของคุณแล้วในวันนี้

โครงกระดูกที่เข้าถึงได้

รูปแบบโครงกระดูกมักจะไม่มีวิธีที่มีความหมายในการนำเสนอตัวเองต่อโปรแกรมอ่านหน้าจอ พวกเขามักจะใช้ aria-busy="true" เมื่อวิดเจ็ตกำลังโหลด แต่มีโปรแกรมอ่านหน้าจอเพียงไม่กี่ตัวเท่านั้นที่ให้ความสำคัญกับแอตทริบิวต์ แล้วจะทำอย่างไรให้ดีขึ้น?

ตามที่ Adrian Roselli แนะนำ คุณสามารถใช้ CSS เพื่อค้นหาโหนดใดๆ ที่มี aria-busy="true" และตั้งค่าให้ display: none เพื่อให้ได้ผลเช่นเดียวกันสำหรับโปรแกรมอ่านหน้าจอและผู้ใช้ที่ไม่ใช่โปรแกรมอ่านหน้าจอ ในบทความของเขา "โครงกระดูกที่เข้าถึงได้มากขึ้น" เขาจะนำคุณผ่านกระบวนการทีละขั้นตอน การสาธิตใช้ได้กับเบราว์เซอร์ที่มี JAWS, NVDA, VoiceOver และ TalkBack เวอร์ชันปัจจุบัน

ลิงก์ "ข้าม" ที่เข้าถึงได้

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

ในวิธีสร้างลิงก์ "ข้ามเนื้อหา" Paul Ryan มีบทแนะนำทีละขั้นตอนเกี่ยวกับวิธีการใช้ลิงก์ข้ามเนื้อหาที่เข้าถึงได้ โดยทั่วไปเราใช้การแปลง CSS เพื่อผลักลิงก์ข้ามออกจากหน้าจอ แต่นำกลับมาที่หน้าจออีกครั้ง :focus ในความคิดเห็นของบทความ Eric Bailey ยังสังเกตเห็นว่าเราสามารถให้ข้ามลิงก์ก่อนส่วนของเนื้อหาที่มีรายการแบบโต้ตอบจำนวนมาก หรือรายการที่อาจนำทางได้ยาก (เช่น สารบัญและ iframe )

SVG ที่เข้าถึงได้

พูดคุยเกี่ยวกับ SVG: สิ่งที่เราสามารถทำได้กับ SVG ในปัจจุบันนั้นไปไกลกว่ารูปแบบพื้นฐานของปีกลาย ไม่เพียงแต่เราสามารถอธิบายไอคอน SVG ได้เท่านั้น แต่ยังรวมถึงการจัดรูปแบบและทำให้พวกเขาเคลื่อนไหวด้วย หากความครอบคลุมที่แท้จริงนั้นอยู่เหนือรูปแบบ — เราควรพิจารณาปัจจัยอื่นใดเมื่อออกแบบและพัฒนา SVG ที่เข้าถึงได้

นั่นเป็นคำถามที่ Carie Fisher ตอบในบทความของเธอใน Accessible SVGs: Inclusiveness Beyond Patterns ในบทความ Carie พิจารณาสีและคอนทราสต์ของ SVG อย่างละเอียด โหมดสว่างและมืด แอนิเมชัน SVG การเคลื่อนไหวที่ลดลง และเครื่องมือมากมายที่เน้นไปที่การช่วยสำหรับการเข้าถึง คุณยังจะพบตัวอย่างการสาธิตและโค้ดในบทความ พร้อมด้วยคำอธิบายโดยละเอียดและคำแนะนำสำหรับการอ่านเพิ่มเติม

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

แท็บที่สามารถเข้าถึงได้

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

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

หรืออีกทางหนึ่ง TabPanelWidget เป็นโซลูชันที่ตอบสนองและเข้าถึงได้สำหรับแท็บ มันอาศัย HTML เชิงความหมายแบบเก่าและกลายเป็นหีบเพลงเมื่อใดก็ตามที่แท็บไม่สามารถพอดีได้ทั้งหมด (ขอบคุณ ResizeObserver แต่มี polyfill สำหรับเบราว์เซอร์ที่ยังไม่รองรับ)

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

โต๊ะที่สามารถเข้าถึงได้

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

ในโพสต์ของเขาเกี่ยวกับตารางที่เข้าถึงได้ Adrian แนะนำให้ห่อตารางใน <div> ด้วย role="region" , aria-labelledby และ tabindex="0" เพื่อให้แน่ใจว่าผู้ใช้ที่ใช้แป้นพิมพ์เท่านั้นสามารถแท็บไปยังคอนเทนเนอร์ได้ table ได้รับโฟกัสและ <caption> ภายในตารางเพื่อให้แน่ใจว่ามีการประกาศให้โปรแกรมอ่านหน้าจอทราบอย่างถูกต้อง Adrian ยังจัดเตรียมตัวอย่างโค้ดสำหรับตารางแบบตอบสนอง เช่นเดียวกับตารางที่มีแถวที่ขยายได้ ตารางที่จัดเรียงได้ และส่วนหัวของตารางแบบตายตัว

วิธีที่โปรแกรมอ่านหน้าจอนำทางไปยังตารางข้อมูล

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

ในโพสต์ Leonie ใช้ NVDA เพื่อย้ายไปยังตาราง นำทางเนื้อหา และค้นหาข้อมูลเฉพาะ องค์ประกอบ HTML ที่เหมาะสม (หรือบทบาท ARIA) จะแจ้งให้เธอทราบเกี่ยวกับคุณลักษณะของตาราง และให้สิทธิ์เข้าถึงคำสั่งแป้นพิมพ์สำหรับการนำทางเนื้อหาของตารางโดยเฉพาะ

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

สวิตช์สลับที่สามารถเข้าถึงได้

เมื่อใดก็ตามที่แบบฟอร์มของเรามีตัวเลือกไบนารีให้กับลูกค้า — เปิด/ปิด, โหมดมืด/สว่าง ฯลฯ — เราสามารถใช้สวิตช์สลับได้ สวิตช์ต้องให้บริการสองวัตถุประสงค์: จำเป็นต้องอธิบายการเลือกปัจจุบันอย่างชัดเจน (และไม่ชัดเจนว่าบ่อยเลย!) จำเป็นต้องอธิบายว่ามีสองตัวเลือก และต้องชัดเจนเพียงพอสำหรับลูกค้า เข้าใจวิธีการสลับไปมาระหว่างกัน เมื่อ Sara Soueidan กำลังมองหาวิธีสร้างสวิตช์สลับ แน่นอนว่าเธอใช้เวลาค่อนข้างมากในการมองหาวิธีสร้างสวิตช์สลับที่สามารถเข้าถึงได้

โซลูชันของ Sara ใช้ปุ่มตัวเลือกสองปุ่ม โดยแต่ละปุ่มมีป้ายกำกับของตัวเอง ประกาศให้เทคโนโลยีอำนวยความสะดวกเป็นทางเลือกสองทางแยกกัน เข้าถึงได้ผ่านแป้นพิมพ์ และ ไม่มีข้อกำหนด ARIA หรือ JS เพิ่มเติมในการทำงาน ผลลัพธ์คือตัวอย่างโค้ดสลับธีม และคุณยังสามารถดูตัวอย่างโค้ดของ Scott O'Hara ได้อีกด้วย

สิ่งสำคัญคือต้องสังเกตว่าสวิตช์สลับปุ่มตัวเลือกของ Sara สามารถเข้าถึงได้เนื่องจากมีป้ายกำกับสองป้าย ดังนั้นหากสวิตช์เปิดปิด ไม่มี ป้ายกำกับสองป้าย จะไม่เป็นรูปแบบที่จะใช้ คุณสามารถค้นหารูปแบบมาร์กอัปสำหรับสวิตช์สลับได้ใน repo ของ Scott ( ขอบคุณ Scott O'Hara สำหรับเคล็ดลับ! )

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

คำแนะนำเครื่องมือที่สามารถเข้าถึงได้และ Toggletips

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

คำแนะนำและ Toggletips แบบรวมของ Heydon Pickering ให้ภาพรวมที่ละเอียดถี่ถ้วนของทุกสิ่งที่จำเป็นในการสร้างคำแนะนำเครื่องมือที่สามารถเข้าถึงได้ นั่นหมายถึงการตัดสินใจว่าควรให้เนื้อหาของทิปเป็นป้ายกำกับหรือคำอธิบาย และเลือกคุณสมบัติของ ARIA ตามลำดับ โดยไม่อาศัยแอตทริบิวต์ของ title และหลีกเลี่ยงการใส่เนื้อหาแบบโต้ตอบ เช่น ปิดและยืนยันปุ่มหรือลิงก์ในคำแนะนำเครื่องมือ

• แน่นอนว่า Sara Soueidan ยังมีความยุ่งยากซับซ้อนในการสร้างคำแนะนำเครื่องมือช่วยเหลือที่เข้าถึงได้อย่างเต็มที่ และสรุปว่า JavaScript มีความจำเป็นในการสร้างส่วนประกอบเชิงโต้ตอบที่เข้าถึงได้อย่างเต็มที่
• Sarah Higley ยังอธิบายความซับซ้อนของคำแนะนำเครื่องมือและเผยแพร่ตัวอย่างโค้ดที่แสดงรูปแบบการทำงานที่เชื่อถือได้
• Scott O'Hara มี GitHub repo เกี่ยวกับคำแนะนำเครื่องมือ
• Adrian Roselli มีตัวอย่างโค้ดมากมายสำหรับการสลับ รวมถึงการสาธิตพร้อมคำแนะนำเครื่องมือที่ปิดใช้งานและทิศทาง RTL

เครื่องเล่นวิดีโอ/เสียงที่เข้าถึงได้

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

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

อีกทางหนึ่ง คุณสามารถดู Vime.js ได้เช่นกัน: โอเพ่นซอร์สเต็มรูปแบบ น้ำหนักเบา ปรับแต่งได้อย่างเต็มที่ และ ไม่มีการอ้างอิงจากบุคคลที่สาม ตัวเลือกที่ยอดเยี่ยมอื่นๆ เช่น Plyr และโปรแกรมเล่นวิดีโอ HTML5 ที่เข้าถึงได้ของ PayPal นั้นคล้ายคลึงกัน หลังสามารถเข้าถึงได้อย่างสมบูรณ์สำหรับผู้ใช้คีย์บอร์ดเท่านั้นและผู้ใช้โปรแกรมอ่านหน้าจอที่เขียนด้วย JavaScript วานิลลา มีให้เพิ่มเติมเป็น ส่วนประกอบ React และกลับไปใช้การควบคุมดั้งเดิมของเบราว์เซอร์หาก JavaScript ไม่พร้อมใช้งาน ( ขอบคุณสำหรับเคล็ดลับ @jamsandwich ! )

คุณลักษณะของเว็บไซต์ที่รบกวนผู้ใช้โปรแกรมอ่านหน้าจอ

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

เพื่อสร้างความตระหนักรู้เกี่ยวกับปัญหาการช่วยสำหรับการเข้าถึงทั่วไป Holly ได้สรุปคุณลักษณะเว็บไซต์ที่น่ารำคาญห้าประการที่เธอต้องเผชิญในฐานะผู้ใช้โปรแกรมอ่านหน้าจอทุกวัน และแน่นอนว่าจะแก้ไขอย่างไร Chris Ashton ยังได้ตีพิมพ์บทความที่อธิบายปัญหาทั่วไปที่ผู้ใช้โปรแกรมอ่านหน้าจอมี ซึ่งมักถูกละเลยในการสนทนาโดยเน้นที่ความหมายและการเข้าถึงแป้นพิมพ์เพียงอย่างเดียว รายละเอียดเล็กๆ น้อยๆ ที่สร้างความแตกต่างอย่างมาก ( ขอบคุณ Alex Chudesnov สำหรับเคล็ดลับ! )

แต่ก่อนอื่น สนับสนุนการช่วยสำหรับการเข้าถึง

มีหลายวิธีที่เทคโนโลยีอำนวยความสะดวกโต้ตอบกับเบราว์เซอร์และโค้ด เนื่องจากยังไม่สามารถกำหนดให้โปรแกรมอ่านหน้าจอและซอฟต์แวร์ควบคุมเสียงเป็นแบบอัตโนมัติได้ทั้งหมด เราจึงไม่ต้องทำการทดสอบด้วยตนเอง และนั่นคือที่มาของ a11ysupport.io

เว็บไซต์ที่ขับเคลื่อนโดยชุมชนนี้สร้างขึ้นโดย Michael Fairchild มีวัตถุประสงค์เพื่อช่วยแจ้งนักพัฒนาเกี่ยวกับสิ่งที่รองรับการช่วยสำหรับการเข้าถึง เป็นโครงการที่กระตือรือร้นและยินดีให้ความช่วยเหลือเสมอ ดังนั้นเริ่มทดสอบได้เลย นอกจากนี้ คุณควรตรวจสอบแนวทางปฏิบัติในการเขียน WAI-ARIA ซึ่งอธิบายความหมาย บทบาท และ ARIA ที่จำเป็นสำหรับส่วนประกอบและรูปแบบทั่วไปเสมอ (ขอบคุณ Stephanie Eckles สำหรับคำแนะนำ!)

ทรัพยากรการเข้าถึงและรายการตรวจสอบ

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

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

ที่เก็บเครื่องมือช่วยการเข้าถึง

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

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

การเข้าถึงส่วนประกอบบุคคลที่สาม

ส่วนประกอบที่นำกลับมาใช้ใหม่ได้ เช่น การเลือกแบบกำหนดเอง การเติมข้อความอัตโนมัติ หรือตัวเลือกวันที่ เป็นตัวช่วยที่ทรงพลัง อย่างไรก็ตาม ส่วนประกอบของบุคคลที่สามจำนวนมากที่อ้างว่าสามารถเข้าถึงได้จะสามารถเข้าถึงได้เพียงบางส่วนเท่านั้นเมื่อคุณเจาะลึกลงไปอีกเล็กน้อย ตามที่ Hidde de Vries ชี้ให้เห็น แม้แต่ส่วนประกอบที่ใช้ ARIA Authoring Practices Guide 1:1 ก็มีความสำคัญ เนื่องจากคู่มือนี้ไม่ได้อ้างสิทธิ์เกี่ยวกับการเข้าถึงโปรแกรมอ่านหน้าจอหรือประสบการณ์ของผู้ใช้ แล้วคุณจะค้นหาส่วนประกอบเหล่านั้นที่สามารถเข้าถึงได้อย่างแท้จริงได้อย่างไร?

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

ห่อ

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

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

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

สามารถเข้าถึงได้!

ขอขอบคุณ! ️

ขอบคุณมากสำหรับ @jamsandwich, Courtney Heitman, Stephanie Eckles, Adam Silver, Daniela Kubesch, Tanisha Sabherwal, Manuel Matuzovic, Vadim Makeev, Kitty Giraudel, Ian James, Juha Lehtonen, Heydon Pickering, Shivani Gupta, Jason Webb, Alex Kallinikos, Scott O'Hara, Sara Soueidan, Sasha Chudesnov, Adam Liptrot, Holger Bartel, Kim Johannesen และคนอื่นๆ ที่ทำงานอย่างทุ่มเทเพื่อเข้าถึงบทความนี้ เรื่องของชุมชน

เพิ่มเติมเกี่ยวกับการเข้าถึง

• เครื่องมือตรวจสอบ CSS
• CSS Generators
• คลี่คลายโลกที่ซับซ้อนของรูปแบบที่เข้าถึงได้
• การออกแบบด้วยการลดการเคลื่อนไหวเพื่อความไวต่อการเคลื่อนไหว
• ฉันใช้เว็บเป็นเวลาหนึ่งวันโดยใช้โปรแกรมอ่านหน้าจอ
• การเข้าถึงใน Chrome DevTools
• สิ่งที่คุณสามารถทำได้ด้วย CSS วันนี้
• นอกจากนี้ สมัครรับจดหมายข่าวของเราเพื่อไม่ให้พลาดข่าวสารต่อไป