การใช้องค์ประกอบ HTML เชิงความหมายที่ถูกต้องอาจช่วยให้คุณตอบสนองความต้องการในการเข้าถึงแป้นพิมพ์ส่วนใหญ่หรือทั้งหมดได้ ทำให้ใช้เวลากับ tabindex น้อยลง
และผู้ใช้ที่พึงพอใจก็เพิ่มขึ้นด้วย
รองรับแป้นพิมพ์ฟรี (และได้รับประสบการณ์การใช้งานบนอุปกรณ์เคลื่อนที่ที่ดีขึ้น)
มีองค์ประกอบแบบอินเทอร์แอกทีฟในตัวจำนวนหนึ่งพร้อมด้วยความหมายและการรองรับแป้นพิมพ์ที่เหมาะสม วิธีที่นักพัฒนาซอฟต์แวร์ใช้มากที่สุด ได้แก่
นอกจากนี้ องค์ประกอบที่มีแอตทริบิวต์ contenteditable ยังใช้สำหรับการป้อนข้อความรูปแบบอิสระ
คุณอาจมองข้ามการรองรับแป้นพิมพ์ในตัวที่มีองค์ประกอบเหล่านี้ได้ง่ายๆ
ด้านล่างนี้คือตัวอย่างองค์ประกอบบางส่วนซึ่งพร้อมให้สำรวจ แทนที่จะใช้เมาส์
ให้ลองใช้แป้นพิมพ์เพื่อสั่งการ คุณใช้ TAB (หรือ SHIFT +
TAB) เพื่อย้ายไปมาระหว่างตัวควบคุมได้ รวมถึงใช้ปุ่มลูกศรและแป้นต่างๆ เช่น ENTER และ SPACE เพื่อจัดการค่าได้
หากมีโทรศัพท์อยู่กับตัว คุณจะเห็นว่าหลายองค์ประกอบในตัวเหล่านี้มีการโต้ตอบที่ไม่เหมือนกันในอุปกรณ์เคลื่อนที่ การพยายามสร้างการโต้ตอบบนอุปกรณ์เคลื่อนที่เหล่านี้ ด้วยตนเองเป็นงานหนัก นี่เป็นอีกเหตุผลที่ดีที่คุณควรเลือกใช้ องค์ประกอบในตัวทุกครั้งที่ทำได้
ใช้ button แทน div
รูปแบบลดการช่วยเหลือพิเศษที่พบบ่อยคือการทำให้องค์ประกอบที่ไม่มีการโต้ตอบ เช่น div หรือ span เป็นปุ่มด้วยการเพิ่มตัวแฮนเดิลคลิก
แต่หากปุ่มเข้าถึงได้ ปุ่มควรมีลักษณะดังนี้
- โฟกัสได้ผ่านแป้นพิมพ์
- กำลังปิดใช้การสนับสนุน
- รองรับคีย์
ENTERหรือSPACEเพื่อดำเนินการ - โปรแกรมอ่านหน้าจออ่านได้อย่างถูกต้อง
ปุ่ม div ไม่มีสิ่งใดเลย นั่นหมายความว่าคุณจะต้องเขียนโค้ดเพิ่มเติมเพื่อจำลองสิ่งที่องค์ประกอบ button มอบให้แบบไม่มีค่าใช้จ่าย
เช่น องค์ประกอบ button มีเคล็ดลับเจ๋งๆ ที่เรียกว่า *การเปิดใช้งานการคลิกสังเคราะห์* หากคุณเพิ่มเครื่องจัดการ "คลิก" ลงใน button ตัวแฮนเดิลจะทำงานเมื่อผู้ใช้กด ENTER หรือ SPACE ปุ่ม div ไม่มีฟีเจอร์นี้ คุณจึงต้องเขียนโค้ดเพิ่มเติมเพื่อฟังเหตุการณ์ keydown ตรวจสอบว่าคีย์โค้ดคือ ENTER หรือ SPACE จากนั้นเรียกใช้ตัวแฮนเดิลคลิก โอ๊ย!
มีงานเพิ่มขึ้นมาก
เปรียบเทียบความแตกต่างในตัวอย่างนี้ TAB เพื่อควบคุมและใช้ ENTER และ SPACE เพื่อพยายามคลิก
หากคุณมีปุ่ม div ในเว็บไซต์หรือแอปพลิเคชันที่มีอยู่ ให้ลองสลับปุ่มเหล่านั้นเป็นองค์ประกอบ button button เป็นคอนเทนต์ที่เข้าถึงได้ง่าย
แถมยังช่วยสร้างการเข้าถึงได้
ลิงก์กับปุ่ม
รูปแบบการต่อต้านอีกรูปแบบหนึ่งที่พบได้ทั่วไปคือการจัดการลิงก์เป็นปุ่มโดยการใส่ลักษณะการทำงานของ JavaScript ลงในลิงก์
<a href="#" onclick="// perform some action">
ทั้งปุ่มและลิงก์รองรับการเปิดใช้งานคลิกสังเคราะห์บางรูปแบบ แล้วคุณควรเลือกข้อใด
- หากการคลิกองค์ประกอบจะเป็นการดำเนินการในหน้า ให้ใช้
<button> - หากการคลิกองค์ประกอบจะนำทางผู้ใช้ไปยังหน้าใหม่ ให้ใช้
<a>ซึ่งรวมถึงเว็บแอปในหน้าเดียวที่โหลดเนื้อหาใหม่และอัปเดต URL โดยใช้ History API
ด้วยเหตุผลที่โปรแกรมอ่านหน้าจอจะอ่านปุ่มและลิงก์ต่างๆ แตกต่างออกไป การใช้องค์ประกอบที่ถูกต้องช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอรู้ว่าจะได้รับผลลัพธ์ใด
สิ่งที่ต้องทำ: DevSite - การประเมิน Think and Check
การจัดรูปแบบ
องค์ประกอบในตัวบางอย่าง โดยเฉพาะ <input> อาจจัดรูปแบบได้ยาก
และด้วย CSS ที่ฉลาดหน่อย คุณอาจสามารถหลีกเลี่ยงข้อจำกัดเหล่านี้ได้ โปรเจ็กต์ WTFForms (ชื่อตลกขบขัน) มีตัวอย่างสไตล์ชีตที่แสดงเทคนิคต่างๆ ในการจัดรูปแบบองค์ประกอบในตัวที่ยากขึ้น
ขั้นตอนถัดไป
การใช้องค์ประกอบ HTML ในตัวช่วยปรับปรุงการช่วยเหลือพิเศษของเว็บไซต์ได้อย่างมาก และลดปริมาณงานลงได้อย่างมาก ลองใช้แท็บผ่านไซต์และมองหาการควบคุม ที่ขาดการรองรับแป้นพิมพ์ หากเป็นไปได้ ให้สลับออก สำหรับ HTML ทางเลือกแบบมาตรฐาน
บางครั้งคุณอาจพบองค์ประกอบที่ไม่มีคู่กันใน HTML
ไม่เป็นไร อ่านต่อเพื่อดูวิธีเพิ่มการรองรับแป้นพิมพ์ในการควบคุมแบบอินเทอร์แอกทีฟที่กำหนดเองโดยใช้ tabindex