About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

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

About the Author
Mr.Sittichai Raksasuk

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com



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

การออกแบบเว็บเพจให้แสดงกลางจอ Web Browser

เรื่อง : ออกแบบเว็บอย่างไรให้อยู่กลางหน้าจอ ? (Centering a Web Page) คำถามที่ว่า "อาจารย์ครับ/ค่ะ จะเซ็ทเว็บอย่างไ...  

องค์ประกอบเว็บไซต์ในแบบ CDP

เรื่อง :: องค์ประกอบเว็บไซต์ในแบบ CDP CDP คืออะไร CDP เป็นอักษรย่อของคำว่า Content - Design - Program ครับ ผมพบคำนี้ใน We...  

ทดสอบการทำงานของเว็บไซต์บนอุปกรณ์มือถือ (Mobile Devices) กับ Google

เรื่อง : มาทดสอบเว็บไซต์กับการแสดงผลบนอุปกรณ์มือถือ (Mobile Devices) ด้วยบริการจาก Google ปัจจุบันการออกแบบ และพัฒนาเว็บไซ...  

การทำ Favorites Icon ให้เว็บไซต์ (Website icon)

เรื่อง : มาทำให้เว็บไซต์มี Favorites Icon กันเถอะ (Favicon) มีแฟนเว็บสงสัยถามกันเข้ามาว่า... ...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*