ATC Assistive Technology

แสดงหน้าข้อความ | หน้าแรก | ประวัติหน่วยงาน | ข่าว เหตุการณ์ | เว็บบอร์ด| ผลงาน | เว็บที่ทุกคนเข้าถึง | ถาม-ตอบ Web Accessibility | เอกสารเผยแพร่

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

บทความเรื่อง Accessible Navigation การเข้าถึงข้อมูลของคนพิการ กับทิศทางการไหลข้อมูล บนเว็บไซต์

เรียบเรียงโดย น้ำหนึ่ง มิตรสมาน
เมื่อวันที่ 27 พฤษภาคม 2546

โดยคนปกติทั่วไปแล้ว จะไม่รู้ถึงความสำคัญในขั้นตอนของวิธีการเข้าถึงข้อมูลซักเท่าไร เป็นเพราะคนปกติส่วนใหญ่ สามารถที่จะเห็นและใช้เมาส์ได้ แต่สำหรับในคนที่มีความบกพร่องทางสายตาแล้ว เป็นปัญหาแน่นอน ซึ่งการที่เข้าถึงข้อมูลของบุคคลเหล่านั้น จะต้องใช้โปรแกรมอ่านหน้าจอ หรือบราวเซอร์ที่สามารถอ่านหน้าจอได้ อ่านข้อมูลที่อยู่บนเว็บไซต์ ดังนั้นการที่บราวเซอร์ หรือโปรแกรมอ่านหน้าจอจะอ่านข้อมูลที่อยู่บนหน้าเว็บได้นั้น จะต้องมีวิธีในการจัดลำดับการอ่าน ซึ่ง W3C ได้สร้างมาตรฐานการพัฒนาโปรแกรมประเภทนี้ไว้ เพื่อผู้ที่พัฒนาโปรแกรมจะได้ พัฒนาโปรแกรมให้สามารถ ใช้งานได้ในรูปแบบมาตรฐานเดียวกัน ซึ่งจะใช้เทคนิคที่เรียกว่า "Linearizing" ในการแปลงข้อมูลบนเว็บไซต์ให้จัดเรียงข้อมูลตามลำดับขั้นตอน ก่อนอื่นเลยเทคโนโลยีเพื่อสนับสนุนคนพิการจะแปลงรูปภาพให้เป็นข้อความ และดูข้อมูลตาราง ที่มีขั้นตอนการเรียงลำดับการอ่านของแต่ละเซลล์จากซ้ายไปขวาในแต่ละแถว และจากบนลงล่าง และถ้ามีตารางซ้อนในตาราง ก็จะอ่านตารางข้างในเสร็จก่อน จะอ่านข้อมูลต่อไปในเซลล์ถัดไป มีตัวอย่างหน้าเว็บเพจแบบง่าย ๆ ที่มีการวางตำแหน่งของรูปแบบตาราง โดยปกติแล้วตารางจะมีส่วนที่เรียกว่า Header ซึ่งเป็นส่วนหัวของตารางและส่วนที่อยู่ถัดลงมาจาก header จะเป็นเซลล์ข้อมูลตาม Header ของตาราง ดังตัวอย่าง ในการอ่านของโปรแกรมอ่านหน้าจอหรือเว็บบราวเซอร์อ่านหน้าจอ จะมีวิธีในการอ่านได้ดังนี้ จากการทดสอบการอ่านด้วย IBM Home Page Reader 3.0 :

1. This is a title cell
2. Navigation link 1
3. Navigation link 2
4. Navigation link 3
5. Navigation link 4
6. Banner ad
7. Right Nav 1
8. Right Nav 2
9. Right Nav 3
10. Main content area with lots of text and stories filling the center part of the window

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

1. Title or banner
2. Main content area with lots of text and stories filling the center part of the window
3. Navigation link 1
4. Navigation link 2
5. Navigation link 3
6. Navigation link 4

ถ้าผู้ใช้ต้องการไปในส่วนที่เป็น Navigation link จะต้องรอให้โปรแกรมอ่านหน้าจอ อ่านส่วนที่เป็น Header "Tittl of banner" และ "Main content ..." ทุกครั้งไป ซึ่งจะเป็นปัญหาอย่างหนึ่ง กับผู้ใช้ที่ต้องรอให้โปรแกรมอ่านหน้าจอไปอ่านส่วนทางด้านซ้ายมือก่อน แล้วถึงจะมาอ่านข้อมูล ส่วนที่เป็น Navigation link ที่ต้องการ ดังนั้นถ้าต้องการจะใช้ตารางในการจัดตำแหน่งข้อมูลบนหน้าเว็บเพจ ควรที่จะเลือกให้ส่วนที่มีการเชื่อมโยงไปยังหน้าเว็บอื่น หรือส่วนที่ต้องถูกเรียกใช้บ่อยๆ อยู่ทางด้านซ้ายมือ หรือลำดับก่อนของข้อมูลในตาราง ในความเป็นจริง มีบางเว็บไซต์ก็ยังต้องใช้ ตารางเป็นเครื่องมือในการวางตำแหน่งของข้อมูลต่างๆ ซึ่ง สะดวกในการจัดเรียงข้อมูลให้เป็นระเบียบเรียบร้อย มีตัวอย่างข้างล่างที่ใช้เทคนิคของตารางในการจัดวางตำแหน่งข้อมูลหน้าเว็บเพจ ซึ่งตารางจะประกอบไปด้วย 3 แถว โดยแถวแรกจะมี 1 คอลัมน์ซึ่งเป็น title bar แถวที่ 2 จะมี 3 คอลัมน์ โดยที่คอลัมน์ซ้ายและขวาจะไม่มีข้อมูลคือเป็นเซลล์ว่างป่าว แต่ในคอลัมน์ที่ 2 หรือคอลัมน์กลางจะเป็นข้อมูล main content ... ส่วนแถวที่ 3 จะประกอบไปด้วย 2 คอลัมน์ คือทางคอลัมน์ซ้ายจะเป็นข้อมูล Navigation link ส่วนในคอลัมน์ถัดมาทางขวาจะเป็น Right Nav ดังนี้
เราสามารถตรวจสอบลำดับการอ่านของโปรแกรมอ่านหน้าจอ ได้หลายวิธีแต่มีวิธีหนึ่ง ที่อยากให้ใช้ก็คือ วิธีการตรวจสอบโดยใช้ Lynx Viewer https://www.delorie.com/web/lynxview.html ซึ่งเป็นบราวเซอร์ที่อ่านเฉพาะข้อความ text เท่านั้น โดยจะทำการแปลงข้อมูลที่ไม่ใช่ text ให้อยู่ในรูปแบบของข้อมูล text พร้อมกับการเรียงลำดับก่อนหลังของข้อมูลด้วย ตามข้อกำหนดวิธีการเรียงลำดับข้อมูลบนเว็บไซต์

ในส่วนใหญ่แล้วจะเห็นได้ว่าการออกแบบเว็บไซต์นั้นผู้ออกแบบที่ออกแบบมาเพื่อการค้าธุรกิจนั้นจะทำออกมาในรูปของ "Template" ซึ่งเป็นการสะดวกในการที่สามารถนำไปใช้กับเว็บอื่นๆได้ ดังนั้นการที่หน้าเว็บเหล่านั้นทำออกมา ตำแหน่งหรือลักษณะของการไหลของข้อมูล หรือที่เรียกว่า Navigation ไม่มีการเปลี่ยนแปลง ทำให้ผู้ใช้ที่ต้องใช้ โปรแกรมอ่านหน้าจออ่านข้อมูลบนหน้าเว็บเพจ จำได้แล้วว่าตำแหน่งนี้คืออะไร และถัดไปเป็นอะไร จะรู้สึกถึงความจำเจที่ต้อง ฟังข้อความเดิม ดังนั้นวิธีที่จะทำให้ผู้ใช้ไม่รู้สึกเบื่อหน่าย หรือเกิดความรำคาญ ก็คือต้องให้ผู้ใช้สามารถ "Skip" ยกเลิกการอ่านข้อมูลในส่วนนั้นๆได้ หรือกระโดดข้ามไปอ่านส่วนถัดไปได้ ตัวอย่างเช่นเว็บไซต์ของ Asia-Pacific Development Center on Disability หรือ APCD ซึ่งจะมีการให้ผู้ใช้สามารถ ยกเลิกการอ่านส่วนที่เป็น เมนู ซึ่งเป็นส่วนที่มีในทุกๆหน้าของเว็บ เป็นการทำให้ผู้ใช้ไม่ต้องรอให้อ่านทั้งหมด เพื่อที่จะได้ข้ามส่วนที่ไม่ต้องการไปได้ ในส่วน Source Code ของเว็บไซต์ APCD ซึ่งได้มีการทำ Skip main content ดังนี้
...ส่วนหัวของหน้าเว็บเพจของ APCD
...<td width="3" height="67">
<a href="#main" title=""><img src="images/header_left.gif" border="0" width="3" height="67" alt="skip to main content"></a>
</td>...
กำหนดการเชื่อมโยงไปที่ ส่วนที่กำหนดชื่อไว้เป็น main
...<a name="main"></a>...
ส่วนที่กำหนดชื่อไว้เป็น main
จะเห็นได้ว่า ในเว็บไซต์นี้ได้ใช้เทคนิคการทำ Skip main content ไว้โดยใช้ Image ขนาดเล็กให้อยู่ก่อนส่วน Main Content แล้วให้มี tag <a href = "#main"> เพื่อสั่งให้เชื่อมโยงไปยัง ส่วนที่กำหนดชื่อไว้ว่า main
มีตัวอย่างจากเว็บไซต์อื่นอีกที่ใช้เทคนิคที่แตกต่างไปจากนี้คือ เว็บไซต์ของ The American Council of the Blind ซึ่งทำการ Skip Navigation โดยมีการใช้ข้อความ text ขนาดเล็ก แสดงไว้ที่ส่วนแรก หรือส่วนบนสุดของข้อมูลบนหน้าเว็บไซต์ ดังรูป
ในส่วน Source Code แสดงได้ดังนี้
...<a href="#nonav"><font size="-2">Skip Navigation Links</font></a>...
...
...<a name="nonav"><IMG SRC="acblogo.jpg" width="217" height="214" alt="American Council of the Blind"></a>...

เป็นการแสดงให้เห็นว่ามีทั้งสองตัวอย่างนั้นล้วนแล้วแต่เป็นวิธีที่ทำให้ผู้ใช้สามารถ Skip main Content ได้ทั้งนั้น ซึ่งผู้พัฒนาอาจจะเห็นว่ายังมีเทคนิคอื่นอีกก็เป็นได้ แล้วแต่ผู้พัฒนาจะเลือกใช้วิธีใด แต่โดยหลักๆแล้วคือให้มีการสร้างการเชื่อมโยงหรือ link ไปที่หัวข้ออื่นๆที่ต้องการ โดยต้องไปกำหนดชื่อนั้นๆไว้ที่หัวข้อที่จะเชื่อมโยงไป และต้องสร้างการเชื่อมโยงไว้ก่อนหน้าส่วนหัวข้อที่จะเชื่อมโยงไปด้วย

ในการเชื่อมโยงไปยังหน้าอื่นนั้น ถ้าหากต้องใช้ข้อความหรือ Text Link ควรที่จะต้องเลือกข้อความหรือText นั้นๆ ให้มีความหมายในการเชื่อมโยงด้วย ตัวอย่างเช่น ถ้าต้องการจะเชื่อมโยงโดยใช้ข้อความไปยังหน้าถัดไป ก็อาจใช้คำว่า "หน้าถัดไป" หรือถ้าย้อนกลับไปหน้าเดิม อาจใช้คำว่า "ก่อนหน้า" ซึ่งจำเป็นต้องบอกให้ผู้ใช้ทราบเลยว่า ข้อความที่ใช้เป็นการเชื่อมโยง Link นั้นให้มีความหมายที่เข้าใจได้ง่ายกับผู้ใช้

เอกสารอ้างอิง

1. Skip Navigation, Making Your Site Accessible
2. JimThatcher.com Accessibility Consulting

กลับสู่เนื้อหาหลัก

บทความที่ผ่านมา

สงวนลิขสิทธิ์ โดยศูนย์วิจัยและพัฒนาเทคโนโลยีสิ่งอำนวยความสะดวกสำหรับคนพิการ
ศูนย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ | สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ
E-mail: suppakit.thongdee@nectec.or.th