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;");

อำนาจที่ยิ่งใหญ่มาพร้อมกับความรับผิดชอบอันใหญ่ยิ่ง น่าเสียดายที่การแทรก HTML และ CSS ด้วย JavaScript ถูกนำไปใช้ในทางที่ผิดเพื่อสร้างเนื้อหาที่เข้าถึงไม่ได้ ตัวอย่างการใช้งานที่ไม่เหมาะสมที่พบบ่อยมีดังนี้

สำหรับ CSS ให้สลับคลาส CSS แทนการเพิ่มรูปแบบอินไลน์ เนื่องจากวิธีนี้ ช่วยให้สามารถนำกลับมาใช้ใหม่และใช้งานได้ง่าย ใช้เนื้อหาที่ซ่อนไว้ในหน้าและ สลับคลาสเพื่อซ่อนและแสดงเนื้อหาสำหรับ HTML แบบไดนามิก หากต้องการใช้ JavaScript เพื่อเพิ่มเนื้อหาแบบไดนามิกลงในหน้าเว็บ โปรดตรวจสอบว่าเนื้อหานั้นเรียบง่าย กระชับ และเข้าถึงได้

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

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

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

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

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

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

ระดับหน้าเว็บ

นอกจากนี้ ต้องคงโฟกัสไว้เมื่อผู้ใช้ไปยังหน้าหนึ่งๆ โดยเฉพาะอย่างยิ่งใน SPA ซึ่งไม่มีการรีเฟรชเบราว์เซอร์และเนื้อหาทั้งหมดจะเปลี่ยนแปลงแบบไดนามิก ทุกครั้งที่ผู้ใช้คลิกลิงก์เพื่อไปยังหน้าอื่นภายในแอปพลิเคชัน โฟกัสจะยังคงอยู่ที่เดิมหรืออาจย้ายไปอยู่ที่อื่นโดยสิ้นเชิง

เมื่อเปลี่ยนจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง (หรือการกำหนดเส้นทาง) ทีมพัฒนาต้องตัดสินใจ ว่าจะให้โฟกัสไปที่ใดเมื่อหน้าเว็บโหลด

ซึ่งทำได้หลายวิธีดังนี้

• โฟกัสที่คอนเทนเนอร์หลักด้วยaria-liveประกาศ
• เลื่อนโฟกัสกลับไปที่ลิงก์เพื่อข้ามไปยังเนื้อหาหลัก
• ย้ายโฟกัสไปยังส่วนหัวระดับบนสุดของหน้าใหม่

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

การจัดการสถานะ

อีกส่วนหนึ่งที่ JavaScript มีความสําคัญต่อการช่วยเหลือพิเศษคือการจัดการสถานะ หรือเมื่อมีการส่งต่อสถานะภาพปัจจุบันของคอมโพเนนต์หรือหน้าเว็บไปยังผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษสำหรับผู้ที่มีสายตาเลือนราง ตาบอด หรือหูหนวกตาบอด

โดยทั่วไปแล้ว ระบบจะจัดการสถานะของคอมโพเนนต์หรือหน้าเว็บผ่านแอตทริบิวต์ ARIA ดังที่ได้แนะนำไว้ในโมดูล ARIA และ HTML มาดูแอตทริบิวต์ ARIA ประเภทที่ใช้กันมากที่สุด 2-3 ประเภทเพื่อช่วย จัดการสถานะขององค์ประกอบกัน

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

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