Assistive Technology Center

เว็บที่ทุกคนเข้าถึง

บทความเรื่อง สร้าง Javascript อย่างไรให้ Accessible

เรียบเรียงโดย น้ำหนึ่ง มิตรสมาน
เมื่อวันที่ 27 กุมภาพันธ์ 2547

Introduction
JavaScript คืออะไร ?
Dynamic HTML (DHTML) คืออะไร
กุญแจสำคัญที่ทำให้ JavaScript Accessible
ปัญหาที่เกิดขึ้นกับ DHTML และ JavaScript
เตรียมข้อมูลสำหรับ Browser ที่ไม่สนับสนุนการใช้ JavaScript
การทดสอบ

Introduction

เทคโนโลยีทางด้านการพัฒนาเว็บไซต์ เกิดขึ้นมาใหม่อย่างต่อเนื่อง เป็นผลทำให้ผู้ใช้สามารถเลือกใช้เทคโนโลยีเหล่านี้มาพัฒนาเว็บไซต์ของตน ให้เกิดความสวยงามได้ JavaScript ก็เป็นหนึ่งในเทคโนโลยีที่ผู้พัฒนาเว็บไซต์นิยมนำมา ใช้กับเว็บไซต์ของตน ด้วยความสามารถที่เหนือกว่า HTML ปกติ ทำให้สามารถให้ผู้พัฒนาเว็บไซต์ สร้างลูกเล่นต่างๆให้กับเว็บไซต์ของตนเองได้ แต่ในความสามารถที่มีนั้น บางอย่างเป็นอุปสรรคกับกลุ่มคน กลุ่มหนึ่ง ซึ่งเป็นกลุ่มที่ต้องอาศัย โปรแกรมบางอย่างที่เรียกว่า โปรแกรมอ่านหน้าจอ สำหรับอ่านข้อความบนเว็บไซต์ กลุ่มคนกลุ่มนี้คือ กลุ่มคนพิการที่มีความบกพร่องทางการเห็น หรือ คนตาบอด นั่นเอง ซึ่งความจริงก็คือ คนตาบอด ไม่สามารถมองเห็นได้ว่าตำแหน่งของ Mouse ที่กำลังชี้อยู่นั้นอยู่ที่ไหน แต่คนตาบอดสามารถจะรู้ได้จาก การใช้ Keyboard เลือกให้ไปโฟกัสในแต่ละ Object บนหน้าเว็บ ฉะนั้นแล้ว การ Coding ใน JavaScript ที่มีฟังก์ชันการรับ Input จาก Mouse อย่างเดียว โดยไม่มีส่วนของ Keyboard ด้วยนั้นจะทำให้เว็บไซต์นั้นไม่ Accessible กลับสู่หัวข้อ

JavaScript คืออะไร ?

JavaScript ไม่ใช่ Java JavaScript ไม่ใช่ HTML JavaScript เป็นภาษาสคริปต์เชิงวัตถุ หรือเรียกว่า อ็อบเจ็กโอเรียลเต็ด (Object Oriented Programming) ที่มีเป้าหมายในการ ออกแบบและพัฒนาโปรแกรมในระบบอินเทอร์เน็ต สำหรับผู้เขียนด้วยภาษา HTML สามารถทำงานข้ามแพลตฟอร์มได้ โดยทำงานร่วมกับ ภาษา HTML และภาษา Java ได้ทั้งทางฝั่งไคลเอนต์ (Client) และ ทางฝั่งเซิร์ฟเวอร์ (Server)

JavaScript คือ ภาษายุคใหม่ที่ถูกพัฒนาขึ้นโดย เน็ตสเคปคอมมิวนิเคชันส์ (Netscape Communications Corporation) โดยใช้ชื่อว่า Live Script ออกมาพร้อมกับ Netscape Navigator2.0 เพื่อใช้สร้างเว็บเพจโดยติดต่อกับเซิร์ฟเวอร์แบบ Live Wire ต่อมาเน็ตสเคปจึงได้ร่วมมือกับ บริษัทซันไมโครซิสเต็มส์ปรับปรุงระบบของบราวเซอร์เพื่อให้สามารถติดต่อใช้งานกับภาษาจาวาได้ และได้ปรับปรุง LiveScript ใหม่เมื่อ ปี 2538 แล้วตั้งชื่อใหม่ว่า JavaScript JavaScript สามารถทำให้ การสร้างเว็บเพจ มีลูกเล่น ต่าง ๆ มากมาย และยังสามารถโต้ตอบกับผู้ใช้ได้อย่างทันที เช่น การใช้เมาส์คลิก หรือ การกรอกข้อความในฟอร์ม เป็นต้น กลับสู่หัวข้อ

Dynamic HTML (DHTML) คืออะไร

เป็นเทคนิคที่ช่วยเพิ่มความสามารถให้ Browser สามารถทำการโต้ตอบการผู้ใช้งานเองได้ โดยไม่ต้องจำเป็นต้องไปขอข้อมูลจาก Web Server ทุกครั้งไป เป็นตัวเลือกที่จะให้ผู้ใช้สร้างเว็บเพจให้มีภาพเคลื่อนไหวมากขึ้นและตอบสนองผู้ใช้แบบ Interactive มากกว่า HTML เวอร์ชันก่อน ส่วนใหญ่ของ Dynamic HTML ได้รับการระบุใน HTML 4.0 ตัวอย่างของเพจ Dynamic HTML

สีตัวอักษรของหัวข้อเปลี่ยนเมื่อเมาส์เคลื่อนผ่าน
ยินยอมให้ผู้ใช้ในการ drag and drop ภาพไปยังที่อื่นบนเว็บเพจ Dynamic HTML ยอมให้เอกสารสามารถดูและทำงาน เหมือนโปรแกรมประยุกต์บน desk top หรือมัลติมีเดีย

ซึ่งวิธีการสร้างเป็นแบบ DHTML จะเป็นการใช้ เทคโนโลยีของ JavaScript และ Cascading Style Sheets เหล่านี้ช่วยในการกำหนดค่าต่างๆ ของความสูง ความกว้าง หรือตำแหน่งของส่วนต่างๆ ซึ่งอยู่บนเว็บเพจ หรืออาจจะเป็นการรับข้อมูล User Interface ได้ด้วย JavaScript ก็เป็นได้ กลับสู่หัวข้อ

กุญแจสำคัญที่ทำให้ JavaScript Accessible

ถ้าเป็นไปได้ไม่ควรใช้ JavaScript เพราะเป็นการทำงานทางฝั่ง Client ควรเลือกใช้ Script ที่ทำงานทางฝั่ง Server จะดีกว่า
จัดเตรียมข้อมูลที่มีความหมายเหมือนกับ การใช้ JavaScript ไว้ในส่วนของ <noscript> เพื่อแสดงในกรณีที่ Browser ไม่สนับสนุน JavaScript
อย่าเขียน JavaScript ที่รับ Input จาก Mouse ได้เพียงอย่างเดียว ควรเพิ่มฟังก์ชันการรับ Input จาก Keyboard ด้วย
อย่าเขียน JavaScript ให้มีการ Redirect
หากมีการสร้าง Link ด้วย JavaScript ให้เพิ่มชื่อ URL จริงของ link ที่สร้างด้วย ตัวอย่าง <a href="https://www.nectec.or.th/atc" onClick="javascript(this)">)
หลีกเลี่ยงการสร้าง Popup Windows
แจ้งเตือนผู้ใช้ล่วงหน้าก่อนจะเปิด Windows ใหม่
ให้ระวังการเปลี่ยนตำแหน่งโฟกัสของ Object ต่างๆ โดยที่ผู้ใช้ไม่ได้เป็นผู้เปลี่ยนเอง

กลับสู่หัวข้อ

ปัญหาที่เกิดขึ้นกับ DHTML และ JavaScript

Dynamic HTML (DHTML) อาจจะ Accessible หรือไม่ Accessible ก็ได้ขึ้นอยู่กับว่าผู้พัฒนาโปรแกรม ซึ่งตามหลักความเป็นจริงแล้ววิธีการพัฒนาให้เป็น Web Accessibility จำเป็นต้องตัดหรือเพิ่ม บางอย่างในส่วนของการ Coding ใน JavaScript ลงไป ที่จะทำให้โปรแกรมสำหรับอ่านหน้าจอทั้งหลายสามารถอ่านข้อมูลบนหน้าเว็บได้จาก Web Browser โดยมีหลักสำคัญ ๆ ของการใช้งาน มีดังนี้

การสร้างส่วนเมนู Navigation menus
การใช้ฟังก์ชัน onChange and onSelect ใน JavaScript
การสร้างหน้าเว็บที่เรียกผ่าน Page redirects
การสร้างหน้าต่างใหม่
การสร้าง Popup windows
การเปลี่ยน Changing focus
การย้าย Removing toolbars

การสร้างส่วนเมนู Navigation menus

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

การใช้ฟังก์ชัน onChange และ onSelect ใน JavaScript

ลักษณะการทำงานของฟังก์ชัน onChange ซึ่งโดยมากจะถูกใช้ในฟอร์ม ที่ต้องการเปลี่ยนแปลงหลังจากการเลือกแล้ว ซึ่งเป็นผลทำให้มีการเปลี่ยนหน้า หรือรูปแบบของฟอร์ม จากการเลือก Item นั้นๆ โดยที่ไม่ต้องรอรับคำสั่งการ Submit หรือการยืนยันจากผู้ใช้ก่อน โดยไม่อนุญาตให้ใช้การเลือกรายการจาก Keyboard แต่ถ้าพยายามจะใช้การเลือกจาก Keyboard โดยการใช้คีย์ลูกศร Scolling ผลก็คือ JavaScipt จะแปลความหมายเหมือนเป็นการใช้ event onSelect ซึ่งจะทำให้ข้อมูลถูกเปลี่ยนไปตามการเลือก Item นั้นๆ ดังนั้นถ้าใช้ฟังก์ชันนี้ในการเขียนในฟอร์ม Submit ใน JavaScript แล้วจะทำให้ไม่ Accessible

การสร้างหน้าเว็บที่เรียกผ่านโดยใช้วิธี redirect

การที่ผู้ใช้ใส่ชื่อเว็บไซต์ หรือ URL ของเว็บไซต์ใดๆ ไปแล้ว แต่เว็บไซต์นั้นๆ ทำการแสดงข้อมูลโดยการ Link ไปอีกที่หนึ่ง จะเรียกว่า การ Redirect ลักษณะการกระทำเช่นนี้ จะทำให้ผู้ใช้ที่เป็นผู้พิการทางการมองเห็น ที่ต้องใช้โปรแกรมช่วยการอ่านหน้าจอนั้น เข้าใจได้ยากหรือไม่เข้าใจเลย ว่าที่ไปนั้นเป็นเว็บไซต์ของอะไรแน่ ยิ่งต้องมีการกลับไปก่อนหน้าแล้วจะทำให้เกิดความสับสนอย่างมาก ดังนั้นจึงไม่ควรกระทำวิธีดังกล่าว

การสร้าง Windows ใหม่

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

การสร้าง Popup Windows

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

การเปลี่ยน focus

ปัญหาที่เกิดจะคล้ายกับการสร้าง Popup Windows ซึ่งทำให้ผู้ใช้ที่ต้องใช้โปรแกรมอ่านหน้าจอ เกิดความสับสน ถ้าการเปลี่ยน Fucus ของ Object หรือของตัวควบคุมอะไรซักอย่าง ที่ต้องใช้แต่ Mouse ควบคุมอย่างเดียวจะทำให้ผู้ใช้ไม่สามารถใช้งานได้ ดังนั้นวิธีการที่จะทำให้ผู้ใช้ ควบคุมได้ โดยการให้มีการควบคุม Object จากคีย์บอร์ดด้วย กลับสู่หัวข้อ

เตรียมข้อมูลสำหรับ Browser ที่ไม่สนับสนุนการใช้ JavaScript

ในความเป็นจริงคุณไม่สามารถไปกำหนดให้ทุกคน ใช้ Browser ที่ต้องสนับสนุน JavaScript ได้ทุกคน แต่คุณสามารถทำให้ทุกคนได้รับรู้ถึงข้อมูลที่ถูกแสดงได้ โดยมีทางเลือกไว้สำหรับทุกคน การทำให้ Website ที่มีการใช้ JavaScript นั้นๆ เป็น Website ที่ Accessible จำเป็นต้องมีวิธีการที่สามารถบอกให้ผู้ใช้ทราบถึงสาระสำคัญของข้อมูลในกรณีที่ Browser ของผู้ใช้ไม่สนับสนุน JavaScript โดยให้มีข้อมูลเหมือนกับข้อมูลที่ถูก ๋JavaScript แสดง ฉะนั้นแล้วจะเห็นได้ว่าในส่วนของ Code HTML จะมี Tag ที่แสดงความหมายดังกล่าวได้ เพื่อใช้เป็นทางเลือกสำหรับผู้ที่ไม่สามารถใช้ Browser หรือโปรแกรมที่ไม่สนับสนุน JavaScript คือ Tag <noscript> </noscript> ซึ่งอาจจะนำข้อมูลที่ถูกแสดงใน JavaScript นั้น มาแสดงไว้ใน noscript นี้ในรูปแบบ ของข้อมูลแบบ HTML ก็ได้ ตัวอย่างเช่น

<noscript> Browser นี้ไม่สามารถแสดงข้อมูลของ JavaScript ได้ แต่ข้อมูลใน 
JavaScript นี้แสดงข้อมูลดังนี้.......</noscript>