การใช้องค์ประกอบ 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 ในตัวจะช่วยปรับปรุงการเข้าถึงเว็บไซต์ได้อย่างมาก และช่วยลดภาระงานของคุณได้เป็นอย่างมาก ลองกด Tab ไปยังส่วนต่างๆ ของเว็บไซต์และมองหาการควบคุมที่ไม่รองรับแป้นพิมพ์ หากเป็นไปได้ ให้เปลี่ยนไปใช้ทางเลือก HTML มาตรฐาน
บางครั้งคุณอาจพบองค์ประกอบที่ไม่มีคู่กันใน HTML
ไม่เป็นไร อ่านต่อเพื่อดูวิธีเพิ่มการรองรับแป้นพิมพ์ให้กับการควบคุมแบบอินเทอร์แอกทีฟที่กำหนดเองโดยใช้ tabindex