JavaScript

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 ถูกใช้ในทางที่ผิดเพื่อสร้างเนื้อหาที่ไม่สามารถเข้าถึงได้ ตัวอย่างการใช้ในทางที่ผิดซึ่งพบได้บ่อยมีดังต่อไปนี้

สำหรับ 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