การใช้ Bootstrap เป็นกิริยาช่วยฉันได้เห็นariaคุณลักษณะเหล่านี้มากมาย แต่ฉันไม่เคยรู้วิธีการใช้ประโยชน์จากพวกเขา
ไม่มีใครรู้ว่าสิ่งที่กรณีที่จะใช้คุณลักษณะเหล่านี้? ฉัน googled— แค่ไม่พบคำตอบที่ตรงไปตรงมา
การใช้ Bootstrap เป็นกิริยาช่วยฉันได้เห็นariaคุณลักษณะเหล่านี้มากมาย แต่ฉันไม่เคยรู้วิธีการใช้ประโยชน์จากพวกเขา
ไม่มีใครรู้ว่าสิ่งที่กรณีที่จะใช้คุณลักษณะเหล่านี้? ฉัน googled— แค่ไม่พบคำตอบที่ตรงไปตรงมา
คำตอบ:
คุณลักษณะ HTML5 ARIAคือสิ่งที่คุณกำลังมองหา มันสามารถใช้ในรหัสของคุณแม้ไม่มี bootstrap
แอปพลิเคชันอินเทอร์เน็ตที่สามารถเข้าถึงได้มากมาย (ARIA)กำหนดวิธีในการสร้างเนื้อหาเว็บและเว็บแอปพลิเคชัน (โดยเฉพาะอย่างยิ่งที่พัฒนาด้วย Ajax และ JavaScript) สำหรับผู้พิการ
เพื่อให้แม่นยำสำหรับคำถามของคุณนี่คือสิ่งที่แอตทริบิวต์ของคุณถูกเรียกว่าเป็นสถานะและรูปแบบของ ARIA
aria-labelledby: ระบุองค์ประกอบ (หรือองค์ประกอบ) ที่ติดป้ายองค์ประกอบปัจจุบัน
aria-hidden (state): บ่งชี้ว่าองค์ประกอบและลูกหลานทั้งหมดของมันไม่สามารถมองเห็นหรือรับรู้ต่อผู้ใช้ใด ๆ ตามที่ผู้เขียนนำมาใช้
ผู้บริโภคหลักของคุณสมบัติเหล่านี้คือตัวแทนผู้ใช้เช่นโปรแกรมอ่านหน้าจอสำหรับคนตาบอด ดังนั้นในกรณีที่มีกิริยา Bootstrap, ของคำกริยามีdiv role="dialog"เมื่อโปรแกรมอ่านหน้าจอสังเกตเห็นว่ามีสิ่งที่divมองเห็นได้ซึ่งมีบทบาทนี้มันจะพูดถึงป้ายกำกับสำหรับสิ่งdivนั้น
มีหลายวิธีในการติดป้ายกำกับสิ่งต่าง ๆ (และใหม่สองสามรายการด้วย ARIA) แต่ในบางกรณีเป็นการเหมาะสมที่จะใช้องค์ประกอบที่มีอยู่เป็นป้ายกำกับ (ความหมาย) โดยไม่ต้องใช้<label>แท็ก HTML ด้วย modals HTML ฉลากมักจะเป็น<h>ส่วนหัว ดังนั้นในกรณี modal Bootstrap คุณเพิ่มaria-labelledby=[IDofModalHeader]และโปรแกรมอ่านหน้าจอจะพูดส่วนหัวนั้นเมื่อ modal ปรากฏขึ้น
โดยทั่วไปการพูดโปรแกรมอ่านหน้าจอจะสังเกตเห็นเมื่อใดก็ตามที่องค์ประกอบ DOM มองเห็นหรือมองไม่เห็นดังนั้นaria-hiddenคุณสมบัติจึงซ้ำซ้อนบ่อยครั้งและอาจถูกข้ามไปในกรณีส่วนใหญ่
aria-hidden="true"จะซ่อนรายการตกแต่งเช่นไอคอน glyphicon จากโปรแกรมอ่านหน้าจอซึ่งไม่มีการออกเสียงที่มีความหมายเพื่อไม่ให้เกิดความสับสน มันเป็นเรื่องดีที่ทำตามหลักปฏิบัติที่ดี
ARIA ไม่เปลี่ยนแปลงฟังก์ชันการทำงาน แต่จะเปลี่ยนเฉพาะบทบาท / คุณสมบัติที่นำเสนอให้กับผู้ใช้โปรแกรมอ่านหน้าจอ แถบเครื่องมือ WAVE ของ WebAIM จะระบุบทบาทของ ARIA ในหน้านั้น
Aria ใช้เพื่อปรับปรุงประสบการณ์ผู้ใช้ของผู้ใช้ที่มีความบกพร่องทางสายตา ผู้ใช้ที่มีความบกพร่องทางสายตาสามารถนำทางผ่านแอพพลิเคชั่นที่ใช้ซอฟต์แวร์ตัวอ่านหน้าจอเช่น JAWS, NVDA, .. ในขณะที่นำทางผ่านแอพพลิเคชั่นซอฟต์แวร์ตัวอ่านหน้าจอจะประกาศเนื้อหาให้กับผู้ใช้ Aria สามารถใช้เพื่อเพิ่มเนื้อหาในรหัสซึ่งช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอเข้าใจบทบาทสถานะฉลากและวัตถุประสงค์ของการควบคุม
Aria ไม่เปลี่ยนแปลงอะไรที่มองเห็นได้ (Aria กลัวนักออกแบบด้วย)
เพลงที่ซ่อนอยู่:
แอททริบิวต์ aria-hidden ถูกใช้เพื่อซ่อนเนื้อหาสำหรับผู้ใช้ที่มีความบกพร่องทางสายตาผ่านทางแอพพลิเคชั่นโดยใช้โปรแกรมอ่านหน้าจอ (JAWS, NVDA, ... )
แอ็ตทริบิวต์ aria-hidden ถูกใช้กับค่า true, false
วิธีใช้:
<i class = "fa fa-books" aria-hidden = "true"></i>การใช้ aria-hidden = "true" บน<i>เนื้อหาที่ซ่อนให้ผู้ใช้โปรแกรมอ่านหน้าจอไม่มีการเปลี่ยนแปลงในแอปพลิเคชัน
เพลงฉลาก
คุณลักษณะ aria-label ใช้เพื่อสื่อสารป้ายกำกับกับผู้ใช้โปรแกรมอ่านหน้าจอ โดยปกติแล้วช่องป้อนข้อมูลการค้นหาจะไม่มีป้ายกำกับภาพ (ขอบคุณนักออกแบบ) aria-label สามารถใช้เพื่อสื่อสารป้ายกำกับของการควบคุมไปยังผู้ใช้โปรแกรมอ่านหน้าจอ
วิธีใช้:
<input type = "edit" aria-label = "search" placeholder = "search">ไม่มีการเปลี่ยนแปลงในแอปพลิเคชันที่มองเห็นได้ แต่โปรแกรมอ่านหน้าจอสามารถเข้าใจวัตถุประสงค์ของการควบคุมได้
เพลง-labelledby
ทั้ง aria-label และ aria-labelledby ใช้เพื่อสื่อสารฉลาก แต่ aria-labelledby สามารถใช้เพื่ออ้างอิงป้ายกำกับใด ๆ ที่มีอยู่แล้วในหน้านี้ในขณะที่ aria-label ใช้เพื่อสื่อสารป้ายกำกับที่ฉันไม่แสดงด้วยสายตา
วิธีที่ 1:
<span id = "sd"> Search </span>
<input type = "text" aria-labelledby = "sd">aria-labelledby ยังสามารถใช้เพื่อรวมสองป้ายกำกับสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ
วิธีที่ 2:
<span id = "de"> Billing Address </span>
<span id = "sd"> First Name </span>
<input type = "text" aria-labelledby = "de sd">