%E0%B8%A7%E0%B9%88%E0%B8%B2%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%E0%B9%80%E0%B8%A3%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%87 aria-hidden %E0%B8%84%E0%B8%B7%E0%B8%AD Attribute %E0%B9%83%E0%B8%8A%E0%B9%89%E0%B9%80%E0%B8%9E%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3 %3F [Article ID : 246]

เรื่อง: aria-hidden คืออะไร ?

นักพัฒนาเว็บหลายท่าน อาจจะเคยผ่านสายตากันมาบ้างสำหรับ Attribute ที่ชื่อว่า aria-hidden แล้วมีการกำหนดค่า true or false ดั่งตัวอย่างโค้ดคล้าย ๆ กันนี้

	<i class="fa fa-th" aria-hidden="true">

บางท่านอาจจะสงสัยว่าคืออะไร ?
บทความนี้เราจะมาทำความเข้าใจกัน ดั่งนี้

aria คือ Accessible Rich Internet Applications

เรามาทำความเข้าใจกันทีละส่วน
ก่อนอื่นเราต้องทำความเข้าใจก่อนว่า aria นั้น คือ คำย่อของประโยคเต็ม Accessible Rich Internet Applications ครับ
แล้วมันคืออะไร ?
ก็แปลตามตัวครับ Accessible Rich Internet Applications แปลว่า แอพที่เข้าถึงได้หลากหลาย ซึ่งหมายถึงว่า เว็บเรานั้นเปรียบเสมือนแอพ ที่ควรที่จะสามารถเข้าถึงได้ โดยมีข้อจำกัดให้น้อยที่สุด การเข้าถึงในที่นี่ถ้าเป็นเว็บไซต์ ก็จะหมายความว่า เว็บเราควรเข้าถึงได้กับทุก ๆ คน ไม่เว้นแม้แต่ผู้บกพร่องทางสายตา ผู้พิการทางสายตา หรืออื่น ๆ ซึ่งเป็นส่วนหนึ่งของเว็บไซต์ในแบบ Web Accessibility ครับ

ผู้บกพร่องทางสายตา หรือผู้พิการทางสายตา เข้าถึงข้อมูลหน้าเว็บได้อย่างไร ?

ที่นี่หลายคนอาจจะสงสัยว่า แล้วผู้บกพร่องทางสายตา หรือผู้พิการทางสายตาจะอ่านหรือเข้าถึงข้อมูลหน้าเว็บได้อย่างไร ?
ผู้บกพร่องทางสายตา หรือผู้พิการทางสายตา จะสามารถอ่านข้อมูล หรือเข้าถึงหน้าเว็บได้จากโปรแกรมที่เราเรียกกันว่า Screen Reader หรือ Text to Speech โปรแกรมประเภทนี้ จะใช้เพื่ออ่านข้อมูลต่างๆ บนหน้าจอคอมพิวเตอร์ แล้วสังเคราะห์เป็นเสียงอ่านออกมาให้ผู้ใช้รับฟังครับ ซึ่งก็มีอยู่มากมายหลายโปรแกรม เช่น โปรแกรม NVDA เป็นต้น

เข้าเรื่องละ aria-hidden คือ ?

เมื่อเราเข้าใจแล้วว่า aria นั้นคืออะไร เราก็คงพอจะทราบแล้วว่า Attribute ที่มี Prefix ขึ้นต้นด้วย aria-xxx นั้น น่าจะเป็น Attribute เพื่อใช้ในการทำให้เว็บเรารองรับ Web Accessibility เพราะ ไม่ใช่ว่าทุกเว็บทุกข้อมูลที่โปรแกรมอ่านหน้าจอจะอ่านได้นะ มันต้องมีข้อกำหนด และมีข้อยกเว้นที่เป็นมาตรฐานกลาง (มาตรฐาน WCAG) ซึ่งตรงนี้นักพัฒนาเว็บมีส่วนเข้ามาเกี่ยวข้องอย่างมาก เว็บจะสามารถให้ผู้พิการทางสายตาเข้าถึงได้หรือไม่ ตัวนักพัฒนาเว็บต้องให้ความสำคัญกับการวางโครงสร้างข้อมูลให้ถูกต้องตามมาตฐาน

ที่นี่เราก็มาดูต่อกันว่าแล้ว aria-hidden ที่จั่วหัวมาแต่ต้นบทความมันคืออะไร ?

aria-hidden ก็คือการบอกว่าไม่ต้องสนใจฉันนะ...

บอกใคร ?
ก็บอกกับโปรแกรมที่จะเข้ามาอ่านข้อมูล เช่น โปรแกรมอ่านหน้าจอสำหรับผู้พิการทางสายตา เป็นต้น ว่าไม่ต้องอ่านข้อมูลในส่วนนี้นะ กรณีเรากำหนดค่าเป็น true ดั่งตัวอย่าง

	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 นั้นใช้เพื่อการกำหนดการเข้าถึงข้อมูลหน้าเว็บครับ

---

บทความอื่นที่คุณอาจสนใจ