JavaScript มีบทบาทสำคัญในเกือบทุกอย่างที่เราสร้าง ตั้งแต่ส่วนที่เล็กลง คอมโพเนนต์แบบไดนามิกสำหรับผลิตภัณฑ์เต็มรูปแบบที่ทำงานบนเฟรมเวิร์ก JavaScript เช่น แสดงความรู้สึกหรือ Angular
การใช้ JavaScript นี้ (หรือมากเกินไป) ได้นำมาซึ่งแนวโน้มที่น่าตกใจจำนวนมาก เช่น ใช้เวลาโหลดนานเนื่องจากมีโค้ดจำนวนมาก การใช้ HTML ที่ไม่มีความหมาย และการแทรก HTML และ CSS ผ่านทาง JavaScript และคุณอาจ และไม่แน่ใจว่าการช่วยเหลือพิเศษจะเหมาะกับส่วนต่างๆ เหล่านี้อย่างไร
JavaScript อาจมีผลกระทบอย่างมากต่อการเข้าถึงเว็บไซต์ของคุณ ด้วยวิธีนี้ เราจะแชร์รูปแบบทั่วไปสำหรับการช่วยเหลือพิเศษ และการแก้ไขปัญหาการเข้าถึงได้ง่ายที่เกิดจาก โดยใช้เฟรมเวิร์ก JavaScript
เหตุการณ์ทริกเกอร์
เหตุการณ์ JavaScript ช่วยให้ผู้ใช้สามารถโต้ตอบกับเนื้อหาเว็บและดำเนินการ การดำเนินการที่เจาะจง ผู้คนมากมาย เช่น ผู้ใช้โปรแกรมอ่านหน้าจอ ผู้ที่มีความพิการทักษะการเคลื่อนไหวเล็กน้อย หรือคนที่ไม่มีเมาส์หรือแทร็กแพด และรายการอื่นๆ ต้องอาศัยการสนับสนุนผ่านแป้นพิมพ์ในการโต้ตอบกับเว็บ คุณจำเป็นต้องเพิ่มการรองรับแป้นพิมพ์ลงในการทำงานของ JavaScript เนื่องจาก ส่งผลต่อผู้ใช้เหล่านี้ทั้งหมด
ลองดูที่เหตุการณ์การคลิก
หากใช้เหตุการณ์ onClick() ในองค์ประกอบ HTML เชิงความหมาย เช่น <button>
หรือ <a> โดยทั่วไปจะมีทั้งฟังก์ชันของเมาส์และแป้นพิมพ์ อย่างไรก็ตาม
ระบบจะไม่ใช้ฟังก์ชันของแป้นพิมพ์โดยอัตโนมัติเมื่อเกิดเหตุการณ์ onClick()
จะเพิ่มลงในองค์ประกอบที่ไม่มีความหมาย เช่น <div> ทั่วไป
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
<button onclick="doAction()">Click me!</button>
แสดงตัวอย่างการเปรียบเทียบนี้บน CodePen
หากมีการใช้องค์ประกอบที่ไม่ใช่ความหมายสำหรับเหตุการณ์ทริกเกอร์ เหตุการณ์คีย์ดาวน์/คีย์อัป ต้องเพิ่มเพื่อตรวจหาการกดแป้น Enter หรือ Space การเพิ่มเหตุการณ์ทริกเกอร์ไปยัง องค์ประกอบที่ไม่มีความหมายมักถูกลืม น่าเสียดายที่ถ้าเราลืมไปแล้ว ผลการค้นหาเป็นส่วนประกอบที่เข้าถึงได้ด้วยเมาส์เท่านั้น แป้นพิมพ์เท่านั้น ผู้ใช้จะไม่สามารถเข้าถึงการดำเนินการที่เกี่ยวข้องได้
ชื่อหน้าเว็บ
ตามที่เราได้เรียนรู้ในโมดูลเอกสารไปว่า ชื่อหน้าเป็นสิ่งจำเป็นสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ ช่วยบอกผู้ใช้ว่าหน้าใด ผู้ใช้เปิดอยู่หรือไม่ และได้ไปยังหน้าใหม่หรือไม่
หากใช้เฟรมเวิร์ก JavaScript คุณต้องคำนึงถึงวิธีจัดการหน้าเว็บ
หนังสือ ซึ่งสำคัญอย่างยิ่งสำหรับ
แอปหน้าเดียว (SPA)
ที่โหลดจากไฟล์ index.html ที่เป็นเอกพจน์ เป็นการเปลี่ยนหรือเส้นทาง (หน้า
การเปลี่ยนแปลง) จะไม่เกี่ยวข้องกับการโหลดหน้าเว็บซ้ำ ทุกครั้งที่ผู้ใช้โหลดหน้าเว็บใหม่ใน
SPA ชื่อจะไม่เปลี่ยนแปลงโดยค่าเริ่มต้น
สำหรับ SPA จะใช้ document.title ด้วยตนเองหรือด้วยแพ็กเกจตัวช่วยก็ได้ (ขึ้นอยู่กับ เฟรมเวิร์ก JavaScript) ประกาศเกี่ยวกับ ชื่อหน้าที่อัปเดต ผู้ใช้โปรแกรมอ่านหน้าจออาจต้องดำเนินการเพิ่มเติม แต่ข่าวดีก็คือ คุณจะมีตัวเลือก เช่น เนื้อหาแบบไดนามิก
เนื้อหาแบบไดนามิก
ฟังก์ชันการทำงานของ JavaScript ที่มีประสิทธิภาพมากที่สุดอย่างหนึ่งคือการเพิ่ม HTML และ CSS ไปยัง องค์ประกอบใดก็ได้ในหน้าเว็บ นักพัฒนาซอฟต์แวร์สามารถสร้างแอปพลิเคชันแบบไดนามิกได้ ขึ้นอยู่กับการกระทำหรือพฤติกรรมของผู้ใช้
สมมติว่าคุณต้องการส่งข้อความถึงผู้ใช้เมื่อพวกเขาเข้าสู่ระบบเว็บไซต์ของคุณ หรือแอป คุณต้องการให้ข้อความโดดเด่นจากพื้นหลังสีขาวและมีลักษณะเป็นรีเลย์ ข้อความ: "คุณลงชื่อเข้าใช้แล้ว"
คุณสามารถใช้องค์ประกอบ innerHTML
เพื่อตั้งค่าเนื้อหา
document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';
คุณจะใช้ CSS ด้วยวิธีที่คล้ายกันกับ
setAttribute:
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
พลังที่ยิ่งใหญ่มาพร้อมกับความรับผิดชอบอันใหญ่ยิ่ง ขออภัย JavaScript ที่ผ่านมามีการใช้การแทรก HTML และ CSS ในทางที่ผิดเพื่อทำให้เข้าถึงไม่ได้ เนื้อหา ตัวอย่างการใช้ในทางที่ผิดที่พบได้บ่อยแสดงไว้ที่นี่
| การใช้ในทางที่ผิดที่อาจเกิดขึ้น | การใช้งานที่ถูกต้อง |
|---|---|
| แสดงผล HTML ที่ไม่มีความหมายเป็นจํานวนมาก | แสดง HTML เชิงความหมายส่วนเล็กๆ |
| ไม่ให้เทคโนโลยีความช่วยเหลือพิเศษรู้จักเนื้อหาแบบไดนามิก | การใช้การหน่วงเวลา setTimeout() เพื่อให้ผู้ใช้ได้ยินข้อความทั้งหมด |
การใช้แอตทริบิวต์รูปแบบสำหรับ onFocus() แบบไดนามิก |
ใช้ :focus สำหรับองค์ประกอบที่เกี่ยวข้องในสไตล์ชีต CSS |
| การใช้รูปแบบอินไลน์อาจทำให้สไตล์ชีตของผู้ใช้อ่านได้ไม่ถูกต้อง | เก็บรูปแบบของคุณไว้ในไฟล์ CSS เพื่อให้ธีมสอดคล้องกัน |
| การสร้างไฟล์ JavaScript ขนาดใหญ่มากซึ่งทำให้ประสิทธิภาพโดยรวมของเว็บไซต์ช้าลง | ใช้ JavaScript น้อยลง คุณอาจสามารถใช้ฟังก์ชันที่คล้ายกันใน CSS (เช่น ภาพเคลื่อนไหวหรือการนำทางแบบติดหนึบ) ซึ่งแยกวิเคราะห์ได้เร็วกว่าและมีประสิทธิภาพมากกว่า |
สำหรับ CSS ให้สลับคลาส CSS แทนการเพิ่มรูปแบบแทรกในบรรทัด ดังนี้ ช่วยให้ใช้งานซ้ำได้และเรียบง่าย ใช้เนื้อหาที่ซ่อนอยู่ในหน้าเว็บและ สลับชั้นเรียนเพื่อซ่อนและแสดงเนื้อหาสำหรับ HTML แบบไดนามิก หากคุณจำเป็นต้องใช้ JavaScript เพื่อเพิ่มเนื้อหาลงในหน้าเว็บแบบไดนามิก ต้องแน่ใจว่าเว็บนั้นง่ายและ กระชับ และแน่นอนว่าเข้าถึงได้
การจัดการโฟกัส
เราได้พูดถึงการมุ่งเน้นในโมดูลโฟกัสของแป้นพิมพ์ รูปแบบคำสั่งซื้อและตัวบ่งชี้ การจัดการโฟกัสรู้ว่าจะดักจับตรงจุดใดและเมื่อใด และเวลาที่ไม่ควรยึดไว้
การจัดการโฟกัสมีความสําคัญอย่างยิ่งสําหรับผู้ใช้ที่ใช้แป้นพิมพ์เท่านั้น
ระดับคอมโพเนนต์
คุณสร้างกับดักแป้นพิมพ์ได้ในกรณีที่โฟกัสของคอมโพเนนต์ไม่ได้รับการจัดการอย่างเหมาะสม กับดักแป้นพิมพ์เกิดขึ้นเมื่อผู้ใช้แป้นพิมพ์เพียงอย่างเดียวติดอยู่ในคอมโพเนนต์ หรือ จุดโฟกัสไม่ได้รับการรักษาตามที่ควรจะเป็น
หนึ่งในรูปแบบที่พบบ่อยที่สุดที่ผู้ใช้ประสบปัญหาด้านการจัดการโฟกัส อยู่ในคอมโพเนนต์โมดัล เมื่อผู้ใช้ที่ใช้แป้นพิมพ์เท่านั้นพบโมดัล ผู้ใช้ ควรจะสามารถแท็บไปมาระหว่างองค์ประกอบที่ดำเนินการได้ของโมดัล แต่ จะต้องไม่ได้รับอนุญาตนอกโมดัลโดยไม่ได้ปิดอย่างชัดเจน JavaScript เป็นสิ่งจำเป็นในการจับจุดโฟกัสนี้อย่างเหมาะสม
ระดับหน้าเว็บ
ต้องคงโฟกัสไว้เมื่อผู้ใช้เปลี่ยนจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง นี่คือ โดยเฉพาะอย่างยิ่งใน SPA ไม่มีการรีเฟรชเบราว์เซอร์ และเนื้อหาทั้งหมด จะเปลี่ยนไปแบบไดนามิก เมื่อใดก็ตามที่ผู้ใช้คลิกลิงก์เพื่อไปที่ ไปยังหน้าอื่นในแอปพลิเคชันของคุณ โฟกัสจะอยู่ที่เดิม ตำแหน่งหรืออาจวางไว้ที่อื่นทั้งหมด
เมื่อมีการเปลี่ยนหน้า (หรือการกำหนดเส้นทาง) ทีมพัฒนาต้องตัดสินใจว่า ตําแหน่งที่จะโฟกัสเมื่อโหลดหน้าเว็บ
ซึ่งทำได้หลายวิธี ดังนี้
- วางโฟกัสที่คอนเทนเนอร์หลักที่มีประกาศ
aria-live - ปรับโฟกัสกลับไปที่ลิงก์เพื่อข้ามไปยังเนื้อหาหลัก
- ย้ายโฟกัสไปที่ส่วนหัวระดับบนสุดของหน้าเว็บใหม่
วิธีที่จะมุ่งเน้นจะขึ้นอยู่กับเฟรมเวิร์กที่คุณใช้ และเนื้อหาที่คุณต้องการแสดงให้ผู้ใช้เห็น โดยอาจเป็นบริบทหรือ ขึ้นอยู่กับการกระทำ
การจัดการของรัฐ
อีกปัจจัยหนึ่งที่ JavaScript สำคัญต่อความสามารถเข้าถึงได้ง่ายก็คือการจัดการสถานะ หรือเมื่อมีการถ่ายทอดสถานะภาพปัจจุบันของคอมโพเนนต์หรือหน้าเว็บไปยังผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษที่มีสายตาเลือนราง ตาบอด หรือหูหนวก
บ่อยครั้งที่สถานะของคอมโพเนนต์หรือหน้าเว็บจะจัดการผ่านแอตทริบิวต์ ARIA เช่น ที่เปิดตัวไปในโมดูล ARIA และ HTML มาดูแอตทริบิวต์ ARIA ประเภทต่างๆ ที่นิยมใช้กันมากที่สุด จัดการสถานะขององค์ประกอบ
ระดับคอมโพเนนต์
เรามีทั้ง 2 อย่าง ขึ้นอยู่กับเนื้อหาหน้าเว็บและข้อมูลที่ผู้ใช้ต้องการ สถานะ ARIA หลายสถานะ ที่ควรพิจารณาเมื่อส่งต่อข้อมูลเกี่ยวกับคอมโพเนนต์ให้กับผู้ใช้
ตัวอย่างเช่น คุณอาจใช้
aria-expanded
เพื่อบอกผู้ใช้ว่าเมนูแบบเลื่อนลงหรือรายการเป็นแบบขยายหรือ
ยุบแล้ว
หรือคุณอาจใช้ aria-pressed
เพื่อระบุว่ามีการกดปุ่มแล้ว
การใช้แอตทริบิวต์ ARIA ต้องมีการคัดเลือก ลองนึกถึง การไหลเวียนของผู้ใช้เพื่อให้ทราบว่าควรสื่อสารข้อมูลใดที่สำคัญให้กับผู้ใช้
ระดับหน้าเว็บ
นักพัฒนาซอฟต์แวร์มักจะใช้พื้นที่ที่ซ่อนอยู่แบบเห็นภาพที่เรียกว่า ภูมิภาคแบบสด ARIA เพื่อประกาศการเปลี่ยนแปลงบนหน้าจอและแจ้งเตือนเทคโนโลยีความช่วยเหลือพิเศษ (AT) พื้นที่นี้สามารถจับคู่กับ JavaScript เพื่อแจ้งผู้ใช้เกี่ยวกับไดนามิก เปลี่ยนหน้าเว็บได้โดยที่ไม่ต้องโหลดหน้าทั้งหน้าซ้ำ
ที่ผ่านมา JavaScript มีปัญหาในการประกาศเนื้อหาใน
aria-live
และเขตแจ้งเตือน เนื่องจากเป็นพื้นที่ที่มีการเปลี่ยนแปลงตลอดเวลา การเพิ่มเนื้อหาลงในแบบไม่พร้อมกัน
DOM ทำให้ AT รับข้อมูลภูมิภาคและประกาศได้ยาก
เพื่อให้เนื้อหาอ่านได้อย่างถูกต้อง พื้นที่ที่เผยแพร่หรือแจ้งเตือนจะต้องอยู่ใน
เมื่อโหลด DOM ข้อความจะสามารถสลับออกได้แบบไดนามิก
หากคุณใช้เฟรมเวิร์ก JavaScript ข่าวดีก็คือ เกือบทุกประเภทจะมี "ผู้ประกาศข่าวสด" ซึ่งจะทำงานทุกอย่างแทนคุณ สามารถเข้าถึงได้ คุณไม่จำเป็นต้องกังวลเรื่องการสร้างภูมิภาคที่มีการเผยแพร่อยู่และการติดต่อ กับปัญหาที่อธิบายไว้ในส่วนก่อนหน้า
ต่อไปนี้คือแพ็กเกจที่เผยแพร่อยู่สำหรับเฟรมเวิร์ก JavaScript ทั่วไป
- React: react-aria-live และ ผู้ประกาศ React-a11y
- มุม:
LiveAnnouncer - สถานที่: vue-a11y-utils
JavaScript สมัยใหม่คือภาษาที่มีประสิทธิภาพ ที่ทำให้นักพัฒนาเว็บสร้าง ที่มีประสิทธิภาพมากขึ้น ซึ่งบางครั้งอาจนำไปสู่การใช้วิศวกรรมที่มากเกินไป รูปแบบที่ไม่สามารถเข้าถึงได้ โดยทำตามรูปแบบและเคล็ดลับสำหรับ JavaScript ในโมดูลนี้ คุณสามารถทำให้ผู้ใช้ทุกคนเข้าถึงแอปได้มากขึ้น
ตรวจสอบความเข้าใจ
ทดสอบความรู้ JavaScript ของคุณ
วิธีใดดีที่สุดในการเปลี่ยนรูปแบบขององค์ประกอบด้วย JavaScript
การดำเนินการของ JavaScript ทั้งหมดรองรับผู้ใช้แป้นพิมพ์ได้ไหม