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
หากมีการใช้องค์ประกอบที่ไม่ใช่ความหมายสำหรับเหตุการณ์ทริกเกอร์ คุณต้องเพิ่มเหตุการณ์การกดแป้น/คีย์ลงเพื่อตรวจหาการกดแป้น Enter หรือการกดแป้นเว้นวรรค การเพิ่มเหตุการณ์ทริกเกอร์ลงในองค์ประกอบที่ไม่ใช่ความหมายมักจะถูกลืม น่าเสียดาย เมื่อเราลืมไป ผลลัพธ์ที่ได้คือ องค์ประกอบที่เข้าถึงได้ด้วยเมาส์เท่านั้น ผู้ใช้ที่ใช้แป้นพิมพ์เท่านั้นจะไม่สามารถเข้าถึงการทำงานที่เกี่ยวข้องได้
ชื่อหน้าเว็บ
ตามที่เราได้เรียนรู้ในโมดูลเอกสาร ชื่อหน้าเป็นสิ่งจำเป็นสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ ซึ่งจะบอกให้ผู้ใช้ทราบว่าตนเองอยู่ในหน้าใดและไปยังหน้าใหม่หรือไม่
หากใช้เฟรมเวิร์ก 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 เพื่อเพิ่มเนื้อหาลงในหน้าเว็บแบบไดนามิก หน้าเว็บควรใช้งานง่าย กระชับ และเข้าถึงได้
การจัดการโฟกัส
ในโมดูลโฟกัสแป้นพิมพ์ เราพูดถึงรูปแบบการโฟกัสและสัญญาณบอกสถานะ การจัดการโฟกัสคือรู้ว่าเมื่อใดและตรงไหน ที่จะดักโฟกัสและไม่ควรติด
การจัดการโฟกัสเป็นสิ่งสำคัญสำหรับผู้ใช้ที่ใช้แป้นพิมพ์เท่านั้น
ระดับคอมโพเนนต์
คุณสร้างกับดักแป้นพิมพ์ได้เมื่อโฟกัสของคอมโพเนนต์ไม่ได้รับการจัดการอย่างเหมาะสม กับดักแป้นพิมพ์จะเกิดขึ้นเมื่อผู้ใช้ที่ใช้แป้นพิมพ์อย่างเดียวค้างอยู่ในคอมโพเนนต์ หรือโฟกัสไม่อยู่อย่างที่ควรจะเป็น
รูปแบบหนึ่งที่พบได้บ่อยที่สุดที่ผู้ใช้พบปัญหาการจัดการโฟกัส คือองค์ประกอบโมดัล เมื่อผู้ใช้ที่ใช้แป้นพิมพ์อย่างเดียวพบโมดัล ผู้ใช้ควรสามารถกด 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
- มุม:
LiveAnnouncer
- สถานที่: vue-a11y-utils
JavaScript สมัยใหม่เป็นภาษาที่มีประสิทธิภาพซึ่งช่วยให้นักพัฒนาเว็บสร้างเว็บแอปพลิเคชันที่มีประสิทธิภาพได้ บางครั้งทำให้เกิดวิศวกรรมมากเกินไป และรูปแบบที่ไม่สามารถเข้าถึงได้โดยอาศัยการขยาย เมื่อทำตามรูปแบบ JavaScript และเคล็ดลับในโมดูลนี้ คุณจะทำให้ผู้ใช้ทั้งหมดเข้าถึงแอปได้มากขึ้น
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้ของคุณเกี่ยวกับ JavaScript
วิธีใดดีที่สุดในการเปลี่ยนรูปแบบขององค์ประกอบด้วย JavaScript
การทำงานของ JavaScript ทั้งหมดสนับสนุนผู้ใช้แป้นพิมพ์ได้ไหม