Accessibility หน้าทีเราไม่ใช่หน้าที่ใคร | วิธีง่าย ๆ ในการทำ Web Accessibility

จากครั้งที่แล้วที่ผมแนะนำ tools ต่าง ๆ ในการเตรียมตัวทำ Web Accessibility ไปผมอยากจะแนะนำ extension อีกตัวหนึ่งของ FireFox ที่เอาไว้สำหรับการตรวจสอบ การอ่านหน้า web page ของ screen reader เป็น extension ที่ดีอีกตัวหนึ่งที่อยากจะแนะนำให้ลองใช้ เจ้าหนูตัวนี้ชื่อว่า “Fangs” เชื่อว่าหลาย ๆ ท่านคงเคยได้ใช้ หรือ ถ้ายังไม่เคยได้ยินก็ลองดูได้เลยครับ วิธีใช้ก็ง่ายนิดเดียวเปิด Web Page ที่คุณต้องการจะทดสอบ และ คลิกขวาลงบน Web Page นั้น ๆ แล้วเลือก View Fangs บางทีอาจจะมี bugs ที่ Fangs ไม่แสดงผล ให้ลองปิด แล้วทำขั้นตอนที่ผมบอกไปข้างต้นใหม่อีกครั้ง Fangs ก็จะแสดงผลออกมาเอง

โอเคครับเข้าเรื่องกันดีกว่า เรามาต่อกันจากตอนที่แล้วที่ผมเขียนไว้เมื่อ เดือน หรือ สองเดือนที่แล้วกัน กับบทความนี้ผมจะเรียบเรียงรวบขั้นตอนเบื้องต้นของการทำ Web Accessibility ง่าย ๆ มาแลกเปลี่ยนกัน (ไม่ขอสอนนะครับ วิธีผมบางอย่างมันอาจจะไม่ดีก็ได้อยากให้เพื่อน ๆ ที่มีความรู้เรื่องนี้มาช่วยกันแลกเปลี่ยนความคิดเห็นกัน) การทำ Web Accessibility เบื้องต้นนั้น ที่ผมคิดว่าเราน่าจะทำได้ ง่าย ๆ เลย น่าจะเป็นเช่นนี้ครับ

1. เขียน xhtml และ css ให้ถูกต้อง
2. ทำเวปโดยไม่ต้องใช้ frame
3. เชค Accessibility ของ Web Page
4. ใส่คำอธิบายภาพให้กับรูปภาพที่เราใช้ alt=”” และ title=“”
5. JavaScript ที่ใช้อยู่นั้น สร้างความรำคาญให้กับผู้ใช้หรือไม่
6. ขนาดของตัวหนังสือเหมาะสมแล้วหรือไม่
7. เขียน code ให้มีความหมาย
8. เมื่อปลด css ออกแล้ว content ของคุณปะติดปะต่อกันรู้เรื่อง หรือไม่
9. ลองใช้ fangs ตรวจดูว่า screen reader อ่านเข้าใจหรือไม่

เขียน xhtml และ css ให้ถูกต้อง

เราควรตรวจสอบทุกครั้งว่า code ที่เราเขียนนั้นถูกต้องหรือไม่ การตรวจสอบทำได้ง่าย ๆ ด้วย Web Developers Extensions ของ FireFox เราสามารถใช้ Tools ของ extension ตัวนี้เชื่อมต่อ validator ของ w3c และทำการ validate ให้เราได้เลย โดยไม่ต้องเสียเวลาพิมพ์เองให้ยุ่งยาก โดยวิธีการเรียกใช้สามารถทำได้ดังนี้ ให้คุณไปที่ extension bar ของ Web Developers Extension ใน FireFox เลือกแถบ Tools จะมีให้คุณเลือกเลยว่าคุณต้องการทำการ validate อะไร

อนึ่งพึงเข้าใจไว้ว่าการผ่านการ validate (ได้ไฟเขียวแล้ว) ไม่ได้เป็นการหมายถึงว่า Web Page นั้น ๆ ผ่าน Accessibility ด้วยแต่สิ่งหนึ่งคือคุณสบายใจได้ในระดับหนึ่งว่าข้อมูลของคุณจะถูกเอาไปพิจารณาในการจัด index ของ search engine แน่นอน (ง่ายต่อการเข้าถึงข้อมูลของ Search Engine)

ทำเวปโดยไม่ต้องมี frame

การใช้ frame (และ iframe) ไม่เป็นผลดีต่อเอกสาร xhtml ไม่เป็นผลในเรื่อง Accessibility ซึ่ง ณ ปัจจุบันผมยังคงเห็นว่าหลาย ๆ คนยังคงใช้อยู่ ไม่เป็นผลดีอย่างไร การใช้ frame นั้นหมายถึงการอ้างอิงถึงเอกสารอื่น ทำให้เกิดการสับสนในการอ่านข้อมูลของผู้พิการทางสายตา (เพราะ screen reader ไม่สามารถประเมินทางตรรกะได้มากเท่าสมองของมนุษย์) ทำให้เกิดความล่าช้าในการแสดงผล  เพราะต้องไปดึงข้อมูลจากเอกสารอื่น ๆ เข้ามาอีกซึ่งนั่นไม่ใช่ผลดีที่ควรจะทำ เพราะฉะนั้นถ้าลดละเลิกได้ก็ทำเสียเถิดครับ

เชค Accessibility ของ Web Page

เมื่อคุณ coding ควรหมั่นตรวจสอบความเป็น accessibility ¬ของ code ที่คุณเขียนเป็นระยะ ๆ จะได้ไม่ต้องกลับมานั่งไล่แก้ในตอนท้าย คุณสามารถตรวจสอบความเป็น accessibility ของ code ของคุณได้โดย click ที่แถบ tools ของ Web Developer Extension แล้วเลือก Validate Section 508 หรือ Validate WAI ก็สุดแท้แต่ความพอใจว่าจะเลือกมาตรฐานใดครับ

ในปัจจุบันทาง W3 ยังไม่ได้ทำตัว Validator สำหรับการตรวจสอบเพราะฉะนั้นจะมี Web Service อื่น ๆ ที่ทำ tools สำหรับตรวจสอบตาม Guideline ที่ W3กำหนดขึ้นมาเพื่อช่วยอำนวยความสะดวกในการตรวจสอบ หรืิอ ทำให้เรารู้ปัญหาเบิื้องต้น และ สามารถแก้ไขปัญหาใน code ได้ถูกต้อง บางอย่างก็ต้องไปอ่าน Guideline ของ W3 เพิ่มเติมครับเพราะบางที tools เหล่านี้ก็ยังมึน ๆ อยู่ แต่ก็ถือว่าช่วยได้มากเลยครับ ตัวอย่าง tools ที่ตัวผมเองใช้บ่อย ๆ TAM หรือ Cynthia Says ที่ติดมาให้กับ Web Developer Extension ของ FireFox ก็ช่วยได้เหมือนกันครับ

ใส่คำอธิบายภาพให้กับรูปภาพที่เราใช้ alt=”” และ title=“”

สิ่งหนึ่งที่เราควรทำคือ ใส่คำอธิบายให้กับรูปภาพที่เราใช้ เพราะจะทำให้ง่ายต่อการเก็บ index ข้อมูลของเจ้า Search Engine อีกอย่างคือ Screen Reader จะสามารถบ่งบอกให้คนพิการทางสายตาสามารถรู้ได้ว่ารูปภาพนั้นอธิบายถึงอะไร หรือ ข้อมูลที่อยู่ ณ ตำแหน่งที่อ่านไปถึงนั้นคืออะไร หรือใช้แทน “คำศัพท์ หรือ คำพูดอะไร” ในเอกสาร XHTML และ ในกรณีที่รูปภาพไม่สามารถโหลดได้ คำอธิบายนั้นก็ปรากฏให้เห็นเป็นที่เข้าใจได้ เพื่อการเข้าถึงข้อมูลที่มีประสิทธิภาพครับ

JavaScript ที่ใช้อยู่นั้น สร้างความรำคาญให้กับผู้ใช้หรือไม่

บางครั้งการใช้ JavaScript ในการตกแต่ง website ของเราอาจจะสร้างความรำคาญให้กับผู้เข้าชมได้ เช่น popup windows หรือ อะไรก็ตามที่เอามาตกแต่งเพื่อความสวยงาม เช่น การเอามาใช้แทน flash ไม่ว่าจะเป็นการ fade in / fade out หรืออะไรก็ตาม ต้องให้แน่ใจว่าเมื่อไม่มี JavaScript เหล่านั้นแล้ว content ทุกอย่างใน website ของคุณจะยังคงอยู่อย่างครบถ้วน ไม่ขาดหายไปพร้อมกับ JavaScript เหล่านั้น

ขนาดของตัวหนังสือเหมาะสมแล้วหรือไม่

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

เขียน code ให้มีความหมาย

อย่างที่กล่าวไว้ตั้งแต่ต้นครับ การเขียน code ที่ validate ผ่านนั้นไม่ได้หมายถึง เวปของคุณนั้นเป็น Accessibility แล้ว การใช้ tag ให้เหมาะสมกับ content ของคุณ เช่น หนึ่งย่อหน้า ก็ต้องอยู่ใน <p></p> หรือ หัวข้อที่สำคัญที่สุดก็ต้องเป็น h1 หัวข้ออื่น ๆ ก็ลดหลั่นกันไปตามความเหมาะสม การใช้ tag ที่เหมาะสมกับชนิดของข้อมูล จะทำให้ screen reader บอกได้ง่ายและถูกต้อง รวมไปถึงการ index ข้อมูลของ Search Engine ด้วยมันจะสามารถเข้าใจได้รวดเร็ว และ สามารถเอาข้อมูลของคุณไปเก็บได้อย่างถูกที่ถูกทาง และ จัดข้อมูลแสดงให้กับ user ได้ถูกต้องตรงกับสิ่งที่ผู้ใช้ต้องการสืบค้น

เมื่อปลด css ออกแล้ว content ของคุณปะติดปะต่อกันรู้เรื่อง หรือไม่

อ่ะเพื่อความอุ่นใจ หลังจากที่คุณทำงานของคุณสำเร็จแล้วลองปลด CSS ออกจากหน้า website คุณดูสักครั้งน่า ว่าข้อมูลมันเรียงลำดับไปตามความสำคัญ หรือ ตามที่คุณต้องการจะเสนอหรือเปล่า วิธีง่าย ๆ ด้วย Web Developer Extension กดคีย์ลัด ctrl+shift+s (ใน Mac กด command+shift+s) เท่านั้นคุณก็จะได้เห็นหน้าตา webpage ของคุณที่ปราศจาก CSS แล้วครับ

ลองใช้ fangs ตรวจดูว่า screen reader อ่านเข้าใจหรือไม่

หลังจากที่ลองปลด CSS ออกดูแล้วก็อย่าลิืมลองเอาเจ้าหนู Fangs จำลองการอ่านของ screen reader ดูว่ามันอ่านถูก อ่านรู้เรื่องหรือไม่ ถ้าผ่านได้หมดก็สบายใจ ถ้าไม่ได้ก็แก้กันไปครับ อิอิ

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

สวัสดี