HTML5 ARIA คืออะไร

HTML5 ARIA คืออะไร ฉันไม่เข้าใจวิธีการใช้งาน

WAI-ARIAเป็นข้อมูลจำเพาะที่รองรับการใช้งานเว็บแอพที่เข้าถึงได้ มันกำหนดพวงของส่วนขยายมาร์กอัป (ส่วนใหญ่เป็นคุณลักษณะในองค์ประกอบ HTML5) ซึ่งนักพัฒนาเว็บแอปสามารถใช้เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับความหมายขององค์ประกอบต่างๆเพื่อเทคโนโลยีช่วยเหลือเช่นโปรแกรมอ่านหน้าจอ แน่นอนว่า ARIA สามารถทำงานได้ตัวแทนผู้ใช้ HTTP ที่ตีความมาร์กอัปจำเป็นต้องสนับสนุน ARIA แต่ข้อมูลจำเพาะถูกสร้างขึ้นในลักษณะที่อนุญาตให้ตัวแทนผู้ใช้ระดับล่างสามารถเพิกเฉยต่อมาร์กอัพเฉพาะ ARIA ได้อย่างปลอดภัยโดยไม่มีผลกระทบต่อ ฟังก์ชั่นของเว็บแอป

นี่คือตัวอย่างจากสเปค ARIA:

<ul role="menubar">

  <!-- Rule 2A: "File" label via aria-labelledby -->
  <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
    <ul role="menu">

      <!-- Rule 2C: "New" label via Namefrom:contents -->
      <li role="menuitem" aria-haspopup="false">New</li>
      <li role="menuitem" aria-haspopup="false">Open…</li>
      ...
    </ul>
  </li>
  ...
</ul>

บันทึกroleแอตทริบิวต์ใน<ul>องค์ประกอบด้านนอก แอ็ตทริบิวต์นี้จะไม่ส่งผลต่อเบราว์เซอร์ที่แสดงผลบนหน้าจอ แต่อย่างใด อย่างไรก็ตามเบราว์เซอร์ที่รองรับ ARIA จะเพิ่มข้อมูลความสามารถในการเข้าใช้งานเฉพาะของระบบปฏิบัติการให้กับองค์ประกอบ UI ที่แสดงผลเพื่อให้โปรแกรมอ่านหน้าจอสามารถตีความได้ว่าเป็นเมนูและอ่านออกเสียงด้วยบริบทที่เพียงพอเพื่อให้ผู้ใช้ปลายทางเข้าใจ คำใบ้เสียง "เมนู") และสามารถโต้ตอบกับมันได้ (เช่นการนำทางด้วยเสียง)

ARIA ย่อมาจากแอปพลิเคชันอินเทอร์เน็ตที่เข้าถึงได้หลากหลาย

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

และถ้าคุณสงสัยว่า WAI-ARIA คืออะไรมันคือสิ่งเดียวกัน

โปรดทราบข้อกำหนด WAI-ARIA และ ARIA อ้างถึงสิ่งเดียวกัน อย่างไรก็ตามมันถูกต้องมากกว่าที่จะใช้ WAI-ARIA เพื่อรับทราบต้นกำเนิดใน WAI

WAI = ความสามารถในการเข้าใช้งานเว็บ

จากรูปลักษณ์ของมัน ARIA ใช้สำหรับเทคโนโลยีช่วยเหลือและการอ่านหน้าจอเป็นส่วนใหญ่

ความสงสัยส่วนใหญ่ของคุณจะถูกล้างหากคุณอ่านบทความนี้

http://www.w3.org/TR/aria-in-html/

มันคืออะไร?

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

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

หินมุมหนึ่งของ WAI-ARIA คือคุณลักษณะของบทบาท มันบอกเบราว์เซอร์เพื่อบอกเทคโนโลยีการช่วยเหลือว่าองค์ประกอบ HTML ที่ใช้ไม่ใช่สิ่งที่ชื่อองค์ประกอบแนะนำ แต่เป็นอย่างอื่น ในขณะที่มันเดิมเป็นเพียงองค์ประกอบ div องค์ประกอบ div นี้อาจเป็นคอนเทนเนอร์ไปยังรายการของรายการที่ทำให้สมบูรณ์อัตโนมัติซึ่งในกรณีนี้บทบาทของ "listbox" จะเหมาะสมที่จะใช้ ในทำนองเดียวกันอีก div ที่เป็นลูกของ container div นั้นและที่มีรายการตัวเลือกเดียวก็ควรได้รับบทบาทของ "ตัวเลือก" สอง divs แต่ผ่านบทบาทความหมายที่แตกต่างกันโดยสิ้นเชิง บทบาทนั้นเป็นแบบอย่างหลังจากที่ใช้งานทั่วไปบนเดสก์ท็อป

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

หินมุมที่สองคือสถานะและคุณสมบัติของ WAI-ARIA พวกเขากำหนดสถานะขององค์ประกอบพื้นฐานหรือ WAI-ARIA บางอย่างเช่นหากมีบางสิ่งที่ยุบหรือขยายองค์ประกอบของฟอร์มจำเป็นต้องมีบางสิ่งที่มีเมนูป๊อปอัพติดอยู่หรือคล้ายกัน สิ่งเหล่านี้มักจะเป็นแบบไดนามิกและเปลี่ยนค่าตลอดวงจรชีวิตของเว็บแอปพลิเคชันและมักจะถูกจัดการผ่านทาง JavaScript

มันคืออะไร

WAI-ARIA ไม่ได้มีวัตถุประสงค์เพื่อมีอิทธิพลต่อพฤติกรรมของเบราว์เซอร์ เช่นองค์ประกอบของปุ่มจริงตัวอย่างเช่น div ที่คุณใส่บทบาทของ "ปุ่ม" ลงไปนั้นไม่ได้ให้ความสามารถในการโฟกัสของแป้นพิมพ์ตัวจัดการคลิกอัตโนมัติเมื่อกด Space หรือ Enter และคุณสมบัติอื่น ๆ ที่เป็นต้นกำเนิดของ ปุ่ม. เบราว์เซอร์เองไม่ทราบว่า div ที่มีบทบาทของ“ button” เป็นปุ่มเพียงส่วน API การเข้าถึงเท่านั้นที่ทำได้

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

เมื่อใดที่ฉันไม่ควรใช้

ใช่ถูกต้องส่วนนี้มาก่อน! เพราะกฎข้อแรกของการใช้ WAI-ARIA คือ: อย่าใช้มันเว้นแต่คุณจะต้องทำอย่างแน่นอน! คุณมี WAI-ARIA น้อยลงและยิ่งคุณสามารถใช้วิดเจ็ต HTML ดั้งเดิมได้มากเท่าไหร่ยิ่งดีเท่านั้น! มีบางกฎระเบียบมากขึ้นที่จะทำตามที่คุณสามารถตรวจสอบพวกเขาออกจากที่นี่

ARIA คืออะไร

ARIA เป็นวิธีการแก้ไขปัญหาการเข้าถึงของการใช้ภาษามาร์กอัปสำหรับเอกสาร HTML เพื่อสร้างส่วนต่อประสานผู้ใช้ (UI) HTML มีคุณสมบัติมากมายที่จะจัดการกับเอกสาร (P, h3, UL, Table) แต่เฉพาะองค์ประกอบ UI พื้นฐานเช่น A, INPUT และปุ่ม Windows และระบบปฏิบัติการอื่นรองรับ API ที่อนุญาตให้ (Assistive Technology) AT เข้าถึงการทำงานของการควบคุม UI Internet Explorer และเบราว์เซอร์อื่น ๆ แมปองค์ประกอบ HTML ดั้งเดิมกับ API การเข้าถึง แต่ตัวควบคุม html นั้นไม่สมบูรณ์เท่ากับตัวควบคุมทั่วไปบนระบบปฏิบัติการเดสก์ท็อปและไม่เพียงพอสำหรับเว็บแอปพลิเคชันสมัยใหม่การควบคุมแบบกำหนดเองสามารถขยายองค์ประกอบ HTML UI ที่จำเป็นสำหรับเว็บแอปพลิเคชันที่ทันสมัย ก่อนที่ ARIA เบราว์เซอร์จะไม่มีวิธีเปิดเผยความพิเศษนี้ให้กับ accessibility API หรือ AT ตัวอย่างคลาสสิกของปัญหานี้คือการเพิ่มตัวจัดการการคลิกให้กับรูปภาพ มันสร้างสิ่งที่ดูเหมือนว่าจะเป็นปุ่มที่คลิกได้สำหรับผู้ใช้เมาส์ แต่ยังคงเป็นเพียงภาพของแป้นพิมพ์หรือผู้ใช้ AT

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

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

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

ฉันใช้คำถามอื่นเกี่ยวกับ ARIA แต่เนื้อหาดูเหมือนจะมีแนวโน้มมากขึ้นสำหรับคำถามนี้ ต้องการแบ่งปัน

ARIA คืออะไร

หากคุณพยายามทำให้ผู้ใช้สามารถเข้าถึงเว็บไซต์ของคุณด้วยความหลากหลายของพฤติกรรมการท่องเว็บและความพิการทางร่างกายที่แตกต่างกันคุณน่าจะรับรู้ถึงบทบาทและคุณสมบัติของแอเรีย * WAI-ARIA (แอปพลิเคชันอินเทอร์เน็ตที่เข้าถึงได้อย่างสมบูรณ์) เป็นวิธีการจัดทำวิธีการกำหนดเนื้อหาเว็บและแอปพลิเคชันแบบไดนามิกของคุณเพื่อให้คนพิการสามารถระบุและโต้ตอบกับมันได้สำเร็จ สิ่งนี้ทำได้ผ่านบทบาทที่กำหนดโครงสร้างของเอกสารหรือแอปพลิเคชันหรือผ่านแอททริบิวต์ aria- * ซึ่งกำหนดวิดเจ็ต - บทบาท, ความสัมพันธ์, สถานะหรือคุณสมบัติ

แนะนำให้ใช้ ARIA ในข้อมูลจำเพาะเพื่อให้แอปพลิเคชัน HTML5 เข้าถึงได้มากขึ้น เมื่อใช้องค์ประกอบ semantic HTML5 คุณควรกำหนดบทบาทที่สอดคล้องกัน

และดูวิดีโอหลอดนี้สำหรับ ARIA live