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 เพื่อเพิ่มเนื้อหาลงในหน้าเว็บแบบไดนามิก โปรดตรวจสอบว่าโค้ดนั้นเรียบง่ายและกระชับ รวมถึงเข้าถึงได้
การจัดการโฟกัส
ในโมดูลโฟกัสแป้นพิมพ์ เราได้กล่าวถึงลําดับโฟกัสและสไตล์ตัวบ่งชี้ การจัดการโฟกัสคือการรู้ว่าควรจับโฟกัสที่ไหนและเมื่อใด และไม่ควรจับโฟกัสเมื่อใด
การจัดการโฟกัสเป็นสิ่งสําคัญสําหรับผู้ใช้ที่ใช้แป้นพิมพ์เท่านั้น
ระดับคอมโพเนนต์
คุณสร้างกับดักแอปบนแป้นพิมพ์ได้เมื่อจัดการโฟกัสของคอมโพเนนต์อย่างไม่ถูกต้อง การติดกับแป้นพิมพ์เกิดขึ้นเมื่อผู้ใช้ที่ใช้แป้นพิมพ์เท่านั้นติดอยู่ในคอมโพเนนต์ หรือโฟกัสไม่ได้รับการคงไว้เมื่อควรจะเป็น
รูปแบบที่พบบ่อยที่สุดอย่างหนึ่งที่ผู้ใช้พบปัญหาการจัดการโฟกัสคือคอมโพเนนต์โมดอล เมื่อผู้ใช้ที่ใช้แป้นพิมพ์เท่านั้นพบโมดัล ผู้ใช้ควรกด Tab สลับไปมาระหว่างองค์ประกอบที่ดำเนินการได้ของโมดัล แต่ไม่ควรอนุญาตให้ผู้ใช้ออกจากโมดัลโดยไม่ปิดโมดัลอย่างชัดเจน 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 ทั้งหมดรองรับผู้ใช้แป้นพิมพ์ได้ไหม