การโกหกโปรแกรมอ่านหน้าจอจะช่วยรักษาการช่วยเหลือพิเศษได้อย่างไรเมื่อโปรแกรมไม่ขจัดเกลือ
ARIA คืออะไร
ARIA ช่วยให้ผู้เขียนเว็บสร้างความเป็นจริงเสมือนได้ในอีกหน้าจอหนึ่ง โดยใช้เพียงโปรแกรมอ่านหน้าจอ 🤥
บางครั้งก็จำเป็นต้องอธิบายจากความเป็นจริงหรือแม้แต่ "โกหก" อย่างตรงไปตรงมาเพื่อให้โปรแกรมอ่านหน้าจอรู้ว่าเกิดอะไรขึ้นในเนื้อหาเว็บ เช่น "โฟกัสอยู่ตรงนี้จริงๆ!" หรือ "นี่คือแถบเลื่อนจริงๆ!" เหมือนกับการใส่โน้ตติดหนึบวิเศษบนเครื่องมือและวิดเจ็ตบนโต๊ะทำงาน โน้ตติดหนึบที่มีเวทมนตร์เหล่านี้ทำให้ทุกคนไม่เชื่อสิ่งที่เขียนลงไป
เมื่อใดก็ตามที่มีโน้ตติดหนึบที่มีเวทมนตร์อยู่ ข้อความนั้นอาจลบล้างความเชื่อของเราว่าเครื่องมือแต่ละอย่างคืออะไรหรือบางอย่างเกี่ยวกับเครื่องมือ ตัวอย่างเช่น "นี่คือปืนกาว!" ถึงแม้ว่าจริงๆ แล้วมันยังคงเป็นกล่องสีฟ้าเปล่าๆ ที่วางอยู่บนโต๊ะทำงาน แต่โน้ตติดหนึบที่มีเวทมนตร์นี้ก็จะทำให้เราเห็นว่ามันคือปืนกาว หรือจะบอกว่า "เต็ม 30% แล้ว" ก็ได้เช่นกัน ตอนนี้โปรแกรมอ่านหน้าจอจะรายงานว่า มีปืนกาวเต็ม 30% อยู่ตรงนั้น
สิ่งที่เทียบเท่ากับเว็บนี้คือการนำองค์ประกอบแบบกล่องธรรมดา (div) ที่มีรูปภาพอยู่ภายใน และใช้ ARIA เพื่อระบุว่าเป็นแถบเลื่อนที่มีค่า 30 จาก 100
ARIA คืออะไร
ARIA ไม่ส่งผลต่อลักษณะที่ปรากฏของหน้าเว็บ หรือพฤติกรรมของผู้ใช้เมาส์หรือแป้นพิมพ์ มีเพียงผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษเท่านั้นที่จะสังเกตเห็นความแตกต่างจาก ARIA นักพัฒนาเว็บเพิ่ม ARIA ใดก็ได้ตามต้องการโดยไม่ส่งผลกระทบต่อผู้ใช้ที่ไม่ได้ใช้เทคโนโลยีความช่วยเหลือพิเศษ
คุณอ่านถูกแล้ว เพราะ ARIA ไม่ได้ทำอะไรกับการโฟกัสแป้นพิมพ์หรือลำดับแท็บ ซึ่งทั้งหมดเป็น HTML บางครั้งก็ปรับแต่งด้วย JavaScript เล็กน้อย
ARIA ทำงานอย่างไร
โปรแกรมอ่านหน้าจอหรือเทคโนโลยีความช่วยเหลือพิเศษอื่นๆ จะขอข้อมูลเกี่ยวกับองค์ประกอบแต่ละรายการจากเบราว์เซอร์ เมื่อมี ARIA อยู่ในองค์ประกอบหนึ่ง เบราว์เซอร์จะรับข้อมูลและเปลี่ยนสิ่งที่โปรแกรมอ่านหน้าจอทราบเกี่ยวกับองค์ประกอบนั้น
ทำไมต้องใช้ ARIA
ทำไมเราถึงอยากโกหกผู้ใช้กันทั้งนั้น
สมมติว่าเว็บสโตร์ในพื้นที่ไม่ได้ขายวิดเจ็ตทุกชนิดที่เราต้องการ พวกเราคือ MacGyver เราประดิษฐ์วิดเจ็ตของเราเอง จากวิดเจ็ตอื่นๆ ได้ FWIW, สิ่งของที่ใช้บ่อย 7 อย่างของ MacGyver คือมีดสวิส หมากฝรั่ง เชือกรองเท้า ไม้ขีด คลิปหนีบกระดาษ เทียนวันเกิด และเทปกาว เขาใช้พวกมันทำระเบิดและสิ่งอื่นๆ ที่ไม่ใช่แค่วางทิ้งไว้ ซึ่งก็คล้ายกับผู้เขียนเว็บ ที่จำเป็นต้องสร้างแถบเมนู แถบเมนูมีประโยชน์มากจนคิดว่าน่าจะเป็น HTML แต่กลับไม่เป็นเช่นนั้น โอเค คุณไม่คิดว่าผู้เขียนจะชอบลิงก์และปุ่มนี้หรือเปล่า ดังนั้น ผู้เขียนจะวางเครื่องมือต่างๆ ที่ตนชื่นชอบ ได้แก่ div, รูปภาพ, รูปแบบ, เครื่องจัดการการคลิก, เครื่องจัดการการกดแป้นพิมพ์, spi และ ARIA
บางครั้ง แทนที่จะใช้ ARIA ระดับสูงสุด เราจะใช้เฉพาะการเพิ่มประสิทธิภาพแทน การใส่ ARIA เล็กน้อยใน HTML ที่ใช้งานได้ดีอยู่แล้วอาจมีประโยชน์ เช่น เราอาจต้องการให้ตัวควบคุมแบบฟอร์มชี้ไปยังการแจ้งเตือนข้อความแสดงข้อผิดพลาดที่เกี่ยวข้องกับอินพุตที่ไม่ถูกต้อง หรือเราอาจต้องการระบุว่า กล่องข้อความมีไว้สำหรับการค้นหา การปรับเปลี่ยนเล็กน้อยนี้จะทำให้เว็บไซต์ธรรมดาๆ ใช้กับโปรแกรมอ่านหน้าจอได้มากขึ้น
ตัวอย่างแถบเมนู
การสนับสนุนคนคลิกเมาส์
มาสร้างแถบเมนูกัน เราจะแสดงรายการจำนวนมากในองค์ประกอบกล่องทั่วไปที่เรียกว่า div เมื่อใดก็ตามที่ผู้ใช้คลิก div จะเป็นการเรียกใช้คำสั่งที่เกี่ยวข้อง เยี่ยมเลย เหมาะสำหรับ ผู้ที่คลิกเมาส์!
ต่อไปเราจะปรับแต่งให้ดูดี เราใช้ CSS ซึ่งก็คือสไตล์ จัดวางสิ่งต่างๆ อย่างสวยงามและ วางโครงร่างรูปภาพไว้รอบๆ เราปรับแต่งให้เหมือนกับแถบเมนูอื่นๆ ที่ผู้เข้าชมรู้อยู่แล้วว่านี่คือแถบเมนูและวิธีใช้ แถบเมนูของเราใช้สีพื้นหลังอื่นๆ กับรายการใดๆ ก็ตามที่ใช้เมาส์วางเหนือ เพื่อให้ความคิดเห็นที่เป็นประโยชน์แก่ผู้ใช้
บางรายการในเมนูเป็นรายการหลัก พวกเขาจึงสร้างเมนูย่อยขึ้นมา เมื่อใดก็ตามที่ผู้ใช้วางเมาส์เหนือรายการใดรายการหนึ่งเหล่านี้ เราจะเริ่มภาพเคลื่อนไหวที่เลื่อนเมนูย่อยย่อยออก
แน่นอนว่านี่ก็เป็นสิ่งที่ไม่สามารถเข้าถึงได้ เช่นเดียวกับกรณีทั่วไปสำหรับสิ่งต่างๆ บนเว็บ ซึ่งโดยส่วนใหญ่เป็นเพราะวิซาร์ดมาตรฐาน HTML ไม่ได้เพิ่มทุกอย่างที่ผู้เขียนเว็บต้องการ และถึงแม้ว่าผู้เขียนจะคิดค้นบทความเวอร์ชันพิเศษขึ้นมาเองก็ตาม
การทำให้แป้นพิมพ์แถบเมนูเข้าถึงได้
ขั้นตอนแรกสำหรับการช่วยเหลือพิเศษ เรามาเพิ่มฟีเจอร์การช่วยเหลือพิเศษด้วยแป้นพิมพ์กัน ส่วนนี้ใช้ HTML เท่านั้น ไม่ใช่ ARIA โปรดทราบว่า ARIA ไม่ส่งผลต่อด้านหลักๆ เช่น ลักษณะที่ปรากฏ เมาส์ หรือแป้นพิมพ์สำหรับผู้ใช้ที่ไม่มีเทคโนโลยีความช่วยเหลือพิเศษ
เช่นเดียวกับหน้าเว็บที่สามารถตอบสนองต่อเมาส์ หน้าเว็บก็สามารถตอบสนองต่อแป้นพิมพ์ได้เช่นกัน JavaScript จะคอยฟังการกดแป้นพิมพ์ทั้งหมดที่เกิดขึ้นและตัดสินใจว่าการกดแป้นพิมพ์นั้นมีประโยชน์หรือไม่ ไม่เช่นนั้น ก็จะโยนกลับไปยัง หน้าเว็บเหมือนปลาที่มีขนาดเล็กเกินไป กฎของเรามีดังนี้
- หากผู้ใช้กดปุ่มลูกศร ให้ดูที่พิมพ์เขียวของแถบเมนูภายในของเรา และตัดสินใจว่ารายการในเมนูใหม่ที่ใช้งานอยู่นั้นควรจะเป็นอะไร เราจะล้างไฮไลต์ปัจจุบันและไฮไลต์รายการในเมนูใหม่ เพื่อให้ผู้ใช้ที่มองเห็นทราบว่าตนเองอยู่ที่ไหน จากนั้น หน้าเว็บควรเรียกใช้
event.preventDefault()เพื่อป้องกันไม่ให้เบราว์เซอร์ทำงานตามปกติ (ในกรณีนี้การเลื่อนหน้าเว็บ) - หากผู้ใช้กดปุ่ม Enter เราจะดำเนินการกับปุ่มดังกล่าวเช่นเดียวกับการคลิก และดำเนินการที่เหมาะสม (หรือแม้แต่เปิดเมนูอื่น)
- หากผู้ใช้กดแป้นที่ควรทำอย่างอื่น อย่ากินคีย์นั้น! นำกลับไปยังหน้าเว็บตามที่ควรจะเป็น เช่น แถบเมนูไม่จำเป็นต้องมีปุ่ม Tab คุณก็ไม่ต้องกรอกใหม่ การแก้ไขนี้ยากที่จะแก้ไขได้ และผู้เขียนมักจะทำพลาด เช่น แถบเมนูต้องใช้ปุ่มลูกศร แต่ไม่ใช่ Alt+Arrow หรือ 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" ในรายการเมนูที่ขยายได้แต่ละรายการเพื่อระบุว่า 1) มีสิ่งที่ขยายได้ และ 2) สิ่งที่ขยายไม่ได้ในตอนนี้ นอกจากนี้ ผู้เขียนควรใส่ role="none" ไว้ที่สามเหลี่ยมภาพเพื่อวัตถุประสงค์ในการแปลค่าเท่านั้น เพื่อป้องกันไม่ให้โปรแกรมอ่านหน้าจอพูดอะไรก็ได้เกี่ยวกับรูปภาพที่ซ้ำซ้อนและน่ารำคาญ
การจัดการข้อบกพร่อง
ข้อบกพร่องของแป้นพิมพ์ (HTML!)
แม้ว่าการเข้าถึงด้วยแป้นพิมพ์จะเป็นส่วนหนึ่งของ HTML หลัก แต่ผู้เขียนก็มักทำพลาดตลอดเวลา ไม่ว่าจะเป็นเพราะไม่ได้ใช้แป้นพิมพ์เพื่อไปยังส่วนต่างๆ มากขนาดนั้น หรือเพราะว่ามีขั้นตอนที่ซับซ้อนเล็กน้อย
ตัวอย่างข้อบกพร่อง:
- ช่องทำเครื่องหมายจะใช้แป้นเว้นวรรคเพื่อเปิด/ปิด แต่ผู้เขียนลืมเรียกใช้
preventDefault()ตอนนี้ Spacebar จะสลับช่องทำเครื่องหมายและเลื่อนหน้าลง ซึ่งเป็นการทำงานเริ่มต้นสำหรับ Spacebar - กล่องโต้ตอบโมดัล ARIA ต้องการที่จะดักจับการนำทางแท็บไว้ด้านใน และผู้เขียนลืมอนุญาต Control+Tab ผ่านเบราว์เซอร์โดยเฉพาะ แต่ในตอนนี้ Control+Tab จะไปยังส่วนต่างๆ ภายในกล่องโต้ตอบเท่านั้น และไม่สลับแท็บในเบราว์เซอร์อย่างที่ควรจะเป็น เฮ้อ
- ผู้เขียนสร้างรายการการเลือกและใช้การตั้งค่าขึ้น/ลง แต่ไม่ใช้หน้าแรก/หน้าแรก/หน้าเพจ/เพจดาวน์ หรือการนำทางแบบอักษรตัวแรก
ผู้เขียนควรใช้รูปแบบที่รู้จัก ดูข้อมูลเพิ่มเติมได้ในส่วนแหล่งข้อมูล
สำหรับปัญหาการเข้าถึงแป้นพิมพ์เพียงอย่างเดียว ก็ควรลองใช้โดยไม่ใช้โปรแกรมอ่านหน้าจอหรือโหมดเบราว์เซอร์เสมือน โดยทั่วไปโปรแกรมอ่านหน้าจอไม่จำเป็นต้องค้นพบข้อบกพร่องของแป้นพิมพ์ และจริงๆ แล้วการเข้าถึงแป้นพิมพ์นั้นใช้งานได้ด้วย HTML ไม่ใช่ ARIA ทั้งนี้ ARIA ไม่ได้ส่งผลอะไรต่อการทำงานพื้นฐาน เช่น การทำงานของแป้นพิมพ์หรือเมาส์ แต่อยู่ที่โปรแกรมอ่านหน้าจอเกี่ยวกับสิ่งที่อยู่ในหน้าเว็บ สิ่งที่โฟกัสอยู่ ฯลฯ
ข้อบกพร่องของแป้นพิมพ์มักเป็นข้อบกพร่องในเนื้อหาเว็บ โดยเฉพาะใน HTML และ JavaScript ไม่ใช่ใน ARIA
ข้อบกพร่อง ARIA: ทำไมจึงมีจำนวนมาก
มีหลายที่ที่ผู้เขียนอาจเข้าใจผิดเกี่ยวกับ ARIA ได้ และทั้ง 2 อย่างนี้ก็นำไปสู่การเสียหายโดยสิ้นเชิงหรือเกิดความแตกต่างเล็กน้อย ส่วนเล็กๆ น้อยๆ อาจแย่กว่าเนื่องจากผู้เขียนไม่ได้อ่านเนื้อหาส่วนใหญ่ก่อนเผยแพร่
อย่างไรก็ตาม น่าจะมีบางอย่างผิดปกติใน ARIA เว้นแต่ผู้เขียนจะเป็นผู้ใช้ที่มีประสบการณ์ใช้โปรแกรมอ่านหน้าจอ ในตัวอย่างแถบเมนู ผู้เขียนอาจคิดว่าควรใช้บทบาท "ตัวเลือก" เมื่อ "เมนู" ถูกต้อง ผู้ใช้อาจลืมใช้ aria-expanded ลืมตั้งค่าและล้าง
aria-activedescendant ในเวลาที่เหมาะสม หรือลืมสร้างแถบเมนูที่มีเมนูอื่นๆ
แล้วจำนวนรายการในเมนูล่ะ ปกติแล้วรายการเมนูจะแสดงโดยโปรแกรมอ่านหน้าจอพร้อมกับ "รายการที่ 3 จาก 5" เพื่อให้ผู้ใช้ทราบว่าตนอยู่ที่ไหน โดยทั่วไปเบราว์เซอร์จะนับตัวเลขนี้โดยอัตโนมัติ แต่ในบางกรณีและในบางเบราว์เซอร์ อาจมีการคำนวณตัวเลขที่ผิดพลาดโดยใช้ aria-posinset และ aria-setsize ร่วมกับโปรแกรมอ่านหน้าจอ
นี่เป็นเพียงแถบเมนูเท่านั้น ลองคิดดูว่าวิดเจ็ตมีกี่ชนิด ตรวจสอบข้อกำหนด ARIA หรือการเขียน หากต้องการ มีการใช้ ARIA ในทางที่ผิดได้หลายรูปแบบสำหรับแต่ละรูปแบบ ARIA อาศัยข้อมูลผู้เขียนในการทราบว่าตนกำลังทำอะไรอยู่ ปัญหาที่อาจเกิดขึ้นเพราะผู้เขียนส่วนใหญ่ไม่ใช่ผู้ใช้โปรแกรมอ่านหน้าจอ
กล่าวคือ ผู้ใช้โปรแกรมอ่านหน้าจอจำเป็นต้องลองใช้วิดเจ็ต ARIA ก่อนจึงจะถือว่าจัดส่งได้ มีความละเอียดยิ่งขึ้นมากเกินไป ตามหลักการแล้วจะต้องลองใช้โปรแกรมอ่านหน้าจอกับหลายๆ ชุดร่วมกับโปรแกรมอ่านหน้าจอหลายๆ แบบ เนื่องจากมีการทำงานแปลกๆ มากมายนอกเหนือจากการใช้งานที่ไม่สมบูรณ์
สรุป
กล่าวโดยสรุป คุณสามารถใช้เวทมนตร์ ARIA เพื่อลบล้างหรือเพิ่มทุกอย่างและทุกอย่างที่ HTML ระบุไว้ โดยจะใช้ทำการเปลี่ยนแปลงอย่างละเอียดเล็กๆ น้อยๆ ในงานนำเสนอเกี่ยวกับการช่วยเหลือพิเศษ หรือเพื่อสร้างประสบการณ์โดยรวมก็ได้ นั่นจึงเป็นเหตุผลที่ ARIA ทั้งมีประสิทธิภาพและเป็นอันตรายอย่างมากอยู่ในมือของนักเขียนเว็บในท้องถิ่นซึ่งเป็นมิตรของเรา ซึ่งมักไม่ได้ใช้โปรแกรมอ่านหน้าจอเอง
ARIA เป็นเพียงเลเยอร์มาร์กอัปลบล้างความจริงที่ไม่ซับซ้อน เมื่อโปรแกรมอ่านหน้าจอถามว่าเกิดอะไรขึ้น หากมี ARIA อยู่ โปรแกรมจะได้รับเวอร์ชัน ARIA ของความจริงแทนที่จะเป็นความจริงพื้นฐาน
ภาคผนวก 1: แหล่งข้อมูลเพิ่มเติม
การอ้างอิงแบบไฮบริดพร้อมข้อมูลแป้นพิมพ์และตัวอย่างโค้ด
- แนวทางปฏิบัติในการเขียน ARIA ของ W3C: บันทึกลักษณะการนำทางที่สำคัญของแต่ละตัวอย่างด้วยแป้นพิมพ์และให้โค้ด JS/CSS/ARIA ที่ใช้งานได้ ตัวอย่างจะมุ่งเน้นสิ่งที่ใช้ได้ผลในปัจจุบันและไม่ครอบคลุมอุปกรณ์เคลื่อนที่
ภาคผนวก 2: ARIA ใช้ทำอะไรมากที่สุด
เนื่องจาก ARIA สามารถแทนที่หรือเสริมข้อเท็จจริงเล็กน้อยหรือใหญ่ได้ โดยทั่วไปแล้ว จึงเป็นประโยชน์ในการพูดสิ่งที่โปรแกรมอ่านหน้าจอสนใจ
การใช้งาน ARIA ที่พบบ่อยมีดังนี้
- วิดเจ็ตพิเศษที่ไม่มีใน HTML เช่น แถบเมนู การเติมข้อความอัตโนมัติ แผนผัง หรือสเปรดชีต
- วิดเจ็ตที่มีอยู่ใน HTML แต่ผู้เขียนเป็นผู้คิดค้นวิดเจ็ตขึ้นมาเอง ซึ่งอาจเป็นเพราะจำเป็นต้องปรับเปลี่ยนลักษณะการทำงานหรือรูปลักษณ์ของวิดเจ็ตปกติ เช่น องค์ประกอบ HTML
<input type="range">ก็คือแถบเลื่อน แต่ผู้เขียนต้องการทำให้ดูแตกต่างออกไป โดยส่วนใหญ่ คุณใช้ CSS ได้ แต่สำหรับinput type="range"แล้ว CSS นั้นดูแปลกๆ ผู้เขียนกำหนดแถบเลื่อนของตัวเองได้ และใช้role="slider"กับaria-valuenowเพื่อระบุว่าค่าปัจจุบันคืออะไร - ภูมิภาคที่เผยแพร่อยู่จะบอกโปรแกรมอ่านหน้าจอว่า "ในพื้นที่นี้ของหน้าเว็บ ทุกอย่างที่เปลี่ยนแปลงไปนั้นควรค่าในการแจ้งผู้ใช้"
- จุดสังเกต (ตอนนี้ HTML มีค่าเทียบเท่า) ซึ่งคล้ายกับส่วนหัวตรงที่ช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอค้นหาสิ่งที่ต้องการได้เร็วขึ้น แต่มีความแตกต่างกันตรงที่มี พื้นที่ที่เกี่ยวข้องทั้งหมด เช่น "คอนเทนเนอร์นี้คือพื้นที่หลักของหน้าเว็บ" และ "คอนเทนเนอร์ตรงนี้คือแผงการนำทาง"
ภาคผนวก 3: Accessibility API คืออะไร
API การช่วยเหลือพิเศษคือวิธีที่โปรแกรมอ่านหน้าจอหรือ AT อื่นๆ รู้สิ่งที่อยู่ในหน้าเว็บและสิ่งที่เกิดขึ้นในขณะนี้ ตัวอย่างเช่น MSAA, IA2 และ UIA นี่เป็นเพียง Windows API การช่วยเหลือพิเศษมี 2 ส่วน ดังนี้
- "ต้นไม้" ของออบเจ็กต์ที่แสดงลำดับชั้นคอนเทนเนอร์ อย่างเช่น ตุ๊กตาวางไข่ของรัสเซีย แต่ตุ๊กตาแต่ละตัวจะมีตุ๊กตาอื่นๆ ได้หลายตัว ตัวอย่างเช่น เอกสารอาจมีย่อหน้าและย่อหน้าที่มีข้อความ รูปภาพ ลิงก์ ตัวหนา ฯลฯ แต่ละรายการในโครงสร้างออบเจ็กต์อาจมีพร็อพเพอร์ตี้ เช่น บทบาท (ฉันคืออะไร) ชื่อ/ป้ายกำกับ ค่าที่ผู้ใช้ป้อน คำอธิบาย รวมถึงสถานะบูลีน เช่น โฟกัสได้ โฟกัส จำเป็น ทำเครื่องหมาย ARIA สามารถลบล้างพร็อพเพอร์ตี้เหล่านี้ได้ โปรแกรมอ่านหน้าจอจะใช้โครงสร้างนี้เพื่อช่วยผู้ใช้ไปยังส่วนต่างๆ ในโหมดบัฟเฟอร์เสมือน เช่น "โปรดไปที่ส่วนหัวถัดไป"
- ชุดเหตุการณ์ที่เกิดขึ้นที่อธิบายการเปลี่ยนแปลงของแผนผัง เช่น "ตอนนี้โฟกัสอยู่ตรงนี้แล้ว!" โปรแกรมอ่านหน้าจอจะใช้เหตุการณ์ดังกล่าวเพื่อแจ้งให้ผู้ใช้ทราบถึงสิ่งที่เกิดขึ้น เมื่อมีการเปลี่ยนแปลงมาร์กอัป HTML หรือ ARIA ที่สำคัญ เหตุการณ์จะเริ่มทำงานเพื่อบอกโปรแกรมอ่านหน้าจอว่ามีการเปลี่ยนแปลงบางอย่าง
ผู้เขียนมักจะใช้ HTML ซึ่งแมปกับ API การช่วยเหลือพิเศษเหล่านี้อย่างสวยงาม เมื่อ HTML ยังไม่เพียงพอ ระบบจะใช้ ARIA และเบราว์เซอร์ลบล้างความหมายของ HTML ก่อนที่จะส่งแผนผังออบเจ็กต์หรือเหตุการณ์ไปยังโปรแกรมอ่านหน้าจอ