นักพัฒนาเว็บหลายท่าน อาจจะเคยผ่านสายตากันมาบ้างสำหรับ Attribute ที่ชื่อว่า aria-hidden แล้วมีการกำหนดค่า true or false ดั่งตัวอย่างโค้ดคล้าย ๆ กันนี้
<i class="fa fa-th" aria-hidden="true">บางท่านอาจจะสงสัยว่าคืออะไร ?
เรามาทำความเข้าใจกันทีละส่วน
ก่อนอื่นเราต้องทำความเข้าใจก่อนว่า aria นั้น คือ คำย่อของประโยคเต็ม Accessible Rich Internet Applications ครับ
แล้วมันคืออะไร ?
ก็แปลตามตัวครับ Accessible Rich Internet Applications แปลว่า แอพที่เข้าถึงได้หลากหลาย ซึ่งหมายถึงว่า เว็บเรานั้นเปรียบเสมือนแอพ ที่ควรที่จะสามารถเข้าถึงได้ โดยมีข้อจำกัดให้น้อยที่สุด การเข้าถึงในที่นี่ถ้าเป็นเว็บไซต์ ก็จะหมายความว่า เว็บเราควรเข้าถึงได้กับทุก ๆ คน ไม่เว้นแม้แต่ผู้บกพร่องทางสายตา ผู้พิการทางสายตา หรืออื่น ๆ ซึ่งเป็นส่วนหนึ่งของเว็บไซต์ในแบบ Web Accessibility ครับ
ที่นี่หลายคนอาจจะสงสัยว่า แล้วผู้บกพร่องทางสายตา หรือผู้พิการทางสายตาจะอ่านหรือเข้าถึงข้อมูลหน้าเว็บได้อย่างไร ?
ผู้บกพร่องทางสายตา หรือผู้พิการทางสายตา จะสามารถอ่านข้อมูล หรือเข้าถึงหน้าเว็บได้จากโปรแกรมที่เราเรียกกันว่า Screen Reader หรือ Text to Speech โปรแกรมประเภทนี้ จะใช้เพื่ออ่านข้อมูลต่างๆ บนหน้าจอคอมพิวเตอร์ แล้วสังเคราะห์เป็นเสียงอ่านออกมาให้ผู้ใช้รับฟังครับ ซึ่งก็มีอยู่มากมายหลายโปรแกรม เช่น โปรแกรม NVDA เป็นต้น
เมื่อเราเข้าใจแล้วว่า aria นั้นคืออะไร เราก็คงพอจะทราบแล้วว่า Attribute ที่มี Prefix ขึ้นต้นด้วย aria-xxx นั้น น่าจะเป็น Attribute เพื่อใช้ในการทำให้เว็บเรารองรับ Web Accessibility เพราะ ไม่ใช่ว่าทุกเว็บทุกข้อมูลที่โปรแกรมอ่านหน้าจอจะอ่านได้นะ มันต้องมีข้อกำหนด และมีข้อยกเว้นที่เป็นมาตรฐานกลาง (มาตรฐาน WCAG) ซึ่งตรงนี้นักพัฒนาเว็บมีส่วนเข้ามาเกี่ยวข้องอย่างมาก เว็บจะสามารถให้ผู้พิการทางสายตาเข้าถึงได้หรือไม่ ตัวนักพัฒนาเว็บต้องให้ความสำคัญกับการวางโครงสร้างข้อมูลให้ถูกต้องตามมาตฐาน
ที่นี่เราก็มาดูต่อกันว่าแล้ว aria-hidden ที่จั่วหัวมาแต่ต้นบทความมันคืออะไร ?
aria-hidden ก็คือการบอกว่าไม่ต้องสนใจฉันนะ...บอกใคร ?
aria-hidden="true"แต่ถ้ากำหนดให้เป็น false นั่นก็หมายถึงว่า อ่านข้อมูลนี้ไปด้วย ซึ่งทุก ๆ Tag ของ HTML นั้นค่าของ aria-hidden จะมีค่าเป็น false อยู่แล้ว ดังนั้น ถ้าเราต้องการให้โปรแกรมอ่านข้อมูลข้ามการอ่านข้อมูลในส่วนนี้ไป เราต้องใส่ aria-hidden="true" กำกับลงไปทุกครั้ง
Attribute ที่อยู่ในกลุ่ม aria ไม่ได้มีแค่ aria-hidden ที่ยกตัวอย่างมา แต่ยังมี Attribute อีก เช่น
- aria-label
- aria-controls
- aria-checked
- ...etc
อย่างไรให้เราเข้าใจว่า Attribute ที่มี Prefix ขึ้นต้นด้วย aria-xxx นั้นใช้เพื่อการกำหนดการเข้าถึงข้อมูลหน้าเว็บครับ
เรื่อง : การตรวจสอบไฟล์รูปภาพ กรณีรูปภาพไม่แสดงผลบน Web Page คุณอาจจะเคยมีปัญหาเกี่ยวกับการ Insert รูปภาพ (Images) มาใช้...
เรื่อง : ใช้ Dreamweaver แทรกรูปภาพแล้วรูปไม่แสดงที่ Web Browser คำถามที่ผมมักจะพบอยู่บ่อย ๆ กับการใช้งาน Dreamwe...
เรื่อง : สถานะของ Link ที่นักพัฒนาเว็บควรรู้และเข้าใจ Link (ลิงค์) หรือจุดเชื่อมโยง เป็นเอกลักษณ์อย่างหนึ่...
เรือง : หน้าที่และตำแหน่งต่าง ๆ ของผู้จัดทำเว็บไซต์website นึงมีงานหลายอย่างหลากหลายหน้าที่ที่ต้องรับผิดชอบและจัดทำ ...