ทำให้แอปหน้าเดียวของคุณทำงานร่วมกับโปรแกรมอ่านหน้าจอ

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

วิธีแก้ไขอย่างหนึ่งคือการสร้างข้อความตามชื่อเพจและใช้ประโยชน์จากพื้นที่สดของ ARIA เพื่อประกาศอย่างชัดเจนผ่านข้อความที่เป็นประโยชน์ซึ่งมีการโหลดมุมมองใหม่ ขั้นแรกให้สร้างฟังก์ชันที่ถูกเรียกใช้เมื่อมีการอัปเดต viewContent AngularJS จัดเตรียมเหตุการณ์ $ viewContentLoaded สำหรับวัตถุประสงค์นี้ ในรหัสคอนโทรลเลอร์ฟังเหตุการณ์และเรียกใช้ฟังก์ชัน (ใน CoffeeScript):

app.controller ’PageController’, ($ scope, $ location, $ http) -> $ scope. $ บน ’$ viewContentLoaded’, ประกาศ_view_loaded

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

วิธีหนึ่งในการทำเช่นนี้คือการใช้แอตทริบิวต์ข้อมูลที่ใดที่หนึ่งในมุมมองเพื่อจัดเก็บชื่อมุมมอง:

document.title = $ ("[data-viewtitle]"). data "viewtitle"

ตอนนี้สร้างข้อความโดยใช้ชื่อเพจที่อัปเดตแล้วประกาศ:

$ .announce (document.title + ’, view loaded’)

$ .announce () เป็นฟังก์ชัน jQuery ที่ใช้พื้นที่สดเดียวที่มองไม่เห็นเพื่อประกาศเนื้อหา วิธีนี้ช่วยลดความซับซ้อนของโค้ดและความพยายามในการดีบักเมื่อเทียบกับการใช้พื้นที่จริงแบบเฉพาะกิจ อย่างไรก็ตามมีแนวทางปฏิบัติที่ดีที่สุดบางประการที่ควรจดจำ

ขั้นแรกให้สร้างพื้นที่สดของ "ผู้ประกาศ" รายการเดียวในเพจของคุณเพื่อประกาศเนื้อหาโดยใช้ aria-live = "สุภาพ | กล้าแสดงออก" ห้ามใช้พื้นที่ถ่ายทอดสดอื่น ๆ รวมถึงบทบาทของพื้นที่ที่ถ่ายทอดสด (เช่น role = "alert | timer | log") ตัวอย่างพื้นที่สด:

div aria-live = "สุภาพ" id = "ผู้ประกาศ"> (จะมีการประกาศข้อความที่เพิ่มหรืออัปเดตที่นี่) / div>

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

สุดท้ายเช่นเดียวกับเทคนิคการช่วยสำหรับการเข้าถึงใด ๆ ให้ใช้ $ .announce () อย่างรอบคอบ ควรใช้เพื่อสื่อสารการอัปเดต UI ที่สำคัญเท่านั้น

คำ: แพทริคฟ็อกซ์

Patrick Fox เป็นผู้อำนวยการด้านเทคโนโลยี Web UI ที่ Razorfish ในออสติน บทความนี้เคยปรากฏในนิตยสาร net ฉบับที่ 271

ชอบสิ่งนี้ไหม อ่านสิ่งเหล่านี้!

• คู่มือสำหรับนักออกแบบเกี่ยวกับการเข้าถึงแบบดิจิทัล
• แบบอักษรสคริปต์ฟรีที่ดีที่สุด
• การเลือกแบบอักษรกราฟฟิตีฟรี