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

การจัดการโฟกัส

ในโมดูลโฟกัสแป้นพิมพ์ เราได้กล่าวถึงลําดับโฟกัสและสไตล์ตัวบ่งชี้ การจัดการโฟกัสคือการรู้ว่าควรจับโฟกัสที่ไหนและเมื่อใด และไม่ควรจับโฟกัสเมื่อใด

การจัดการโฟกัสเป็นสิ่งสําคัญสําหรับผู้ใช้ที่ใช้แป้นพิมพ์เท่านั้น

ระดับคอมโพเนนต์

คุณสร้างกับดักแอปบนแป้นพิมพ์ได้เมื่อจัดการโฟกัสของคอมโพเนนต์อย่างไม่ถูกต้อง การติดกับแป้นพิมพ์เกิดขึ้นเมื่อผู้ใช้ที่ใช้แป้นพิมพ์เท่านั้นติดอยู่ในคอมโพเนนต์ หรือโฟกัสไม่ได้รับการคงไว้เมื่อควรจะเป็น

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