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

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

วิธีปรับปรุงการเข้าถึงตาราง HTML

ใช้แอตทริบิวต์ alt อย่างมีความหมาย

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

ในการแก้ไขปัญหานี้ ตรวจสอบให้แน่ใจว่ารูปภาพมีข้อความแสดงแทนซึ่งบอกผู้ใช้ว่ารูปภาพนั้นคืออะไร เกี่ยวกับ. แม้ว่าจะดูถูกต้อง แต่แอตทริบิวต์ alt ของ”เครื่องหมายถูก”จะไม่มีความหมายอะไรเลย ฉันใช้วลี”คุณลักษณะรวม”แทน (แต่ฉันคิดว่าการใช้ฟอนต์ของไอคอนจะดีกว่ารูปภาพ)

คำอธิบายตารางนั้น

ตารางนี้ดูเหมือนว่าจะมีคำบรรยายว่า”เลือกแผน ” แต่ข้อความนั้นเป็นระดับหัวเรื่อง h3> การย้ายภายในองค์ประกอบ table> และทำเครื่องหมายเป็นคำอธิบายภาพ> ช่วยให้เทคโนโลยีช่วยเหลือ เช่น โปรแกรมอ่านหน้าจอ ทราบว่าข้อความเกี่ยวข้องกับตาราง> โดยทางโปรแกรม

รวมข้อความส่วนหัวสำหรับทุกคอลัมน์

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

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

ตรวจสอบข้อความ (con)ของคุณ

โปรแกรมอ่านหน้าจออาจไม่ทำงานตามที่คุณคาดหวังเสมอไปเมื่อใช้ตัวย่อและเครื่องหมายวรรคตอน ตารางนี้แสดงให้ฉันเห็นตัวอย่างที่น่าสนใจสองตัวอย่าง อันดับแรก จำนวนผู้ใช้สำหรับแผนแบบทีมจะดูเหมือน”2-50″แต่จะประกาศเป็น”250″เนื่องจากยัติภังค์ไม่แสดง เพื่อให้แน่ใจว่าข้อความนี้ชัดเจน เราสามารถเพิ่มคำว่า”ถึง”เป็นข้อความตัวช่วยที่ซ่อนอยู่ และเพื่อความปลอดภัย เราสามารถซ่อนเครื่องหมายยัติภังค์จาก AT

การเข้าถึงตาราง HTML คืออะไร

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

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

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

By Henry Taylor

ฉันทำงานเป็นนักพัฒนาส่วนหลัง พวกคุณบางคนอาจเคยเห็นฉันที่การประชุมนักพัฒนาซอฟต์แวร์ เมื่อเร็ว ๆ นี้ฉันได้ทำงานในโครงการโอเพ่นซอร์ส