Web Accessibility

checklist เบื้องต้น กับ Web Accessibility (ตอนที่ 1)

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

เรามาเข้าสู่ checklist กันเลย

Markup

  • แยกคำสั่งแสดงผลออกจาก markup ทั้งหมด คงเหลือไว้แต่ markup เพียว ๆ เท่านั้น และ ต้องไม่ลืมว่าเราต้องใช้ markup ให้ตรงกับชนิดของ content ที่ควรจะเป็น
  • Header ทั้งหลาย สำคัญ และ เป็นประโยชน์มากต่อผู้พิการทางสายตา เพราะฉะนั้นควรลำดับความสำคัญ​ตามเนื้อหาให้ดีครับ (สมมติเหมือนกับว่าเรากำลังเขียนรายงานส่งอาจารย์ หรือ เจ้านายนั่นแหละครับ)
  • คุณต้องมั่นใจว่า หลังจากเขียน markup แล้ว เนื้อหาของหน้าเวปนั้น ๆ อ่านเข้าใจ สมบูรณ์ไม่งง และ ใช้ <title> (xhtml tag) ให้เหมาะสมกับเนื้อหาของหน้านั้น ๆ จริง ๆ
  • ใช้ lang (xhtml attribute) ช่วยบ่งบอกว่า เนื้อหาของหน้าเวปของคุณนั้นเป็นภาษาอะไร (ภาษามนุษย์นะครับ) เช่น <p><span lang="en">Hello</span> แปลว่า <q>สวัสดี</q></p>
  • พยายามทำ link สำหรับ skip to content ไว้บนสุดของลำดับการเขียน markup (ก่อนการเขียน navigation หลักของเวป) เพื่อข้ามไปหาเนื้อหาหลัก (ใช้ได้ทั้งคนปกติ และ ผู้พิการทางสายตา)
  • หัวข้อของตารางก็ควรใช้ <th> ครอบนะครับ ที่สำคัญคุณต้องวางเซลล์ที่เป็นเนื้อย่อยของหัวข้อนั้น ให้สัมพันธ์กันด้วยนะครับ (ทั้ง row และ column)
  • ต้องแน่ใจเสมอว่า tabindex (xhtml attribute) ของคุณนั้น เป็นไปตามลำดับที่ดี ไม่ใช่ข้ามไปข้ามมาไม่รู้เรื่อง

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 อ่านเข้าใจหรือไม่

accessibility หน้าที่เรา ไม่ใช่หน้าที่ใคร | ประวัติ และ การเตรียมตัว สำหรับการทำ web accessibility

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

accessibility หน้าที่เรา ไม่ใช่หน้าที่ใคร

หลายคนในตอนนี้วันนี้ ที่ทำงานอยู่ใน field นี้ (web designer และ web programmer) เชื่อว่า 95% ยังไม่รู้จัก accessibility หรือ รู้จักในทางที่ผิด ๆ หรือ ไม่ดีพอ คุณจะทำอย่างไรถ้าวันนึงเจ้าสิ่งนี้เป็นหนึ่งใน requirement ของลูกค้าของคุณ? หลาย ๆ คนคิดว่า acessibility เนี่ยต้องมานั่งทำหลังจากที่ website เสร็จแล้วเปิดใช้งานแล้วค่อยมาตามเก็บกันทีหลัง หรือ ทำก็ต่อเมื่อลูกค้ามาร้องขอ เป็น requirement เพิ่มเติมเก็บเงินกันไป

ผมไม่เข้าใจหรอกว่าไอ้ความคิดแบบนั้นมันเกิดขึ้นมาได้ยังไง หากแต่ว่า ถ้าคุณได้ลองอ่าน Guideline ของ W3 แล้ว และ พินิจพิเคราะห์ไปด้วยคณะอ่านแล้วคุณจะทราบได้ว่า accessibility มันเป็นรากเหง้ารากฐานในการสร้าง หรือ พัฒนา website อย่างแท้จริง และ มันก็เป็นสิ่งที่คุณไม่ควรทิ้งหรือข้ามไม่ทำมันไป มันต้องเริ่มตั้งแต่การคิดที่จะออกแบบ และ พัฒนา website

James Edwards, กล่าวไว้ในบทความ Why Accessibility? Because It’s Our Job! ว่า

“ถ้าเราเรียกตัวเองว่าเราเป็นมือโปร และ ก็ทำงานได้เต็มที่สุดยอดและถูกต้องที่สุดแล้วล่ะก็ เราก็ต้องให้ความซื่อสัตย์ต่อลูกค้าของเรา, ลูกค้าของลูกค้าของเรา และ ตัวเราเองด้วย เหมือนกับ เชฟที่ต้องคำนึงถึงสุขภาพของลูกค้า วิศวะกรที่ต้องคำนึงความปลอดภัยของสิ่งปลูกสร้าง และ พวกเรา ก็ต้องคำนึงถึง accessibility”

XHTML CSS เพื่อประโยชน์ทาง SEO อย่างแท้จริง

ผู้เชี่ยวชาญทางด้าน Internet Marketing คงทราบกันอยู่แล้วว่าสิ่งที่ทำให้ผลลัพธ์ทาง SEO สูง ๆ นั้น ไม่ใช่การมุ่งทำโฆษณากับ …. หรือ จ่าย pay per click มีอีกหลาย ๆ วิธีที่ไม่จำเป็นต้องไปเสียเงินเสียทองให้เปลืองไปเปล่า ๆ เช่น การจัดการหน้าเวปของคุณ  ๆ เองนั้นให้มีขนาดย่อมลง หรือ อะไรก็ตามที่แสดงในหน้าเวปนั้น ไม่หนักจนเกินไป, จัดการกับ content ของคุณให้เป็นระเบียบเรียบร้อย รวมไปถึงตัว code เองด้วย และ เนื้อหาที่ตรง ถูกต้องตามวัตถุประสงค์ หรือ concept ของเวปไซท์ พยายามแทนที่ภาพด้วย text ให้มากที่สุด โดย text เหล่านั้นไม่ใช่การ spaming กับ search engine spiders

ผมจะไม่พูดถึงสิ่งทั้งหลายทั้งมวลข้างบนนั้น หรือ basic ของ XHTML และ CSS เอาเป็นว่า เหมาเลยละกันว่าทุกคนที่กำลังอ่านเป็นกันหมดแล้ว อย่างไรก็ตามคุณสามารถหาอะไรที่เกี่ยวกับเจ้าสองตัวนี้ได้จาก Category Link ของบทความหลัก ๆ จากหน้าแรก หรือ ด้านบนของหน้าบทความ

SEO ผลพลอยได้จากการทำ Website ให้เกิด Accessibility สูง ๆ

เจ้าของ Website หลาย ๆ คนต่างก็อยากได้ผลลัพธ์ทาง SEO ที่สูง ๆ บางคนใช้วิธีการโกงต่าง ๆ นานา เพื่อให้ Website ของพวกเขานั้นได้ผลลัพธ์ทาง SEO อย่างที่คาดหวังไว้ ในทางเดียวกัน ด้วยเหตุผลเดียวกันนี้จึงทำให้เกิดอาชีพ search engine optimizer เพื่อสนองตอบความต้องการ เจ้าของ Website ต่าง ๆ ที่ต้องการผลลัพธ์ทาง SEO สูง ๆ เช่นนี้ ซึ่งหลาย ๆ ผู้ให้บริการในส่วนนี้ใช้เทคนิคที่ไม่ค่อยจะดีต่าง ๆ นานา อาทิ การ spam ตัวอย่างเช่น เอา Link ไปแปะไว้ในเวปที่มี page ranking สูง ๆ ซึ่งสร้างความเดือดร้อนให้กับคนอื่นมาก หรือ การซ่อนข้อมูล ที่ไม่เกี่ยวข้องกับเนื้อหาใน Website (User มองไม่เห็นแต่ Search Engine นั้นมองเห็น) หรือ Trick อื่น ๆ ต่าง ๆ ที่เยอะแยะมากมายอธิบายไม่หมด เหล่านี้เรียกว่า Black Hat ผมคิดว่าบางท่านที่กำลังอ่านนั้นก็คงใช้กันอยู่ด้วยความเคารพจะขอเอ่ยไว้ ก่อนว่าผมไม่ได้ต้องการโจมตี หรือ แฉใคร เพียงแต่อยากให้หันมาลองพิจารณาวิธีนี้ที่ผมจะเขียนให้ท่านอ่านกันบ้าง

การทำ SEO แบบ Black Hat นั้นเป็นอันตรายทั้งต่อ User และ Search Engine อธิบายคร่าว ๆ ง่าย ๆ สั้น ๆ ว่า การกระทำแบบนี้จะส่งผลให้ Search Engine นั้นต้องทำงานหนักมากขึ้น และ User อาจจะได้รับข้อมูลที่ไม่ถูกต้องอีกด้วย สิ่งที่ผมกำลังจะกล่าวถึงนั้นคือ White Hat SEO ซึ่งเป็นการพัฒนา Website ของคุณง่าย ๆ ด้วยการเขียน code ให้สนับสนุนกับระบบของ Search Engine เช่น แยก Style ออกจาก html code ลดการใช้ JavaScript ที่ไม่จำเป็น และ ลดความหนาแน่นของ code (ใช้เท่าที่จำเป็น) เหล่านี้ จะทำให้ง่ายต่อการ Spider ของ Search Engine ง่ายต่อการ index และ ง่ายต่อการจัดอันดับ Page Rank

Back to Top