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

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

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