ARIA: ยาพิษหรือยาแก้พิษ

ARIA คืออะไร

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

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

เมื่อมีโน้ตติดหนึบที่มีเวทมนตร์อยู่ โน้ตนั้นจะลบล้างความเชื่อของเราว่าเครื่องมือแต่ละอย่างเป็นหรือทำอะไร เช่น หากคุณเพิ่ม ARIA ที่ระบุว่า "สิ่งนี้อยู่ตรงนี้เป็นปืนกาว" แม้ว่าจะเป็นกล่องสีน้ำเงินเปล่าๆ แต่โพสต์อิทวิเศษบอกเราว่านี่คือปืนกาว นอกจากนี้ เรายังเพิ่ม "และเต็ม 30%" ได้ด้วย ตอนนี้โปรแกรมอ่านหน้าจอจะรายงานว่ากาวร้อนมีกาวเหลืออยู่ 30%

รายการที่เทียบเท่าในเว็บคือการใช้ div ธรรมดาที่มีรูปภาพอยู่ภายใน และ ใช้ ARIA เพื่อระบุว่าเป็นแถบเลื่อนที่มีค่า 30 จาก 100 ARIA ไม่ได้ทำให้ div เป็นแถบเลื่อน เพียงแต่บอกให้โปรแกรมอ่านหน้าจอบอกว่าเป็นแถบเลื่อน

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

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

ARIA ทำงานอย่างไร

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

ตัวอย่างการใช้งาน ARIA ที่พบได้ทั่วไปมีดังนี้

• เพิ่มคอมโพเนนต์พิเศษที่ไม่มีใน HTML เช่น การเติมข้อความอัตโนมัติ แผนภูมิ หรือสเปรดชีต
• เพิ่มคอมโพเนนต์ที่มีอยู่ใน HTML แต่ผู้เขียนตัดสินใจว่าควรสร้างใหม่ ซึ่งอาจเป็นเพราะต้องการเปลี่ยนลักษณะการทำงานหรือลักษณะที่ปรากฏขององค์ประกอบมาตรฐาน ตัวอย่างเช่น องค์ประกอบ <input type="range"> ของ HTML นั้นโดยพื้นฐานแล้วคือแถบเลื่อน แต่ผู้เขียนต้องการทำให้ดูแตกต่างออกไป
  • ในกรณีส่วนใหญ่ ปัญหานี้สามารถแก้ไขได้ด้วย CSS อย่างไรก็ตาม สำหรับ range นั้น CSS จะกลายเป็น awkwARD ผู้เขียนสามารถสร้างแถบเลื่อนของตนเองและใช้ role="slider" ร่วมกับ aria-valuenow เพื่อบอกค่าปัจจุบันให้แป้นพิมพ์ทราบ
• ใส่เขตข้อมูลแบบเรียลไทม์เพื่อบอกโปรแกรมอ่านหน้าจอเกี่ยวกับการเปลี่ยนแปลงที่เกี่ยวข้องในพื้นที่ของหน้า
• สร้างจุดสังเกต เช่น ส่วนหัว จุดสังเกตช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอพบสิ่งที่ต้องการได้เร็วขึ้น จุดสังเกตต่างๆ สามารถมีพื้นที่ที่เกี่ยวข้องทั้งหมด เช่น "คอนเทนเนอร์นี้เป็นพื้นที่หลักของหน้า" และ "คอนเทนเนอร์นี้ข้างๆ คือแผงการนำทาง"

เหตุผลที่ควรใช้ ARIA

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

ตัวอย่างแถบเมนู

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

แม้ว่าจะมีองค์ประกอบ <nav> แต่แถบเมนูมักประกอบขึ้นโดยใช้ div, รูปภาพ, ปุ่ม, แฮนเดิลการคลิก, แฮนเดิลการกดแป้นพิมพ์ และ ARIA

รองรับผู้ใช้เมาส์

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

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

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

ซึ่งทั้งหมดนี้เป็นสิ่งที่ไม่สามารถเข้าถึงได้ ซึ่งเป็นเรื่องปกติสำหรับสิ่งต่างๆ บนเว็บ

ทำให้แป้นพิมพ์แถบเมนูของเราเข้าถึงได้

มาเพิ่มการช่วยเหลือพิเศษสำหรับแป้นพิมพ์กัน วิธีนี้ต้องใช้การเปลี่ยนแปลง HTML เท่านั้น ไม่ใช่ ARIA โปรดทราบว่า ARIA จะไม่ส่งผลต่อแง่มุมหลักๆ เช่น ลักษณะที่ปรากฏ เมาส์ หรือแป้นพิมพ์สําหรับผู้ใช้ที่ไม่มีเทคโนโลยีความช่วยเหลือพิเศษ

หน้าเว็บจะตอบสนองต่อแป้นพิมพ์ได้เช่นเดียวกับที่ตอบสนองต่อเมาส์ JavaScript ของเราฟังการกดแป้นพิมพ์ทั้งหมดที่เกิดขึ้นและตัดสินใจได้ว่าการกดแป้นพิมพ์นั้นมีประโยชน์ไหม หากไม่พบ โปรแกรมจะส่งคำค้นหากลับไปยังหน้าเว็บเหมือนปลาที่เล็กเกินกว่าจะกินได้ กฎของเรามีดังนี้

• หากผู้ใช้กดแป้นลูกศร ให้ดูที่พิมพ์เขียวของแถบเมนูภายในของเราเองและตัดสินใจว่ารายการเมนูใหม่ควรเป็นอะไร เราจะล้างไฮไลต์ปัจจุบันและไฮไลต์รายการเมนูใหม่เพื่อให้ผู้ใช้ที่มองเห็นได้ทราบว่าอยู่ตรงจุดไหน จากนั้นหน้าเว็บควรเรียกใช้ event.preventDefault() เพื่อป้องกันไม่ให้เบราว์เซอร์ดำเนินการตามปกติ (ในกรณีนี้คือเลื่อนหน้าเว็บ)
• หากผู้ใช้กดแป้น Enter เราจะถือว่าการกดแป้นนั้นเหมือนกับการคลิก และดำเนินการที่เหมาะสม (หรือแม้แต่เปิดเมนูอื่น)
• หากผู้ใช้กดแป้นที่ควรทําอย่างอื่น ให้ส่งแป้นนั้นกลับไปยังหน้าเว็บ ตัวอย่างเช่น แถบเมนูของเราไม่จําเป็นต้องใช้แป้น Tab เลย การดำเนินการนี้ทำได้ยาก ตัวอย่างเช่น แถบเมนูต้องใช้ปุ่มลูกศร แต่ไม่ต้องใช้ Alt+ลูกศร หรือ Command+ลูกศร แป้นพิมพ์ลัดเหล่านี้ใช้สำหรับไปยังหน้าก่อนหน้าและหน้าถัดไปในประวัติการเข้าชมเว็บของแท็บเบราว์เซอร์ หากผู้เขียนไม่ระมัดระวัง แถบเมนูจะกินค่าเหล่านั้น ข้อบกพร่องประเภทนี้เกิดขึ้นบ่อยมาก และเรายังไม่ได้เริ่มใช้ ARIA เลย

สิทธิ์เข้าถึงแถบเมนูของโปรแกรมอ่านหน้าจอ

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

แต่มันไม่ยุติธรรม แถบเมนูทํางานได้ตามปกติสําหรับผู้ใช้ที่มองเห็น

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

คำโกหก ARIA แรกคือแอตทริบิวต์ aria-activedescendant ตั้งค่าแอตทริบิวต์เป็นรหัสของรายการเมนูที่ใช้งานอยู่ โดยอย่าลืมอัปเดตทุกครั้งที่มีการเปลี่ยนแปลง ตัวอย่างเช่น aria-activedescendant="settings-menuitem" ซึ่งจะทำให้โปรแกรมอ่านหน้าจอพิจารณาว่ารายการ ARIA ที่ใช้งานอยู่เป็นโฟกัส ซึ่งจะอ่านออกเสียงหรือแสดงบนจอแสดงผลอักษรเบรลล์

เมื่อใช้ aria-activedescendant เพื่อชี้จากแถบเมนูที่โฟกัสไปยังรายการเมนูที่เฉพาะเจาะจง โปรแกรมอ่านหน้าจอจะทราบว่าผู้ใช้ย้ายไปที่ใด แต่จะไม่ทราบว่าวัตถุนั้นคืออะไร div คืออะไร ซึ่งก็คือหน้าที่ของแอตทริบิวต์บทบาท เราใช้ role="menubar" ในองค์ประกอบที่มีข้อมูลทั้งหมด จากนั้นใช้ role="menu" ในกลุ่มรายการ และ role="menuitem" ในรายการเมนูแต่ละรายการ

แล้วถ้ารายการในเมนูอาจทำให้มีเมนูย่อยได้ ผู้ใช้ต้องทราบข้อมูลนี้ สําหรับผู้ใช้ที่มองเห็นภาพ อาจมีรูปสามเหลี่ยมเล็กๆ ที่ท้ายเมนู แต่โปรแกรมอ่านหน้าจอไม่รู้วิธีอ่านรูปภาพโดยอัตโนมัติอย่างน้อยในตอนนี้ เราเพิ่ม aria-expanded="false" ลงในรายการเมนูแบบขยายได้แต่ละรายการเพื่อระบุว่ามีบางอย่างที่ขยายได้และยังไม่ได้ขยาย นอกจากนี้ ผู้เขียนควรใส่ role="none" บนสามเหลี่ยม img เพื่อระบุว่ามีวัตถุประสงค์เพื่อความงามเท่านั้น ซึ่งจะป้องกันไม่ให้โปรแกรมอ่านหน้าจอพูดอะไรเกี่ยวกับรูปภาพซ้ำ

แก้ไขข้อบกพร่องของแป้นพิมพ์

แม้ว่าการเข้าถึงด้วยแป้นพิมพ์จะเป็นส่วนหนึ่งของ HTML หลัก แต่ก็สามารถเขียนทับได้ง่ายๆ เช่น

• ช่องทำเครื่องหมายใช้แป้นเว้นวรรคเพื่อสลับ แต่ผู้เขียนลืมเรียก preventDefault() ตอนนี้ Spacebar จะเปิด/ปิดช่องทำเครื่องหมายและเลื่อนหน้าลง ซึ่งเป็นลักษณะการทำงานเริ่มต้นของเบราว์เซอร์สำหรับ Spacebar
• กล่องโต้ตอบแบบโมดัล ARIA ต้องการกักขังการไปยังส่วนต่างๆ ด้วยแท็บไว้ภายใน หากผู้เขียนลืมอนุญาตControl+Tab เพื่อเปิดแท็บใหม่โดยเฉพาะขณะอยู่ในกล่องโต้ตอบ แป้นพิมพ์ลัดดังกล่าวจะไม่ทำงานตามที่คาดไว้
• ผู้เขียนสร้างรายการตัวเลือกและใช้แป้นขึ้นและลง อย่างไรก็ตาม ผู้เขียนยังคงต้องเพิ่มการนำทางที่หน้าแรก ส่วนท้าย หน้าขึ้น หน้าลง หรือตัวอักษรแรก

ผู้แต่งควรทำตามรูปแบบที่รู้จัก ดูข้อมูลเพิ่มเติมได้ที่ส่วนแหล่งข้อมูล

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

ข้อบกพร่องของแป้นพิมพ์มักจะเป็นข้อบกพร่องในเนื้อหาเว็บ โดยเฉพาะใน HTML และ JavaScript ไม่ใช่ใน ARIA

ทำไมจึงมีจำนวนมาก

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

ท้ายที่สุดแล้ว อาจมีบางอย่างผิดพลาดใน ARIA เว้นแต่ผู้เขียนจะเป็นผู้ใช้โปรแกรมอ่านหน้าจอที่มีประสบการณ์ ในตัวอย่างแถบเมนู ผู้เขียนอาจคิดว่าควรใช้บทบาท "option" เมื่อ "menuitem" ถูกต้อง ผู้ใช้อาจลืมใช้ aria-expanded ลืมตั้งค่าและล้าง aria-activedescendant ในเวลาที่เหมาะสม หรือลืมมีแถบเมนูที่มีเมนูอื่นๆ แล้วจำนวนรายการในเมนูล่ะ โดยปกติแล้ว โปรแกรมอ่านหน้าจอจะแสดงรายการเมนูด้วยข้อความอย่าง "รายการที่ 3 จาก 5" เพื่อให้ผู้ใช้ทราบว่าอยู่ตรงไหน โดยปกติแล้วเบราว์เซอร์จะนับจำนวนนี้โดยอัตโนมัติ แต่ในบางกรณีและในบางชุดค่าผสมของเบราว์เซอร์กับโปรแกรมอ่านหน้าจอ ระบบอาจคํานวณตัวเลขที่ไม่ถูกต้อง และผู้เขียนจะต้องลบล้างตัวเลขเหล่านี้ด้วย aria-posinset และ aria-setsize

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

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

สรุป

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

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

แหล่งข้อมูลเพิ่มเติม

แนวทางปฏิบัติด้านการเขียน ARIA ของ W3C อธิบายลักษณะการไปยังส่วนต่างๆ ที่สำคัญของแป้นพิมพ์สำหรับตัวอย่างแต่ละรายการ รวมถึงแสดง JavaScript, CSS และ ARIA ที่ใช้งานได้ ตัวอย่างนี้มุ่งเน้นที่สิ่งที่ใช้งานได้ในปัจจุบันและไม่ครอบคลุมอุปกรณ์เคลื่อนที่

Accessibility API คืออะไร

API การช่วยเหลือพิเศษคือวิธีที่โปรแกรมอ่านหน้าจอหรือเทคโนโลยีความช่วยเหลือพิเศษอื่นๆ ทราบสิ่งที่อยู่ในหน้าเว็บและสิ่งที่กําลังเกิดขึ้น ตัวอย่างเช่น MSAA, IA2 และ UIA Accessibility API ประกอบด้วย 2 ส่วน ได้แก่

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

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