2. รูปแบบการพัฒนาเว็บไซต์ท่ ีทุกคนเข้าถึงได้
Thai Web Content Accessibility Guide 2008
(TWCAG 2008)
สํานักงานปลัดกระทรวงเทคโนโลยีสารสนเทศและการสื่อสาร
TWCAG 2008
สํานักส่งเสริมและพัฒนาการใช้เทคโนโลยีสารสนเทศและการสื่อสาร

3. สารบัญ
การพัฒนาเว็บไซต์ที่ทกคนเข้ าถึงได้ ........................................................................ 1
ุ
การพัฒนาเว็บไซต์ที่ทกคนเข้ าถึงได้ แบบเริ่ มจากศูนย์ ............................................... 3
ุ
แผนผังการพัฒนาเว็บไซต์แบบเริ่ มจากศูนย์ ..................................................... 4
ขันตอนในการพัฒนาเว็บไซต์แบบเริ่ มจากศูนย์................................................. 5
้
การพัฒนาเว็บไซต์ที่ทกคนเข้ าถึงได้ แบบพัฒนาต่อจากของเดิม ................................. 7
ุ
แผนผังการพัฒนาเว็บไซต์แบบพัฒนาต่อจากของเดิม ....................................... 9
ขันตอนในการพัฒนาเว็บไซต์แบบพัฒนาต่อจากของเดิม ................................ 10
้
เทคนิคในการพัฒนาเว็บไซต์ท่ีทกคนสามารถเข้ าถึงได้ ……………………………… 13
ุ
มาตรฐานแนวทางการออกแบบเว็บไซต์ที่ทกคนเข้ าถึงได้ ……………………….…… 35
ุ
หลักการ…………………………………………………………………...…….. 37
ข้ อแนะนําในมาตรฐาน…………………………………………………...………38
เกณฑ์ความสําเร็ จ……………………………………………………….…..….. 38
ความหมายของเกณฑ์ความสําเร็ จ………………………………………………38
ความต้ องการในการปฏิบตตามมาตรฐาน………………………..……………..39
ัิ
หลักการที่ 1………………………………………………………….………….. 42
หลักการที่ 2……………………………………………………………….…….. 46
หลักการที่ 3……………………………………………………………….…….. 50
หลักการที่ 4……………………………………………………………………... 53
TWCAG 2008

4.
การพัฒนาเว็บไซต์ท่ ีทุกคนเข้าถึงได้
Web Accessibility คือ การจัดทําเว็บไซต์สําหรั บกลุ่มคนที่มีความ
หลากหลายทังทางด้ านเชื ้อชาติ ภาษา วัฒนธรรม ความเป็ นอยู่และสภาพร่ างกาย
้
และจิตใจให้ ได้ มากที่สดเท่าที่จะเป็ นไปได้ Web Accessibility เป็ นเว็บไซต์ที่
ุ
ครอบคลุมกลุมผู้ใช้ งานเว็บไซต์ทกกลุมคนให้ สามารถเข้ าถึงข้ อมูลข่าวสารต่างๆ ผ่าน
่ ุ ่
เว็บไซต์ได้
มาตรฐานเว็บไซต์ คือ การลดภาระการพัฒนาเว็บไซต์ที่ไม่จําเป็ นทังหลาย ้
ออกไปและเป็ นการกํ าหนดแนวทางให้ สําหรั บนักพัฒนาเว็บไซต์ เพื่อการพัฒนา
เว็บไซต์ให้ ทกคนสามารถเข้ าถึงข้ อมูล ข่าวสารต่างๆ ในเว็บไซต์ไม่ว่าจะเป็ นคนพิการ
ุ
ทางสายตาหรื อผู้สูงอายุที่สายตาเลือนลาง ตลอดจนคนพิการทางการได้ ยินและ
คนพิการทางร่ างกาย ฯลฯ ก็จะสามารถรับรู้ ถึงข้ อมูล ข่าวสารต่างๆ ที่นําเสนอผ่าน
1
ทางเว็บไซต์ได้
การสร้ างเว็ บ ไซต์ จํ า เป็ นต้ อ งมี ม าตรฐานเพื่ อ ให้ ก ารทํ า เว็ บ ไซต์ บ รรลุถึ ง
ความสามารถสูงสุดที่มีอยู่ ดังนันมาตรฐานเว็บไซต์จึงถูกสร้ างขึ ้นมาเพื่อรับประกัน
้
ว่าทุกคนสามารถเข้ าถึงข้ อมูลข่าวสารต่าง ๆ ได้ อย่างเท่าเทียมกัน
นอกจากนี ้ เพื่อทําให้ การพัฒนาเว็บไซต์มีความรวดเร็ วและราบลื่นมากขึน ้
การทําตามมาตรฐานจะทํ าให้ ผ้ ูใช้ อิ นเทอร์ เน็ ตที่มีความต้ องการพิเศษบางอย่าง
สามารถใช้ งานเว็บไซต์ได้ งายขึ ้น เช่น คนตาบอดอาจจะให้ คอมพิวเตอร์ อ่านข้ อความ
่
ในเว็บไซต์ คนสายตาเลือนลางอาจใช้ โปรแกรมขยายหน้ าจอเพื่อให้ อ่านง่ายขึ ้นหรื อ
คนที่ใช้ อปกรณ์พกพาก็สามารถเข้ าใช้ อินเทอร์ เน็ตได้ ดีพอ ๆ กับคนที่ใช้ คอมพิวเตอร์
ุ
ทัวไป ฯลฯ มีเหตุผลหลายประการที่นกพัฒนาเว็บไซต์ควรใส่ใจกับการพัฒนาเว็บให้
่ ั
เป็ นไปตามมาตรฐานเว็บไซต์
TWCAG 2008

5.
การพั ฒ นาเว็ บ ไซต์ ใ ห้ เป็ นเว็ บ ไซต์ ที่ ทุ ก คนเข้ าถึ ง ได้ นั น สิ่ ง สํ า คัญ คื อ
้
ข้ อกําหนดหรื อเกณฑ์ในการพัฒนาเว็บไซต์ ซึ่งในการพัฒนาเว็บไซต์มีวตถุประสงค์ ั
ให้ เว็บไซต์สามารถผ่านข้ อกําหนดหรื อเกณฑ์มาตรฐาน WCAG มาตรฐานสากล
การเข้ าถึงเว็บไซต์ WAI (Web Accessibility Initiative) ขององค์กรกลาง W3C
(World Wide Web Consortium) สําหรับประเทศไทย สํานักงานปลัดกระทรวง
เทคโนโลยีสารสนเทศและการสื่อสาร โดยสํานักส่งเสริ มและพัฒนาการใช้ เทคโนโลยี
สารสนเทศและการสื่อสารได้ มีการจัดทํารู ปแบบการพัฒนาเว็บไซต์ให้ เป็ นเว็บไซต์ที่
ทุกคนสามารถเข้ าถึงได้ และเกณฑ์ มาตรฐานฉบับภาษาไทยขึน ภายใต้ ชื่อ “Thai ้
Web Content Accessibility Guide 2008 (TWCAG2008)”
TWCAG 2008 เป็ นแนวทางในการส่งเสริ มให้ หน่วยงานต่างๆ ปรับปรุ งและ
พัฒนาเว็บไซต์ที่ผ้ ด้อยโอกาส คนพิการและผู้สงอายุสามารถเข้ าถึงได้ ในการรับข้ อมูล
ู ู
สารสนเทศและรับบริ การอิเล็กทรอนิกส์
2 ทังนี ้ การพัฒนาเว็บไซต์ของหน่วยงานให้ เป็ นเว็บไซต์ท่ีทกคนสามารถเข้ าถึง
้ ุ
โดยปราศจากอุปสรรค คือ การปรับปรุ ง พัฒนาเว็บไซต์ให้ ตรงกับมาตรฐาน ซึ่งใน
การพัฒนาเว็บไซต์ที่ทุกคนเข้ าถึงได้ นี ้ สามารถกํ าหนดรู ปแบบในการพัฒนาได้ 2
รูปแบบด้ วยกัน ดังนี ้
การพัฒนาเว็บไซต์ที่ทกคนเข้ าถึงได้ แบบเริ่มจากศูนย์
ุ
การพัฒนาเว็บไซต์ที่ทกคนเข้ าถึงได้ แบบพัฒนาต่อจากของเดิม
ุ
TWCAG 2008

6.
การพัฒนาเว็บไซต์ท่ ีทุกคนเข้าถึงได้แบบเริ่มจากศูนย์
การสร้ างเว็บไซต์ที่ทกคนสามารถเข้ าถึงได้ นน สิ่งหนึ่งที่ผ้ พฒนาเว็บไซต์ต้อง
ุ ั้ ู ั
ตระหนัก ถึ ง อยู่เ สมอ คื อ ความเข้ า ใจในวัต ถุป ระสงค์ ข องการจัด ทํ า เว็ บ ไซต์ ว่ า
เว็บไซต์ที่จะทําการพัฒนาขึ ้นมานัน จะต้ องเป็ นเว็บไซต์ที่จะเป็ นประโยชน์แก่ผ้ ูคน
้
จํ า นวนมากที่ ยัง ไม่ ส ามารถเข้ า ถึ ง ข้ อ มูล ข่ า วสารได้ และการที่ จ ะทํ า ให้ เ ว็ บ ไซต์
ดังกล่าว เป็ นเว็บไซต์ที่ทกคนสามารถเข้ าถึงได้ อย่างไม่มีข้อจํากัด ไม่ว่าผู้ใช้ งานนัน
ุ ้
จะเป็ นใคร มีขีดจํากัดในการรั บรู้ ข่าวสารในลักษณะใด ผู้พัฒนาเว็บไซต์จะต้ อง
พัฒนาเว็บไซต์ตามมาตรฐาน WCAG หรื อ TWCAG 2008 ซึงภายในข้ อกําหนดแต่่
ละข้ อของมาตรฐานนี ้จะครอบคลุมถึง Tag ต่างๆ และ Object ต่างๆ ที่จะนํามา
รวมตัวกันเป็ นเว็บไซต์ ซึ่งนับว่าเป็ นแนวทางสําคัญที่ใช้ ในการตรวจสอบเว็บไซต์ที่
สร้ างขึนมา ว่าตรงตามมาตรฐานหรื อไม่ เนื่องจาก Tag ต่างๆ เหล่านี ้ จะส่งผล
้
3
กระทบต่อการทํางานของแอพพลิเคชันช่วยเหลือของคนพิการ เช่น ถ้ าหากมีการใช้
่
Tag ที่ผิดวัตถุประสงค์หรื อไม่ถกต้ อง หรื อใส่ค่าต่างๆไม่ครบถ้ วนพอ อาจทําให้ สื่อ
ู
ความหมายได้ ผิดเพี ้ยน ซึงส่งผลให้ เว็บไซต์นนยังไม่ผานมาตรฐาน
่ ั้ ่
ทุกวันนี เ้ ว็บไซต์ ที่ผ่านมาตรฐาน WCAG นี ยังนับว่ามี จํานวนน้ อยมาก
้
เนื่องจากการพัฒนาเว็บไซต์ตามมาตรฐาน WCAG อาจจะมีความซับซ้ อนหรื อ
ข้ อจํากัดบางอย่างที่ทําให้ ผ้ พฒนาเว็บไซต์บางคนไม่สนใจที่จะนําไปใช้ หรื อยังติดอยู่
ู ั
กับความเคยชินแบบเดิมๆ ในการพัฒนาเว็บไซต์แบบเก่า แต่หากได้ ลองศึกษาดูจริ งๆ
แล้ วจะพบว่า การพัฒนาเว็บไซต์ที่ทุกคนสามารถเข้ าถึงได้ นน มีความง่ายอยู่มาก
ั้
เพียงแค่ทําความเข้ าใจเพิ่มเติมเท่านัน โดยการพัฒนาเว็บไซต์ขึ ้นมาใหม่นนผู้พฒนา
้ ั้ ั
เว็บไซต์สามารถใช้ แนวทางในการพัฒนาตามมาตรฐาน WCAG หรื อ TWCAG 2008
ซึ่งเป็ นมาตรฐานของประเทศไทยที่กระทรวงเทคโนโลยีสารสนเทศจัดทําขึ ้นในฉบับ
TWCAG 2008
ภาษาไทย ซึ่งอิงมาจากองค์การ World Wide Web Consortium (W3C) ตาม

7.
มาตรฐานสากล WCAG 1.0 และ WCAG 2.0 ซึงหากผู้พฒนาเว็บไซต์กําลังคิดจะ
่ ั
สร้ างเว็บไซต์ขึ ้นมาใหม่ สามารถใช้ แนวทางทางปฏิบติตามมาตรฐาน WCAG หรื อ
ั
TWCAG 2008 ได้
ทังนี ้ การพัฒนาเว็บไซต์ที่ทกคนเข้ าถึงได้ แบบเริ่ มจากศูนย์ นักพัฒนาเว็บไซต์
้ ุ
สามารถวิเคราะห์และออกแบบเว็บไซต์ตามแผนผังและขันตอนการพัฒนาเว็บไซต์
้
ด้ วยวิธีแบบเริ่ มจากศูนย์ได้ ดงรูปที่ 1
ั
แผนผังการพัฒนาเว็บไซต์ แบบเริ่มจากศูนย์
วิเคราะห์ข้อมูลที่จะนําเสนอภายในเว็บไซต์
4
ออกแบบโครงสร้ างเว็บไซต์
ตรวจสอบมาตรฐานเว็บไซต์ตามแนวทางของ WCAG
รูปที ่ 1. แผนผังแสดงการพัฒนาเว็บไซต์แบบเริ่ มจากศูนย์
TWCAG 2008

8.
ขันตอนในการพัฒนาเว็บไซต์ แบบเริ่มจากศูนย์
้
่
1) วิเคราะห์ ข้อมูลทีจะนําเสนอภายในเว็บไซต์
สิ่งที่ผ้ ูพฒนาเว็บไซต์ต้องทําเป็ นอันดับแรกเมื่อพัฒนาเว็บไซต์ คือ ต้ อง
ั
ทราบก่อนว่าเว็บไซต์ที่จะจัดทําขึ ้นนัน มีวัตถุประสงค์และลักษณะขององค์กรเป็ น
้
แบบใด สิ่งที่สําคัญที่สด คือ ข้ อมูลที่จะนําเสนอเป็ นข้ อมูลอะไร ซึ่งผู้พฒนาเว็บไซต์
ุ ั
จะต้ องคํานึงถึงเป็ นประเด็นหลักในการจัดทําเว็บไซต์ ผู้พฒนาเว็บไซต์จะต้ องใส่ใจ
ั
กับเรื่ องเนื ้อหาอย่างเป็ นพิเศษ เนื่องจากเนื ้อหาจะเป็ นตัวกําหนดคุณลักษณะต่างๆ
ของเว็บไซต์ ไม่ว่าจะเป็ นสีท่ีจะใช้ รู ปแบบการนําเสนอหรื อแนวคิด วัตถุประสงค์ใน
การจัดทําเว็บไซต์ ทังหมดนันก็เพื่อความเป็ นระเบียบและความสวยงามของเว็บไซต์
้ ้
2) ออกแบบโครงสร้ างเว็บไซต์
โครงสร้ างเว็บไซต์ หมายถึง การจัดวางและออกแบบเว็บไซต์ที่ผ้ ูพฒนา
ั
เว็บไซต์จะต้ องคิดและออกแบบว่าควรจะมีการจัดวางอย่างไร สําหรับเมนูและเนื ้อหา
5
รวมถึงการตกแต่งให้ สวยงาม เข้ าใจง่าย การออกแบบโครงสร้ างที่ดีนน ควรจะทําให้
ั้
ผู้ใช้ งานสามารถติดตามเนื ้อหาได้ อย่างไม่สบสน ประโยชน์ที่เกิดจากการจัดวางที่ดี
ั
นอกจากจะมีหน้ าตาที่สวยงาม สบายตาแล้ ว ยังทําให้ แอพพลิเคชันช่วยเหลือต่างๆ
่
สามารถที่จะทํางานได้ อย่างถูกต้ อง แม่นยําอีกด้ วย และเมื่อกล่าวถึงการออกแบบให้
ทํางานคูกบแอพพลิเคชันช่วยเหลือ บางท่านอาจนึกถึงรูปแบบเว็บไซต์ Text Only ซึง
่ ั ่ ่
แท้ จริ งแล้ ว นักพัฒนาเว็บไซต์สามารถออกแบบเว็บไซต์ให้ สวยงาม และยังคงใช้ งาน
กับแอพพลิเคชันช่วยเหลือได้ โดยสามารถใช้ เทคโนโลยี CSS เป็ นเครื่ องมือในการจัด
่
Layout และตกแต่งหน้ าเว็บเพจให้ สวยงามได้ โดยไม่ทําให้ เนื ้อหาเกิดความสับสนแก่
ผู้ที่เข้ ามาใช้ งาน
TWCAG 2008

9.
3) ตรวจสอบมาตรฐานเว็บไซต์
ขันตอนของการตรวจสอบ นักพัฒนาเว็บไซต์สามารถทําการตรวจสอบ
้
เว็บไซต์ด้วยกัน 2 วิธี ดังนี ้
วิธีแรก คือ ตรวจสอบด้ วยระบบ Manual ตามแนวทางการตรวจสอบ
มาตรฐานสากล WCAG หรื อ TWCAG 2008 ที่พฒนาขึ ้นอิงตามมาตรฐานสากล
ั
โดยนักพัฒนาเว็บไซต์สามารถนําแนวทางหลักการ ข้ อแนะนําและเกณฑ์ความสําเร็ จ
มาใช้ ประเมินเว็บไซต์ที่พฒนาขึ ้นมาได้ นอกจากนี ้ยังสามารถทราบได้ ด้วยว่าเว็บไซต์
ั
ที่จดทําขึ ้นมานัน อยูในเกณฑ์ความสําเร็ จของการเข้ าถึงได้ ในระดับใด
ั ้ ่
วิธีที่สอง คือ ตรวจสอบด้ วยระบบแอพพลิเคชันขององค์กรที่เกี่ยวข้ องกับ
่
มาตรฐาน WCAG อาทิเช่น Adaptive Technology Resource Center (ATRC)
แห่งมหาวิทยาลัย Toronto ซึงเป็ นองค์กรที่ศกษาเกี่ยวกับการจัดทําเว็บไซต์ที่ทกคน
่ ึ ุ
เข้ าถึงได้ และได้ จดทําแอพพลิเคชันที่ใช้ ในการตรวจสอบเว็บไซต์ขึ ้นตามมาตรฐาน
ั ่
6 WCAG ซึ่งสามารถตรวจสอบข้ อบกพร่ องต่างๆ ได้ อย่างแม่นยํา นอกจากนีหาก ้
ต้ องการทดสอบเว็บไซต์ ผู้พฒนาเว็บไซต์สามารถใช้ Web Accessibility Checker
ั
และโปรแกรมสําเร็ จรู ปในการทดสอบได้ เช่นกัน ซึ่งผลที่ได้ จะแสดงผลเหมื อนกัน
โดยผลลัพธ์ ที่ได้ จะแสดงให้ ผ้ ตรวจสอบทราบว่า มีจุดใดที่ติดข้ องและยังไม่ผ่านตาม
ู
มาตรฐาน WCAG หรื อ TWCAG 2008 ทังนี ้ยังสามารถแนะนําแนวทางในการแก้ ไข
้
อีกด้ วย
ดัง นัน ในขัน ตอนของการตรวจสอบนี ้ หน้ า ที่ ข องผู้พัฒ นาเว็ บ ไซต์ คื อ
้ ้
เข้ า ใจในจุ ด ที่ บ กพร่ อ งและยัง ไม่ ผ่ า นเกณฑ์ ค วามสํ า เร็ จ แล้ ว ดํ า เนิ น การแก้ ไข
จนกระทั่งผ่านมาตรฐานตามเกณฑ์ความสําเร็ จทังหมดทุกข้ อ ก็สามารถทําให้ ได้
้
เว็บไซต์ที่ทกคนสามารถเข้ าถึงได้ อย่างสมบูรณ์
ุ
TWCAG 2008

10.
การพัฒนาเว็บไซต์ท่ ีทุกคนเข้าถึงได้แบบพัฒนาต่อจากของเดิม
จากที่ ก ล่า วไปในข้ า งต้ น ถึง สาเหตุที่ เ ว็บ ไซต์ ที่ มี อ ยู่ใ นปั จ จุบัน ยัง ไม่ ผ่า นเกณฑ์
มาตรฐาน WCAG อยู่เป็ นจํานวนมากนัน ที่เป็ นเช่นนี ้เพราะ ความเข้ าใจผิด หรื อความไม่
้
สนใจบางประการเกี่ยวกับเครื่ องมือและแนวทางในการพัฒนาเว็บไซต์ให้ เป็ นเว็บไซต์ที่
ทุกคนเข้ าถึงได้ (Web Accessibility) ซึงความเข้ าใจผิดต่างๆ นันสามารถอธิบายได้ คร่าวๆ
่ ้
ดังต่อไปนี ้
1) การทําเว็บไซต์ ให้ สวยไม่ จาเป็ นต้ องเป็ น Text-only เวอร์ ช่ัน
ํ
ความหมายของ Text-only เวอร์ ชนส่วนใหญ่แล้ ว หมายถึง หน้ าเอกสารที่ไม่มี
ั่
รูปภาพ มักมีเพียงคอลัมน์เดียว ไม่คอยมีสีสน แต่ Text-only นันมักจะมีปัญหาเรื่ อง
่ ั ้
Accessibility ตราบใดที่นกพัฒนาเว็บไซต์ไม่เข้ าใจว่า Web Accessibility คืออะไร
ั
อย่างเช่น ระบบ Navigation ที่ไม่แยกชัดเจนออกจากเนื ้อหาทําให้ ผ้ ใช้ สบสน การใชู้ ั
ข้ อความลิงค์ที่ไม่สื่อความหมาย เนื ้อหาที่ยาวเกินไปหรื อเนื ้อหาไม่ทนสมัยเท่ากับเวอร์ ชน
ั ั 7
ปกติ และในปั จจุบนนี ้การทําเว็บไซต์ให้ สวยงามพร้ อมกับเป็ นเว็บไซต์ที่ทกคนเข้ าถึงได้ เป็ น
ั ุ
เรื่ องที่สามารถ ทําได้ แล้ ว จึงไม่จําเป็ นต้ องเป็ น Text-only แต่อย่างใด
่
2) การทํา Web Accessibility ทําให้ เว็บไซต์ ให้ ดูไม่ น่าเบือ มีสีสัน
ในความเป็ นจริ ง นัน ความสวยงามของเว็บไซต์ จ ะขึน อยู่กับผู้อ อกแบบ ซึ่ง
้ ้
จะต้ องกําหนดสีสน พื ้นหน้ า พื ้นหลัง เส้ นขอบ การจัดวางตําแหน่งต่างๆ ฯลฯ ปั ญหาอีก
ั
อย่างหนึ่งที่มกพบบ่อยคือ นักพัฒนาเว็บทําตามมาตรฐานอย่างเคร่ งครัดมากเกินไป เช่น
ั
ใน WCAG 1.0 กล่าวไว้ ว่า “หน้ าเอกสารจะต้ องสามารถใช้ งานและเข้ าใจได้ หากสคริ ปต์
ต่างๆ ไม่ทํางานหรื อผู้ใช้ ไม่สนับสนุนสคริ ปต์” ซึงนักพัฒนาเว็บไซต์มกจะคิดว่า ไม่ควรใช้
่ ั
สคริ ป ต์ แต่จริ ง ๆ แล้ ว ยัง สามารถใช้ ส คริ ป ต์ ไ ด้ เ หมื อ นเดิม เพี ย งแต่ต้อ งมี เนื อ หา
้
ทดแทนในกรณี ที่สคริ ปต์ ไม่สามารถทํางานได้ เท่านัน การใช้ ไฟล์ PDF และ Flash
้
TWCAG 2008
Animation ก็สามารถทําได้ เนื่ องจากผู้ผลิต(ในช่วงหลัง ๆ) ได้ พัฒนาซอฟต์ แวร์ โดย

11.
คํานึงถึง Accessibility ด้ วย (แต่ควรศึกษาวิธีการทําให้ เข้ าใจเสียก่อน) หากต้ องการชม
เว็บไซต์ที่คํานึงถึง Accessibility และมีความสวยงาม สามารถเข้ าไปดูตวอย่างได้ ที่เว็บไซต์
ั
ตัวอย่าง http://www.csszengarden.com แล้ วเลือกเมนู all designs
3) การใช้ เครื่ องมือรวมทั้งซอฟต์ แวร์ ไม่ จาเป็ นต้ องมีราคาแพง
ํ
เมื่อองค์กรของท่านตัดสินใจจะทําเว็บไซต์ที่ทกคนเข้ าถึงได้ นน อาจจะต้ อง
ุ ั้
มีค่าใช้ จ่ายอยู่บ้าง แต่ก็ไม่สงมากอย่างที่หลายท่านเข้ าใจ สาเหตุท่ีหลายท่านคิดว่า
ู
การทํา Web Accessibility ต้ องใช้ เงินมากนันอาจจะเป็ นเพราะว่า ต้ องการทดสอบ
้
เว็บไซต์ด้วยโปรแกรมอ่านหน้ าจอ (Screen Reader) ซึงมีราคาแพงมากและยากต่อ
่
การใช้ ง าน แต่ก ารซื อ โปรแกรมอ่ า นหน้ า จอไม่ ใ ช่ สิ่ง จํ าเป็ นอี ก ต่อ ไป สามารถจะ
้
ประหยัดเงินได้ ด้วยวิธีตอไปนี ้
่
ใช้ Voicing Browser เช่น Home Page Reader พัฒนาโดย IBM ที่มี
ราคาไม่แพง
8 ส่งตัวอย่างเว็บไซต์ให้ กบผู้ที่ใช้ โปรแกรมอ่านหน้ าจอทดสอบให้
ั
การมาร์ กอัพและการออกแบบที่เหมาะสมจะสามารถทําให้ เว็บไซต์
เป็ นเว็บไซต์ที่ทุกคนเข้ าถึงได้ มากกว่าเว็บไซต์ปกติทั่วไปอยู่แล้ ว แต่
ต้ องอาศัยความรู้ที่ถกต้ องด้ วย
ู
4) Accessibility ไม่ ใช่ เป็ นเรื่ องของคนพิการทางสายตาเท่ านั้น
ในความเป็ นจริ งแล้ ว เว็บไซต์ที่ออกแบบไม่ดีสามารถสร้ างอุปสรรคให้ กบ ั
คนพิ ก ารประเภทต่ า งๆ รวมทัง คนที่ ไ ม่ พิ ก ารได้ เ ช่ น กั น อาทิ เ ช่ น การจัด ระบบ
้
Navigation ไม่ดี ทําให้ หาข้ อมูลได้ ยาก การมี Pop up รบกวนการใช้ งานการใช้
ตัว หนัง สื อ ที่ เ ล็ ก เกิ น ไปหรื อ สี พื น หน้ าและพื น หลัง ตัด กั น น้ อ ยทํ า ให้ อ่ า นได้ ย าก
้ ้
มีเนื ้อหายาวเกินไป ทําให้ ผ้ พิการทางการเคลื่อนไหวประสบความยากลําบากในการ
ู
เลื่อนเมาส์เพื่อดูข้อมูล การมีข้อมูลเพียงอย่างเดียวทําให้ คนพิการทางการได้ ยินไม่
TWCAG 2008
สามารถรับรู้เนื ้อหาได้ การใช้ เสียงเพลงพื ้นหลังที่ปิดไม่ได้ ซงก่อความรํ าคาญแก่ผ้ ใช้
ึ่ ู

12.
ดังนัน หากกล่าวถึงเฉพาะส่วนของการพัฒนาเว็บไซต์ให้ เป็ นเว็บไซต์ท่ีทกคน
้ ุ
เข้ าถึงได้ ( Web Accessibility) นักพัฒนาเว็บไซต์สามารถทําการพัฒนาเว็บไซต์
หน่วยงานต่อจากของเดิมที่มีอยู่ ให้ ผ่านเกณฑ์มาตรฐาน WCAG หรื อ TWCAG
2008 ได้ โดยสามารถดําเนินการปรับปรุงเว็บไซต์ได้ ตามรูปแบบแผนผังและขันตอน ้
การดําเนินงานดังต่อไปนี ้
แผนผังการพัฒนาเว็บไซต์ แบบพัฒนาจากของเดิม
ตรวจสอบและประเมินเว็บไซต์ก่อนการพัฒนา
แสดงตารางแสดงผลการตรวจสอบเว็บไซต์เปาหมาย
้
9
ปรับปรุงและพัฒนาเว็บไซต์ตามแนวทางของ WCAG 2.0
ทําการตรวจสอบและประเมินเว็บไซต์หลังจากพัฒนาปรับปรุงเว็บไซต์
เรี ยบร้ อยแล้ ว
รูปที ่ 2. แผนผังแสดงการพัฒนาเว็บไซต์แบบพัฒนาจากของเดิ ม
TWCAG 2008

13.
ขันตอนในการพัฒนาเว็บไซต์ แบบพัฒนาต่ อจากของเดิม
้
1) ตรวจสอบและประเมินเว็บไซต์ ก่อนการพัฒนา
อันดับแรก ตรวจสอบเว็บไซต์ของเดิมที่มีอยู่ ก่อนที่จะนํามาปรับปรุ งใหม่
ให้ เป็ นเว็บไซต์ที่ทกคนเข้ าถึง (Web Accessibility) ว่าเว็บไซต์เดิมนันผ่านเกณฑ์
ุ ้
มาตรฐาน WCAG หรื อ TWCAG 2008 ในระดับใดตามเกณฑ์ความสําเร็ จ โดย
สามารถนํา URL ของเว็บไซต์นนไปดําเนินการตรวจสอบด้ วยวิธีระบบ Manual หรื อ
ั้
ตรวจสอบด้ วยระบบแอพพลิเคชันขององค์กรที่เกี่ยวข้ องกับมาตรฐาน WCAG
่
2) ตารางแสดงผลการตรวจสอบ
เมื่อทําการตรวจสอบเว็บไซต์แล้ ว นักพัฒนาเว็บไซต์สามารถทราบผลของ
การตรวจสอบได้ โดยตารางแสดงผลการตรวจสอบจะปรากฏหน้ าจอเป็ นตาราง
แสดงผลของการตรวจสอบเว็ บ ไซต์ ซึ่ง หากยัง ไม่ ผ่า นเกณฑ์ ตารางแสดงผลจะ
10 แสดงผลในข้ อใดที่ยงไม่ผานให้ ทราบ ด้ วยรูปแบบของตารางดังรูปที่ 3.
ั ่
รูปที ่ 3.ตัวอย่างหน้าจอแสดงผลการตรวจสอบเว็บไซต์
TWCAG 2008
(มาตรฐาน WCAG ระดับ AA)

14.
จากตารางในรู ปด้ านบนแสดงถึงระดับของมาตรฐาน WCAG ที่เลือกมาทํา
การตรวจสอบ ซึ่งแสดงสถานะของเว็บไซต์ในการผ่านหรื อไม่ผ่านเกณฑ์มาตรฐาน
ซึงจากตารางแสดงหน้ าจอข้ างต้ น ปรากฏว่าเว็บไซต์ที่ทําการตรวจสอบนันยังไม่ผ่าน
่ ้
มาตรฐาน WCAG 1.0 ระดับเกณฑ์ความสําเร็ จ AA “FAIL WCAG1.0 (Level AA)”
นอกจากนี ้ภายในตารางผู้ตรวจสอบยังสามารถเรี ยกดูปัญหาต่างๆ ที่ต้องดําเนินการ
แก้ ไขได้ ซึงเมื่อทดลองคลิกเข้ าไปแล้ วยังมีรายละเอียดบอกถึงบรรทัดของ code html
่
ที่ต้องทําการแก้ ไขและแนะนําเกี่ยวกับการแก้ ไขอีกด้ วย
11
รูปที ่ 4.รายละเอี ยดของปั ญหาและแนวทางการแก้ไขคร่ าวๆ
(ที่มา; http://checker.atrc.utoronto.ca/index.html)
3) ปรั บปรุ งและพัฒนาเว็บไซต์ ตามแนวทางของ WCAGหรื อ
TWCAG2008
เมื่ อ ทราบรายละเอี ย ดของปั ญ หาทัง หมดแล้ ว ก็ ส ามารถทํ า การแก้ ไ ข
้
TWCAG 2008
ปั ญหาได้ โดยนักพัฒนาเว็บไซต์สามารถปฏิบัติตามแนวทางของ WCAG (Basic

15.
Web Content Accessibility Guideline) หรื อ TWCAG 2008 (Thai Web Content
Accessibility Guide 2008) ซึ่งได้ อธิบายถึงแนวทาง หลักการและเกณฑ์ระดับ
ความสําเร็ จในระดับ A, AA, AAA สําหรับการพัฒนาเว็บไซต์ให้ เป็ นเว็บไซต์ที่ทกคน
ุ
เข้ าถึงได้ โดยปราศจากอุปสรรคในการเข้ าถึง และยังอธิบายถึงเทคนิคการออกแบบ
เว็บไซต์ที่ทกคนเข้ าถึงได้ ในระดับพื ้นฐานสําหรับการสร้ างเว็บไซต์ด้วย
ุ
4) ตรวจสอบและประเมินเว็บไซต์ หลังจากพัฒนา ปรั บปรุ งเว็บไซต์
เมื่อทําการแก้ ไข ปรับปรุ งเว็บไซต์เป็ นที่เรี ยบร้ อยแล้ ว นักพัฒนาสามารถ
นําเว็บไซต์ไปตรวจสอบกับ Web Checker หรื อระบบแอพพลิเคชันขององค์กรที่ ่
เกี่ยวข้ องกับมาตรฐาน WCAG ได้ อีกครัง เพื่อตรวจสอบอีกครังว่าเว็บไซต์นนได้ ผ่าน
้ ้ ั้
เกณฑ์ระดับความสําเร็ จตามที่มาตรฐานกําหนดไว้ หรื อไม่ โดยหากเว็บไซต์ของท่าน
ผ่านตามเกณฑ์ระดับความสําเร็ จ ตารางแสดงผลการตรวจสอบจะปรากฏข้ อความ
ต่อไปนี ้ “CONDENTIONAL PASS WCAG1.0 (level AA)”
12
เพราะฉะนัน ในการพัฒนาเว็บไซต์ให้ เป็ นเว็บไซต์ที่ทุกคนเข้ าถึงได้ ต่อไป
้
นักพัฒนาเว็บไซต์ก็สามารถพัฒนา ปรับปรุ งเว็บไซต์ให้ เป็ นเว็บไซต์ที่ทกคนเข้ าถึงได้
ุ
โดยมีทางเลือกด้ วยกัน 2 วิธี คือ วิธีแบบเริ่ มจากศูนย์และวิธีแบบพัฒนาต่อจาก
ของเดิม ตามรูปแบบในการพัฒนา ปรับปรุงเว็บไซต์ดงกล่าวข้ างต้ น
ั
ทังนี ้ ไม่ว่าเว็บไซต์ ของหน่วยงานหรื อองค์กรที่ ต้องการพัฒนา ปรั บปรุ ง
้
เว็บไซต์ให้ เป็ นเว็บไซต์ที่ทกคนเข้ าถึงได้ จะอยูในเกณฑ์ความสําเร็ จระดับ A หรื อยังไม่
ุ ่
ผ่านเกณฑ์ ก็จะสามารถพัฒนาเว็บไซต์ให้ เป็ นเว็บไซต์ที่ทกคนเข้ าถึงได้ ตามแนวทาง
ุ
มาตรฐาน WCAG หรื อ TWCAG 2008 และเทคนิคในการพัฒนาเว็บไซต์ที่ทกคน ุ
สามารถเข้ าถึงได้ ซึงต่อไปการใช้ งานเว็บไซต์สําหรับคนพิการหรื อคนปกติทวไปก็จะ
่ ั่
ไม่มีอปสรรคในการเข้ าถึงอีกต่อไป
ุ
TWCAG 2008

16.
เทคนิคในการพัฒนาเว็บไซต์ท่ ีทุกคนสามารถเข้าถึงได้
การใช้ เทคโนโลยี CSS
ในการพัฒนา ปรังปรุงเว็บไซต์ให้ เป็ นเว็บไซต์ที่ทกคนเข้ าถึงได้ นนหากต้ องการ
ุ ั้
ให้ เว็บไซต์ออกมาสวยงามหรื อมีลกษณะคล้ ายกับเว็บไซต์เดิมให้ มากที่สด ผู้พฒนา
ั ุ ั
เว็บไซต์ควรใช้ เทคโนโลยี CSS (Cascading Style Sheets) เพื่อช่วยในการออกแบบ
เว็บไซต์ เพราะเทคโนโลยี CSS นัน คือส่วนของการจัดการรูปแบบของโครงสร้ างของ
้
ข้ อมูลหรื อเรี ยกง่ายๆ ว่าส่วนของการออกแบบหน้ าตาเว็บไซต์นั่นเอง ซึ่งข้ อดีของ
เทคโนโลยี CSS สามารถอธิบายได้ ดงต่อไปนี ้
ั
เทคโนโลยี CSS ช่วยให้ ไฟล์ของแต่ละหน้ ามีขนาดเล็กลงกว่าเดิม เพราะ
โค้ ดจะมีน้อยกว่า
เทคโนโลยี CSS มีความยืดหยุนสูงในการปรับแต่งแก้ ไขในอนาคต
่ 13
เทคโนโลยี CSS สามารถควบคุม Web Page หลายๆ หน้ าได้ ด้วย style
sheet เพียงแค่ไฟล์เดียว
เทคโนโลยี CSS สามารถจัดการกับการออกแบบได้ อย่างละเอียดและ
แม่นยํา
การใช้ เทคโนโลยี CSS ง่ายสําหรับการเรี ยกดู Source Code
ฉะนั ้นการพัฒนาแบบเทคโนโลยี CSS สามารถช่วยให้ การแก้ ไขเป็ นไปอย่าง
สะดวก เพราะเทคโนโลยี CSS ไม่ได้ เขียนโค้ ดฝั งติดในบรรทัดเดียวกัน เมื่อเวลา
ต้ องการกลับไปแก้ ไขจึงสามารถค้ นหาและแก้ ไขได้ งาย ่
การใช้ Template สําเร็จรูป
TWCAG 2008
ในการพัฒนาเว็บไซต์ ผู้พฒนาเว็บไซต์สามารถใช้ Template สําเร็ จรูปหรื อ
ั
CSS Template ตามความต้ องการได้ โดยสามารถเก็บไว้ เป็ นตัวเลือกในการพัฒนา

17.
เว็บไซต์ ซึงทําให้ ผ้ พฒนาเว็บไซต์ไม่จําเป็ นจะต้ องเริ่ มเขียน code ใหม่ทงหมดตังแต่
่ ู ั ั้ ้
ต้ น ทัง นี ผ้ ูพัฒ นาเว็บ ไซต์ อ าจเลือ กใช้ template ที่ มี ลัก ษณะโครงสร้ างเว็ บ ไซต์ ที่
้ ้
คล้ ายกับเว็บไซต์เดิมที่มีอยู่ แล้ วนํามาแก้ ไขให้ มีลกษณะคล้ ายของเดิมมากที่สด ซึ่ง
ั ุ
ทําให้ การพัฒนาเว็บไซต์ให้ เป็ นเว็บไซต์ที่ทกคนเข้ าถึงสามารถทําได้ งายขึ ้น
ุ ่
โปรแกรมที่ใช้ ในการพัฒนาเว็บไซต์
ในการพัฒนาเว็บไซต์ให้ เป็ นเว็บไซต์ที่ทุกคนเข้ าถึงได้ นักพัฒนาเว็บไซต์
หรื อนักออกแบบเว็บไซต์สามารถใช้ เครื่ องมือการออกแบบทัง้ 3 โปรแกรมที่แสดงใน
ด้ านล่างได้ โดยไม่ต้องกังวลเรื่ องความยุ่งยากในการพัฒนาเว็บไซต์ท่ีทกคนเข้ าถึงได้
ุ
เนื่องจากเครื่ องมือเหล่านี ้เป็ นเครื่ องมือที่ช่วยตกแต่งทําให้ เว็บไซต์มีความสวยงามขึ ้น
อันได้ แก่
โปรแกรม Macromedia Dreamweaver MX
14 โปรแกรม Adobe Photoshop CS2
โปรแกรม Adobe Illustrator CS2
แบบโครงสร้ างเว็บไซต์ (Template)
นอกจากเครื่ องมื อ ที่ ช่วยในการตกแต่งเว็บไซต์ ใ ห้ มี ความสวยงามแล้ วนัน
้
การออกแบบโครงสร้ างเว็บไซต์ (Template) ถือได้ ว่าเป็ นส่วนหนึ่งที่มีความสําคัญ
อย่างยิ่งในการกําหนดรู ปแบบการจัดวางเนือหาอย่างเป็ นระเบียบเรี ยบร้ อย ซึ่งใน
้
การออกแบบโครงสร้ างเว็บไซต์ (Template) นักพัฒนาเว็บไซต์หรื อนักออกแบบ
เว็บไซต์สามารถกํ าหนดการจัดวางได้ หลากหลายรู ปแบบด้ วยกันตามเนือหาและ ้
วัตถุประสงค์ของการนําเสนอ
แต่อย่างไรก็ตามในการออกแบบโครงสร้ างเว็บไซต์ (Template) นักพัฒนา
TWCAG 2008
เว็ บ ไซต์ ห รื อ นั ก ออกแบบเว็ บ ไซต์ ส ามารถที่ จ ะออกแบบโครงสร้ างเว็ บ ไซต์

18.
(Template) ให้ ตรงตามแนวทางของมาตรฐาน WCAG หรื อ TWCAG 2008 ได้
ดังเช่นตัวอย่างรูปแบบการจัดวางต่างๆ ของเว็บไซต์เพื่อให้ เป็ นเว็บไซต์ที่ทกคนเข้ าถึง
ุ
ได้ ดงตัวอย่าง ที่ขอยกมาแสดงดังต่อไปนี ้
ั
แบบที่ 1) มีสวนหัวและเมนูทางด้ านซ้ ายมือ
่
Header
Menu Content
15
แบบที่ 2) มีสวนหัวและเมนูทางด้ านบน
่
Header
Header
Menu
Menu
Content
TWCAG 2008

19.
แบบที่ 3) มีสวนหัวและเมนูทั ้งด้ านบนและด้ านข้ าง
่
Header
Menu
Menu
Content
16
แบบที่ 4) มีสวนหัว เมนูด้านบนและด้ านข้ าง มีเนื ้อหาด้ านขวามือ
่
Header
Menu
Menu
Content Content
TWCAG 2008

20.
แบบที่ 5) มีสวนหัวและมีเมนูในกล่องด้ านขวามือ
่
Header
Menu
Content
17
แบบที่ 6) มีสวนหัวและมีเมนูในกล่องด้ านซ้ ายมือ
่
Header
Menu Content
TWCAG 2008

21.
แบบที่ 7) มีสวนหัวและเนื ้อหาในกล่องข้ อความด้ านล่าง
่
Header
Content
Menu
Content
18
แบบที่ 8) มีสวนหัว เมนูด้านซ้ าย และมีสวนท้ าย
่ ่
Header
Menu
Content
TWCAG 2008
Footer

22.
แบบที่ 9) มีสวนหัว และกล่องเนื ้อหาเป็ นจุดๆ
่
Header
Content Menu
Content Content Content Content
19
แบบที่ 10) มีการแบ่งเนื ้อหาออกเป็ น 2 สดมภ์
Header
Content Content
TWCAG 2008

23.
แบบที่ 11) มีเมนูทางด้ านบนสุด แบ่งเนื ้อหาออกเป็ นส่วนๆ
Menu
Header
Content Content
20
แบบที่ 12) แบบแสดงเนื ้อหาเดี่ยวหน้ าเดียว
Content
TWCAG 2008

24.
แบบที่ 13) แสดงเนื ้อหาเป็ นอิสระให้ เนื ้อหาอยูตรงส่วนไหนก็ได้
่
Menu
Content
21
แบบที่ 14) เนื ้อหาเต็มหน้ าจอมีการแบ่งเนื ้อหาข้ อมูลออกเป็ นส่วนๆ
Header
Menu
Content Content
Content Content Content
TWCAG 2008

25.
แบบที่ 15) เนื ้อหาแบบหนังสือพิมพ์
Menu Header
Content
Content
22
แบบที่ 16) แบบอัลบัมแสดงภาพ
้
Menu
Content
Content Content Content Content Content
TWCAG 2008

26.
แบบที่ 17) แบบเน้ นเมนูชดเจนมี Header ด้ านข้ างรวมกับเนื ้อหา
ั
.
Header
Menu
Content
23
แบบที่ 18) แบบไม่มี Header มีเมนูด้านขวา
Menu
Content
TWCAG 2008

27.
แบบที่ 19) แบบไม่มี Header มีเมนูด้านซ้ าย
Menu
Content
24
แบบที่ 20) มีเนื ้อหาล้ วนๆไม่มีการตกแต่งใดๆ (Text Only)
Text text Text text Text text
Text text Text text Text text Text text Text text Text text Text text Text text
Text text Text text Text text Text text Text text Text text Text text Text text
Text text Text text Text text Text text Text text Text text Text text Text text
Text text Text text Text text Text text Text text Text text Text text Text text
Text text Text text Text text Text text Text text Text text Text text Text text
Text text Text text Text text Text text Text text Text text Text text Text text
Text text Text text Text text Text text Text text Text text Text text Text text
Text text Text text Text text Text text Text text Text text Text text Text text
Text text Text text Text text Text text Text text Text text
TWCAG 2008

28.
หลักการและวิธีการในการใช้ เทคโนโลยี CSS
จากตัวอย่างรู ปแบบของการออกแบบโครงสร้ างเว็บไซต์ (Template) ที่ได้
แสดงไปในข้ างต้ น 20 รูปแบบนัน มีเทคนิคในการจัดทําที่เหมือนกัน คือ การใช้ กล่อง
้
CSS ในการจัดวาง รวมทังส่วน Header ซึ่งเป็ นรูปภาพ ก็สามารถใช้ ฟังก์ชนของ
้ ั่
CSS ในการใส่รูปภาพ โดยการใส่ภาพด้ วย CSS จะทําให้ รูปภาพดังกล่าวไม่
จําเป็ นต้ องมีความเกี่ยวข้ องกับเนือหาที่จะสื่อความหมายออกมา ดังนันก็จะทําให้
้ ้
โปรแกรมอ่านจอภาพเพิกเฉยต่อรูปดังกล่าว ทําให้ คนที่พิการทางสายตาไม่สบสนกับ
ั
รู ปภาพที่นํามาตกแต่ง และจะเห็นความสวยงามของเว็บไซต์ได้ ซึ่งสามารถแสดง
หลักการและเทคนิคสําคัญได้ 2 หลักการดังนี ้
1. หลักในการจัด Layout
เดิมทีในการจัด Layout ของเว็บไซต์นนมักจะมีการใช้ Frame หรื อ Table
ั้ 25
ในการจัด Layout ซึงในมาตรฐาน WCAG หรื อ TWCAG 2008 นันได้ มีการกําหนด
่ ้
ไว้ วาถ้ าหากมีการใช้ Frame ก็จําเป็ นที่จะต้ องมีการรองรับเมื่อบราวเซอร์ ของผู้ใช้ งาน
่
ไม่รองรับการใช้ Frame ด้ วยหรื อการใช้ ตารางในการจัด Layout ก็จะไม่สามารถใช้
งานได้ เพราะจุดประสงค์จะไม่ตรงตามที่หลักของภาษา HTML ได้ กําหนดไว้ เกณฑ์
ตามมาตรฐาน WCAG หรื อ TWCAG 2008 กําหนดให้ Table นันสามารถใช้ ได้ กบ
้ ั
เฉพาะข้ อมูลที่เป็ นตารางข้ อมูลเท่านั ้น ไม่สามารถที่จะนําไปใช้ ในวัตถุประสงค์อื่นได้
มิเช่นนัน จะทําให้ โปรแกรมอ่านจอภาพของคนที่พิการทางด้ านสายตาไม่สามารถ
้
เข้ าไปอ่านเนือหาได้ เลย นอกจากนียงมีเพียงบางส่วนในจุดเล็กๆ เช่น เรื่ อง การ
้ ้ั
กํ า หนดหัว ข้ อ ต่ า งๆ การใช้ ข นาดของตัว อัก ษร เนื่ อ งจากการพัฒ นาเว็ บ ไซต์ ใ น
แบบเดิมๆ นันไม่ได้ คํานึงถึงความสําคัญของการใช้ Tag ให้ ตรงตามวัตถุประสงค์
้
TWCAG 2008

29.
เท่าใดนัก จึงทําให้ เว็บไซต์นนไม่มีประสิทธิภาพในการเข้ าถึงกลุ่มผู้ใช้ ที่มีอปสรรคใน
ั้ ุ
การใช้ งานเว็บไซต์และการเข้ าถึงข้ อมูล
ภาพตัวอย่ างการเปรี ยบเทียบการจัดวาง Layout
โดยใช้ ตารางในการจัด Layout และใช้ เทคโนโลยี CSS ในการจัด Layout
26
รูป ก) แสดงภาพเว็บไซต์ที่ใช้ ตารางในการจัด Layout
TWCAG 2008
รูป ข) แสดงภาพเว็บไซต์ที่ใช้ CSS ในการจัด Layout

30.
ดัง ภาพ ก และ ข ที่ ไ ด้ แ สดงข้ า งต้ น จะเห็ น ได้ ว่ า การใช้ ต ารางในการจัด
Layout หรื อการใช้ CSS ในการจัด Layout มีความแตกต่างกันน้ อยมากหรื อเรี ยกได้
ว่าไม่ต่างกันเลย เพียงแต่การจัดด้ วยตารางบุคคลบางกลุ่มจะไม่สามารถเข้ าถึงได้
แต่แบบ CSS จะสามารถเข้ าถึงบุคคลได้ ทกกลุม ดังนันสิ่งสําคัญที่ทําให้ เห็นจุดที่มี
ุ ่ ้
แตกต่างกัน คือ ขันตอนในการพัฒนา ซึงสามารถจําแนกให้ เห็นว่าการจัด Layout ใน
้ ่
รู ปแบบของตารางและการจัด Layout ในรู ปแบบของ CSS มีความแตกต่างกัน
อย่างไร
1.1 การจัด Layout ด้ วยตาราง (Table)
ส่วนบน
• Menu
• Menu content content content 27
• Menu
ด้ านข้ าง
content content content
พื ้นที่เพจ content content content
• Menu
content content content
content content content
content content content
รูปที ่ 5. แสดงการจัด Layout ด้วยตาราง (Table)
จัด Layout ด้ วยตาราง (Table) จะเป็ นการตัดรูปหรื อส่วนที่จะใช้ แสดง
ออกเป็ นส่วนๆแล้ วจะนําส่วนต่างๆ เหล่านันมาประกอบด้ วยตาราง เช่น ถ้ าทําการจัด
้
Layout ให้ ออกมาดังภาพที่แสดงไว้ ข้างต้ น จะพบว่า ส่วนบน คือ Header จะนํา
รูปภาพที่มีมาวางไว้ ในส่วนบน ส่วนด้ านข้ างก็จะนําเมนูมาวางไว้ และส่วนพื ้นที่เพจ
จะเป็ นส่วนที่ใช้ ในการแสดงเนือหา ซึ่งตามหลักการที่ถูกต้ องแล้ ว ตารางไม่ได้ มีไว้
้
TWCAG 2008
เพื่อใช้ ทําสิ่งต่างๆ เหล่านี ้ ซึ่งในการมองเห็นของคนปกติจะสามารถรับข้ อมูลได้ โดย

31.
ไม่ร้ ู สกผิดแปลกแต่อย่างใด เนื่องจากตารางนี ้สามารถซ่อนไว้ และเลือกแสดงเพียง
ึ
รู ปภาพหรื อเนื ้อหาได้ ดังนัน สําหรับบุคคลบางกลุ่มที่ต้องใช้ โปรแกรมอ่านจอภาพก็
้
จะพบอุปสรรคในการอ่านจอภาพ เพราะโปรแกรมอ่านจอภาพจะเกิดความสับสน
และไม่สามารถตีความหมายได้ ทําให้ ผ้ ใช้ ไม่สามารถรับรู้ถึงข้ อมูล
ู
1.2 การจัด Layout ด้ วยเทคโนโลยี CSS
การจัด Layout ด้ วยเทคโนโลยี CSS มีความละเอียดอ่อนกว่าการจัด
ด้ วยตาราง (Table) มาก เพราะไม่ใช่เพียงการวางข้ อมูลลงในตารางเพียงเท่านัน แต่
้
ยังเป็ นการจัดการกับข้ อมูลของแต่ละส่วนโดยละเอียดด้ วย ยกตัวอย่างเช่น การใส่
ภาพในส่วนที่เป็ น Header ก็จะเป็ นการแทรกภาพลงไปเป็ น Background ของกล่อง
CSS ในจุดนันๆ โดยจะมีลกษณะของการจัด Layout ดังนี ้
้ ั
Box1
28
Box3 Box4
รูปที ่ 6. ภาพลักษณะของการจัด Layout ด้วยเทคโนโลยี CSS
ลักษณะของการใช้ CSS ในการจัด Layout จะมีลกษณะเป็ นกล่อง
ั
TWCAG 2008
ซ้ อนกันอยู่ โดยในแต่ละกล่องนัน สามารถตกแต่งค่าต่างๆที่ใช้ ในการแสดงผลได้
้

32.
และการแบ่งส่วนการแสดงผลออกเป็ นกล่องๆ ทําให้ โปรแกรมอ่านจอภาพสามารถ
อ่านเนื ้อหาได้ แบบแบ่งส่วน ไม่เกิดปั ญหาเรื่ องการสับสนหรื อสื่อความหมายผิด เช่น
ส่วนของเมนูหรื อส่วนของเนื ้อหา ในแต่ละกล่องหากมีการใช้ รูปภาพมาเป็ นพื ้นหลัง ก็
ช่วยให้ โปรแกรมอ่านจอภาพไม่จําเป็ นต้ องอ่านรู ปภาพนัน ซึ่งช่วยให้ อ่านเนื ้อหาไม่
้
สับสน
<html>
<head><title>Main Page</title></head>
<body>
<div id= “Box0” >
<div id= “Box1” > </div>
<div id= “Box2” >
<div id= “Box3” ></div>
<div id= “Box4” ></div>
</div> 29
</div>
</body>
</html>
รูปที ่ 7. ภาพแสดง Code CSS ในการจัด Layout
จาก รู ปที่ 6. ภาพลักษณะของการจัด Layout ด้ วยเทคโนโลยี CSS
สามารถแปลออกมาเป็ นหน้ า Web Page ได้ ดงรูปที่ 7.ภาพแสดง Code CSS ใน
ั
การจัด Layout ซึ่งการใช้ รูปแบบเช่นนีใ้ นการจัดทําเว็บไซต์ที่ทุกคนเข้ าถึงได้ ทําให้
เว็บไซต์สามารถผ่านมาตรฐานได้ เนื่องจากไม่มีการใช้ ตารางที่ผิดวัตถุประสงค์
TWCAG 2008

33.
2.หลักในการใช้ รูปภาพตกแต่ ง
การใช้ รู ป ภาพในการตกแต่ง มี ค วามแตกต่า งกับ การใช้ รู ป ภาพในการสื่ อ
ความหมายของเนือหา เนื่องจากเนือหาที่ใช้ ในการตกแต่งจะไม่มีความจําเป็ นต่อ
้ ้
คนพิ ก ารทางด้ า นสายตา เพราะบุค คลกลุ่ม นี ไ้ ม่ ส ามารถมองเห็ น ได้ แต่สํ า หรั บ
ความรู้ สึกของผู้ที่มองเห็นก็ย่อมต้ องการที่จะเห็นความสวยงาม ดังนัน ส่วนนี ้ CSS
้
จึงจะเข้ ามามีบทบาทในการดํารงประโยชน์ไว้ เพื่อทังสองฝ่ ายสําหรับคนที่มองเห็น
้
และคนที่มองไม่เห็น
#header {
width: 820px;
position: relative;
height: 150px;
background: #CCC url(images/header.jpg) no-repeat center top;
30 padding: 0;
font-size: 14px;
color: #FFF;
}
ตัวอย่าง Code CSS
<div id="header"> </div>
ตัวอย่างแสดงการเรี ยกใช้ในหน้าเว็บเพจ
ตัวอย่างผลทีได้จาก Code ด้านบน
่
TWCAG 2008

34.
รูปที ่ 8. ตัวอย่างการใช้ Code รูปภาพในการตกแต่ง
การใช้ เทคโนโลยี CSS เข้ ามาช่วยในการพัฒนาเว็บไซต์ที่เข้ าถึงได้ นน ทําให้
ั้
การพัฒ นาเว็ บ ไซต์ มี ค วามง่ า ย สะดวกรวดเร็ ว มากยิ่ ง ขึ น ประกอบทัง ยัง ทํ า ให้
้ ้
ข้ อจํากัดต่างๆ ในการจัดทําเว็บไซต์ที่ทกคนสามารถเข้ าถึงได้ หมดไป ทําให้ นกพัฒนา
ุ ั
เว็ บ ไซต์ ส ามารถตกแต่ ง เว็ บ ไซต์ แ ละสามารถจัด วางรู ป แบบโครงสร้ างเว็ บ ไซต์
(Template) หรื อ Layout ได้ โดยไม่ขดกับหลักการพัฒนาเว็บไซต์ท่ีทกคนสามารถ
ั ุ
เข้ าถึงได้
ตัวอย่ างรู ปแบบโครงสร้ างเว็บไซต์ เว็บไซต์ ท่ ผ่านเกณฑ์ มาตรฐาน
ี
31
รู ปที ่ 9. http://www.zengarden.com
TWCAG 2008

35.
รูปที ่ 10. http://www.thaicss.com/
บทสรุ ป
ของการใช้ CSS เพื่อการพัฒนาเว็บไซต์ ท่ ทุกคนสามารถเข้ าถึงได้
ี
ในการจัดทําเว็บไซต์ที่ทุกคนสามารถเข้ าถึงได้ ผู้พฒนาเว็บไซต์ส่วนใหญ่
ั
32
มักจะเข้ าใจว่าเว็บไซต์เหล่านี ้จะต้ องเป็ นเว็บไซต์ที่อยู่บนพื ้นฐานของตัวอักษรเท่านัน ้
ไม่สามารถทําให้ มีความสวยงามได้ แต่อนที่จริ งแล้ วไม่ได้ เป็ นเช่นนั ้น เพราะถึงแม้ ว่า
ั
จะจัดทําเว็บไซต์ให้ เป็ นเว็บไซต์ที่ทกคนสามารถเข้ าถึงได้ โดยที่โปรแกรมในการอ่าน
ุ
จอภาพของคนตาบอดสามารถอ่านได้ ไม่ผิดเพี ้ยน ก็ไม่จําเป็ นจะต้ องสร้ างเว็บไซต์
เป็ นเพียงรู ปแบบตัวอักษรเท่านัน นักพัฒนาเว็บไซต์สามารถที่จะสร้ างเว็บไซต์ให้ มี
้
ความสวยงามน่าสนใจได้ โดยการใช้ เทคโนโลยี CSS เข้ ามาเป็ นเครื่ องมีในการทําสิ่ง
ดังกล่าว เพื่อสร้ างความน่าสนใจของเว็บไซต์ เอื ้อประโยชน์ตอผู้พิการ และยังเอื ้อให้
่
ผู้พัฒ นาเว็บ ไซต์ ส ามารถพัฒ นาเว็ บ ไซต์ ได้ ส ะดวกและคล่อ งตัว ขึน จะเห็ น ได้ ว่า
้
เทคโนโลยี CSS นันมีประโยชน์อย่างมากในการพัฒนาเว็บไซต์ให้ เป็ นเว็บไซต์ที่ทก
้ ุ
คนเข้ าถึง
การที่เทคโนโลยี CSS ทําให้ เว็บไซต์สามารถเป็ นเว็บไซต์ที่ทุกคนสามารถ
TWCAG 2008
เข้ าถึงได้ และสามารถผ่านการตรวจสอบตามมาตรฐานได้ นน เป็ นเพราะเทคโนโลยี
ั่

36.
CSS ได้ เข้ ามาช่วยกําจัดข้ อจํากัดต่างๆ ของมาตรฐานได้ เช่น หลักสําคัญที่ CSS
สามารถเข้ ามาช่วยนันก็คือ เรื่ องของการจัดออกแบบโครงสร้ างและจัดวาง รวมถึง
้
การตกแต่งเว็บไซต์ การใส่รูปภาพ เพราะข้ อจํากัดทังสองข้ อนี ้เป็ นเรื่ องสําคัญในการ
้
จัดทําเว็บไซต์ให้ เป็ นเว็บไซต์ที่ทกคนเข้ าถึงได้ เพราะการทําให้ เว็บไซต์สวยงามและมี
ุ
เนื ้อหาที่คงเดิมไว้ หากไม่ใช้ เทคโนโลยี CSS เข้ ามาช่วยก็จะไม่สามารถทําได้
33
TWCAG 2008

37. 34
TWCAG 2008