การใช้องค์ประกอบ 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
สาเหตุคือโปรแกรมอ่านหน้าจอจะอ่านออกเสียงปุ่มและลิงก์แตกต่างกัน การใช้องค์ประกอบที่ถูกต้องจะช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอทราบว่าจะเกิดผลลัพธ์ใดขึ้น
TODO: DevSite - Think and Check assessment
การจัดรูปแบบ
องค์ประกอบในตัวบางรายการ โดยเฉพาะ <input> อาจจัดสไตล์ได้ยาก
คุณอาจหลีกเลี่ยงข้อจํากัดเหล่านี้ได้โดยใช้ CSS ที่ชาญฉลาด โปรเจ็กต์ WTFForms (ชื่อฮามาก) นี้มีตัวอย่างสไตล์ชีตที่แสดงเทคนิคต่างๆ ในการจัดรูปแบบองค์ประกอบในตัวที่จัดการได้ยาก
ขั้นตอนถัดไป
การใช้องค์ประกอบ HTML ในตัวจะช่วยปรับปรุงการเข้าถึงเว็บไซต์ได้อย่างมาก และช่วยลดภาระงานของคุณได้เป็นอย่างมาก ลองกด Tab ไปยังส่วนต่างๆ ของเว็บไซต์และมองหาการควบคุมที่ไม่รองรับแป้นพิมพ์ หากเป็นไปได้ ให้เปลี่ยนไปใช้ทางเลือก HTML มาตรฐาน
บางครั้งคุณอาจพบองค์ประกอบที่ไม่มีคู่กันใน HTML
ไม่เป็นไร อ่านต่อเพื่อดูวิธีเพิ่มการรองรับแป้นพิมพ์ให้กับการควบคุมแบบอินเทอร์แอกทีฟที่กำหนดเองโดยใช้ tabindex