JavaScript มีบทบาทสำคัญในเกือบทุกอย่างที่เราสร้าง ตั้งแต่คอมโพเนนต์แบบไดนามิกขนาดเล็กไปจนถึงผลิตภัณฑ์ที่สมบูรณ์ซึ่งทำงานบนเฟรมเวิร์ก JavaScript เช่น React หรือ Angular
การใช้ (หรือการใช้มากเกินไป) JavaScript นี้ทำให้เกิดแนวโน้มที่น่ากังวลหลายประการ เช่น เวลาในการโหลดนานเนื่องจากโค้ดจำนวนมาก การใช้องค์ประกอบ HTML ที่ไม่มีความหมาย และการแทรก HTML และ CSS ผ่าน JavaScript และคุณอาจไม่แน่ใจว่าการช่วยเหลือพิเศษจะเข้ามามีบทบาทอย่างไรในแต่ละส่วน
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
หากใช้องค์ประกอบที่ไม่ใช่เชิงความหมายสำหรับเหตุการณ์ทริกเกอร์ จะต้องเพิ่มเหตุการณ์ keydown/keyup เพื่อตรวจหาการกดแป้น Enter หรือ Space การเพิ่มเหตุการณ์เรียกให้แสดงไปยังองค์ประกอบที่ไม่ใช่เชิงความหมายมักถูกลืม แต่หากลืมดำเนินการดังกล่าว ผลลัพธ์ที่ได้จะเป็นคอมโพเนนต์ที่เข้าถึงได้ด้วยเมาส์เท่านั้น ผู้ใช้ที่ใช้แป้นพิมพ์เท่านั้นจะไม่สามารถเข้าถึงการดำเนินการที่เกี่ยวข้องได้
ชื่อหน้าเว็บ
ดังที่ได้ทราบในข้อบังคับของเอกสาร ชื่อหน้าเว็บเป็นสิ่งสําคัญสําหรับผู้ใช้โปรแกรมอ่านหน้าจอ ซึ่งจะบอกผู้ใช้ว่าอยู่ที่หน้าใด และไปยังหน้าเว็บใหม่หรือไม่
หากใช้เฟรมเวิร์ก JavaScript คุณจะต้องพิจารณาวิธีจัดการชื่อหน้าเว็บ วิธีนี้สำคัญอย่างยิ่งสำหรับแอปหน้าเว็บเดียว (SPA) ที่โหลดจากไฟล์ index.html ไฟล์เดียว เนื่องจากการเปลี่ยนเฟรมหรือเส้นทาง (การเปลี่ยนแปลงหน้าเว็บ) จะไม่เกี่ยวข้องกับการโหลดหน้าเว็บซ้ำ ทุกครั้งที่ผู้ใช้โหลดหน้าใหม่ใน SPA ชื่อจะไม่เปลี่ยนแปลงโดยค่าเริ่มต้น
สําหรับ SPA คุณสามารถเพิ่มค่า document.title ด้วยตนเองหรือใช้แพ็กเกจตัวช่วยก็ได้ (ขึ้นอยู่กับเฟรมเวิร์ก JavaScript) การประกาศชื่อหน้าเว็บที่อัปเดตแล้วให้ผู้ใช้โปรแกรมอ่านหน้าจอทราบอาจต้องใช้เวลาเพิ่มเติม แต่ข่าวดีคือคุณมีตัวเลือกต่างๆ เช่น เนื้อหาแบบไดนามิก
เนื้อหาแบบไดนามิก
ฟังก์ชันการทำงานที่มีประสิทธิภาพมากที่สุดอย่างหนึ่งของ JavaScript คือความสามารถในการเพิ่ม HTML และ CSS ลงในองค์ประกอบใดก็ได้ในหน้า นักพัฒนาซอฟต์แวร์สามารถสร้างแอปพลิเคชันแบบไดนามิก ตามการกระทำหรือพฤติกรรมของผู้ใช้
สมมติว่าคุณต้องส่งข้อความถึงผู้ใช้เมื่อลงชื่อเข้าใช้เว็บไซต์หรือแอป โดยต้องการให้ข้อความโดดเด่นจากพื้นหลังสีขาวและส่งต่อข้อความว่า "คุณลงชื่อเข้าใช้แล้ว"
คุณสามารถใช้องค์ประกอบ innerHTML เพื่อตั้งค่าเนื้อหาได้ ดังนี้
document.querySelector("#banner").innerHTML = '<p>You are now signed 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 ประเภทต่างๆ ที่พบบ่อยซึ่งใช้เพื่อช่วยจัดการสถานะขององค์ประกอบ
ระดับคอมโพเนนต์
มีสถานะ ARIA หลายอย่างที่ต้องพิจารณาเมื่อส่งต่อข้อมูลเกี่ยวกับคอมโพเนนต์ไปยังผู้ใช้ ทั้งนี้ขึ้นอยู่กับเนื้อหาของหน้าเว็บและข้อมูลที่ผู้ใช้ต้องการ
เช่น คุณอาจใช้แอตทริบิวต์ aria-expanded เพื่อแจ้งผู้ใช้ว่าเมนูแบบเลื่อนลงหรือรายการเป็นแบบขยายหรือยุบ
หรืออาจใช้ aria-pressed
เพื่อระบุว่ามีการกดปุ่ม
การใช้แอตทริบิวต์ ARIA ต้องมีการคัดเลือก พิจารณาขั้นตอนของผู้ใช้เพื่อให้ทราบว่าควรสื่อข้อมูลสำคัญใดให้แก่ผู้ใช้
ระดับหน้าเว็บ
นักพัฒนาซอฟต์แวร์มักใช้พื้นที่ที่ซ่อนอยู่ซึ่งเรียกว่าพื้นที่ที่แสดงผลอยู่ของ ARIA เพื่อประกาศการเปลี่ยนแปลงบนหน้าจอและข้อความแจ้งเตือนไปยังผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษ (AT) พื้นที่นี้สามารถจับคู่กับ JavaScript เพื่อแจ้งให้ผู้ใช้ทราบถึงการเปลี่ยนแปลงแบบไดนามิกในหน้าโดยไม่ต้องโหลดหน้าทั้งหน้าซ้ำ
ที่ผ่านมา JavaScript มีปัญหาในการประกาศเนื้อหาในaria-live และภูมิภาคการแจ้งเตือนเนื่องจากเป็นภาษาแบบไดนามิก การเพิ่มเนื้อหาลงใน DOM แบบไม่พร้อมกันทำให้ AT ทำความเข้าใจภูมิภาคและประกาศได้ยาก
หากต้องการให้ระบบอ่านเนื้อหาอย่างถูกต้อง ภูมิภาคแบบเรียลไทม์หรือการแจ้งเตือนต้องอยู่ใน DOM เมื่อโหลด จากนั้นระบบจะสลับข้อความแบบไดนามิกได้
หากคุณใช้เฟรมเวิร์ก JavaScript ข่าวดีก็คือเฟรมเวิร์กเกือบทั้งหมดมีแพ็กเกจ "ผู้ประกาศข่าวแบบเรียลไทม์" ที่ทำงานให้คุณทั้งหมดและเข้าถึงได้อย่างเต็มที่ คุณจึงไม่ต้องกังวลเกี่ยวกับการสร้างภูมิภาคเวอร์ชันที่ใช้งานจริงและจัดการกับปัญหาที่อธิบายไว้ในส่วนก่อนหน้า
ต่อไปนี้คือแพ็กเกจที่เผยแพร่อยู่สำหรับเฟรมเวิร์ก JavaScript ทั่วไป
- React: react-aria-live และ react-a11y-announcer
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
JavaScript สมัยใหม่เป็นภาษาที่มีประสิทธิภาพซึ่งช่วยให้นักพัฒนาเว็บสร้างเว็บแอปพลิเคชันที่มีประสิทธิภาพได้ ซึ่งบางครั้งอาจทําให้การออกแบบซับซ้อนเกินเหตุและทำให้รูปแบบเข้าถึงไม่ได้ การทำตามรูปแบบและเคล็ดลับ JavaScript ในข้อบังคับนี้จะช่วยให้แอปของคุณเข้าถึงได้ง่ายขึ้นสำหรับผู้ใช้ทุกคน
เพิ่มเติมของเขาทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับ JavaScript
วิธีที่ดีที่สุดในการเปลี่ยนรูปแบบขององค์ประกอบด้วย JavaScript คือวิธีใด
การดำเนินการ JavaScript ทั้งหมดรองรับผู้ใช้แป้นพิมพ์ได้ไหม