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) ของคุณนั้น เป็นไปตามลำดับที่ดี ไม่ใช่ข้ามไปข้ามมาไม่รู้เรื่อง

เนื้อหา และ หน้าตาการแสดงผล

  • ต้องแน่ใจว่า หน้าเวปของคุณเมื่อรูปภาพขาดหายไป หรือ โหลดมาไม่ได้ เนื้อหาของคุณก็ยังอ่านเข้าใจได้อยู่
  • ต้องแน่ใจได้ว่าเมื่อ user กดขยายตัวหนังสือเป็นสองเท่าจาก original size แล้ว ยังอ่านรู้เรื่อง layout ไม่เละเทะจนใช้งานไม่ได้ (บางคนอาจทำส่วนสำหรับ accessibility แยกไว้อีกส่วนเลยก็ได้)
  • ต้องแน่ใจว่า ทุกสิ่งทุกอย่างบนหน้าจอที่คุณออกแบบนั้น ใช้งานได้ด้วย keyboard เพียว ๆ ทั้งหมด เมื่อเวลาที่ไม่มี mouse
  • ถ้าเป็นไปได้ให้เขียน header หรือ link ที่เข้าใจง่าย ๆ เพื่อให้เข้าใจถึงเนื้อหาที่มันจะ link ไปสู่ หรือ ที่มันเป็นหัวข้ออยู่
  • สำหรับผู้ที่ตาบอดสี หรือ มีปัญหาทางสายตา หรือ ใช้จอที่เป็นรุ่นโบราณ คุณต้องแน่ใจได้ว่าหน้าเวปของคุณนั้น ตัวหนังสือ พื้นหลัง และ อื่น ๆ สามารถมองเห็นได้ชัดเจน ไม่กลืนกินกันจนดูไม่รู้เรื่อง
  • อย่าใช้ effect หรือ รูปภาพ เนื้อหาที่มัน กระพริบ หรือ เด้งไปเด้งมา เกิน 3 ครั้งต่อวินาที เพราะจะสร้างความรำคาญให้กับผู้ใช้ (ความเป็นจริง คงเอาไปใช้หากินยากหน่อยล่ะ)
  • อย่าใช้คำสั่งซ่อน cursor หรือ ตัวชี้ทางอื่น ๆ เพราะ user ที่ใช้ keyboard สำหรับเลื่อนดูเนื้อหา หรือ ใช้ keyboard แทน mouse นั้นจะได้ทราบว่าตอนนี้เค้าอยู่ ณ ​ที่จุดใดของหน้าเวปนั้น ๆ
  • คุณไม่จำเป็นต้องบอก user ว่า ข้อความต่อไปเป็นอะไรที่สำคัญมาก หรือ ข้อความที่ highlight อยู่นั้นเป็นสิ่งที่ user ต้องจดต้องจำ (ลงไปในเนื้อหา) เพราะมีทางอื่นที่จะสื่อให้ user เข้าใจได้ไม่จำเป็นต้องเขียนอธิบายลงไปในเนื้อหา

มีต่อตอนที่สองอีกครับ ต้องขออภัยด้วยนะครับช่วงนี้ ภาระหน้าที่ค่อนข้างแน่นขนัด จะพยายาม แอบมาเขียนต่อ ที่ค้าง ๆ ให้เสร็จครับผม ขอบคุณครับ พบกันรอบต่อไปครับ

รักกันชอบกันอย่าลืมแชร์นะครัช:
0

Back to Top

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

  1. dogdoy

    เจ๋งเลยครับ
    แต่สงสัยมานานแล้วครับ ตรง

    <p><span lang="en">Hello</span> แปลว่า <q>สวัสดี</q></p>

    ต้องเขียนบอกกันทุกจุดที่มีภาษาอื่นเลยใช่ไหมเอ่ย

    ใช้พวก CMS ทำเว็บเนี่ยลำบากเลยสิ T-T

    Reply

  2. PookLuk.com

    ดีๆ สู้ๆ กับ Web Accessibility

    Reply

  3. boy

    ผมจะขอแสดงความคิดเห็นเพิ่มเติมบางส่วน ซึ่งเป็นประสบการณ์ที่ได้ทำงานร่วมกับคนพิการนะคับ
    – ใช้ header เท่าที่จำเป็นจริง ๆ ในบางกรณีสำหรับข้อความที่เป็นหัวข้อ ก็ไม่จำเป็นต้องใช้ tag header ก็ได้ ตัวอย่างเช่น
    <h2>หลักสูตรปริญญาตรี</h2>
    <h3>ชื่อหลักสูตร</h3>
    <p>ชื่อย่อ</p>
    <p>ชื่อเต็ม</p>
    <h3>รายวิชา</h3>
    <h4>รายวิชาหลัก</h4>
    <p>รายละเอียด</p>
    <h4>รายวิชาเฉพาะ</h4>
    <p>รายละเอียด</p>
    การใช้ header ลักษณณะนี้ถึงแม้ว่าจะใช้สำหรับหัวข้อที่แยกย่อยลงไปก็จริง แต่ว่าเป็นการใช้ header ที่เยอะเกินไป เพราะโดยปกติพฤติกรรมการใช้โปรแกรม screen reader นั้น เมื่อคนตาบอดได้ลองฟังข้อมูลทั้งเว็บแล้วว่ามีอะไรบ้าง อาจจะมี link, image, list และ header โดยใช้ short cut key ของ screen reader เช่น เมื่อกดปุ่ม h screen reader ก็จะข้ามไปยัง header แต่ละ header ที่มีอยู่ในเว็บ จุดประสงค์หลัก ๆ ของ header ก็เพื่อที่จะอ่านข้อมูลที่อยู่ภายใต้ header นั้น ๆ หรือไม่ก็ต้องการไปยังข้อมูลที่ใกล้เคียงกับ header นั้น ๆ เพื่อความรวดเร็วในการเข้าถึงข้อมูลต่าง ๆ ปกติ screen reader จะอ่านเป็น tag ทีละ tag เมื่ออ่าน tag นั้นจบก็ต้องกด tab หรือ เครื่องหมายลูกศรชี้ลง เพื่อไปอ่าน tag ต่อไป ซึ่งจะเสียเวลามาก ถ้าต้องการทราบข้อมูลทั้งหมด คนตาบอดจึงนิยมใช้ short cut key : h เนื่องจากเว็บที่มีโครงสร้างเป็น web accessibility นั้น header จะไม่กระจุกตัวอยู่ที่ใดที่หนึ่งของเว็บอยู่แล้ว แต่จะกระจายไปยังเนื้อหาต่าง ๆ ภายในเว็บทำให้สะดวกรวดเร็วในการเข้าถึงข้อมูล

    ปล. เอาไว้ผมจะมา comment เกี่ยวกับ checklist อันอื่นต่อนะคับ วันนี้ขอค้างเอาไว้แค่นี้ก่อนละกันคับ ตอนนี้ ….. ง่วงมาก !!!

    Reply

  4. dogdoy

    อย่างกรณีที่คุณ boy บอกนี่ เราควรจะใช้อะไรแทนครับ พวก <ul><li>,<dl><dt><dd> อะไรแบบนี้แทนหรือเปล่าครับ

    Reply

  5. Radiz Sutthisoontorn
    radiz

    dl ครับ พี่ด๋อย

    Reply

  6. boy

    จากพฤติกรรมการใช้งานของคนตาบอดจริง ๆ เลยนะคับ เค้าจะไม่ค่อยชอบเกี่ยวกับ <span lang=\"en\"></span> ซักเท่าไหร่ เพราะว่าเดี๋ยวนี้ screen rader สามารถ detect ได้แล้วว่า ตัวอักษรไหนเป็นภาษาอะไร เช่นถ้าเ็ป็นภาษาอังกฤษ โปรแกรม JAWS หรือ NVDA ก็จะอ่าน ถ้าเป็นภาษาไทย โปรแกรม TATIP ก็จะอ่าน เหตุผลที่เป็นเช่นนี้ก็เพราะว่า จะมีปัญหาเกี่ยวกับ <span lang=\"th\"></span> คือเวลาโปรแกรม TATIP มันอ่านมันจะพูดคำว่า \"ไทย\" ก่อน ซึ่งถ้ามี <span lang=\"th\"></span> เยอะ ๆ ในหน้าเพจ คนตาบอดเค้าจะรำคาญมาก เดี๋ยวก็ ไทย ไทย ไทย อีกอย่างคือ ทำให้คนตาบอดเค้าสับสนด้วยว่า ที่มันอ่านว่า \"ไทย\" เนี่ย มันบอกให้เรารู้ว่าข้อความเป็นภาษาไทย หรือมันอ่านคำว่า \"ไทย\" อยู่ ยกตัวอย่างเช่น
    <span lang=\"th\">ภาษาไทยวันละคำ</span>
    screen reader มันจะอ่านว่า \"ไทย ภาษาไทยวันละคำ\" ซึ่งอาจจะทำให้คนตาบอดสับสนได้

    สรุปคือ <span lang=\"\"></span> อาจจะไม่จำเป็นต้องใช้ก็ได้ เพื่อความแน่ใจ เอาไว้ผมจะสอบถามกับพี่ที่ผมรู้จักที่สายตาเลือนรางอีกครั้งละกันนะคับ ได้เรื่องเช่นไรจะมาบอกให้ทราบ
    ปล. ในที่นี้คำว่า \"คนตาบอด\" เป็นคำที่ผมยกตัวอย่างขึ้นมาเฉย ๆ นะคับ จริง ๆ ก็จะรวมไปถึงผู้ที่สายตาเลือนราง ที่ใช้โปรแกรม screen reader ด้วย รวมกันเรียกว่าผู้พิการทางสายตา แต่ผมเห็นว่ามันยาว เลยขอเรียกว่า คนตาบอดละกันนะคับ

    Reply

  7. Radiz Sutthisoontorn
    radiz

    ดีครับบอย เป็น case ที่น่าสนใจ รอติดตามผล :)

    Reply

  8. พร อันทะ

    ขอฝากเพิ่มเติม หนึ่งเรื่องครับ อย่าลืม Checklist สุขภาพของท่านด้วยนะครับ ผมเพิ่งออกจากโรงพยาบาลมา เอิ้ก แล้วจะอยากเข้าไปทำไมวะเนี่ย

    Reply

  9. dogdoy

    ขอบคุณครับปลา

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

    สู้กันต่อไปเพื่อเว็บสำหรับทุกๆคน :D

    Reply

  10. ิboy

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

    Reply

  11. พร อันทะ

    ผมว่า มาตรฐาน กับคนพิการ มันคนละเรื่องมากกว่า มาตรฐานหรือ Web Standards คือ สิ่งที่เราๆ ท่านๆ คนทำเว็บควรยึดถือที่จะทำเพื่อเดินรอยตามให้เป็นมาตรฐานเดียวกัน แต่เรื่องของ Accessibility หรือการเข้าถึง สำหรับเว็บที่ไม่ฝักไฝ่ผลประโยชน์เขายังสนใจที่จะทำให้ได้หลายเอ แต่สำหรับเว็บที่มุ่งธุรกิจทำกำไร ระหว่างผู้พิการกับ Google Bot เราก็รู้ว่าทางธุรกิจเขาจะเลือกอะไร เป็นผม ผมก็ต้องเลือก Robots

    แต่ สำหรับเรื่องกระบวนการทำให้ได้มาตรฐานนั้น ทั้งสองฝ่าย ควรที่จะทำออกมาให้มันได้เหมือนๆ กัน อย่างกรณีที่เเขีราใยช้ตูดเขียน XHTML เหมือนกัน ลองใช้ DIV ทั้งหน้าแล้วเอาไปตรวจ ให้ตายเถอะจอร์ช มันก็ยังเขียว

    ง่ายๆ แค่แยกออกมาให้ได้ว่า อันไหนจะเอากล่อง อันไหนจะเอาเงิน เพราะสุดท้ายเถียงกันให้ตายแต่ยังใส้แห้งก็ไม่รู้จะมาเถียงกันทำห่านอะไร

    แต่ที่สำคัญ ทำมันให้ถูกหลักการพื้นฐานก่อนหละครับพี่น้อง โดยเฉพาะ XHTML

    Reply

  12. Radiz Sutthisoontorn
    radiz

    +1 ให้ พร อันทะ

    Reply

  13. เอ้

    อืมมม..ขอบคุณมากครับ อ่านแล้วได้ความรู้เปิดกระโหลกในหลายๆ ส่วนที่ผมมองข้ามไปเสมอ เพราะมัวแต่ไปสนใจเรื่องการวาง Strategy + logic ของ DesignContent Elements บนหน้า Interface เป็นหลัก (ขอโทษทีภาษาอิงลิชเยอะไปหน่อย นึกคำไทยไม่ออกแฮะ) เนื่องจากว่างานที่ผมทำนั้นเกี่ยวกับเรื่องคำมั่นสัญญาที่ให้ไว้กับลูกค้าว่า \"เวปสวยแล้วต้องขายดีด้วย\" … :<

    >

    Reply

  14. dome

    +1 ท่านอันทะ ควรเอาเรื่อง XHTML ก่อนเป็นอันดับแรกครับ

    Reply

  15. cpe10

    ติดตามผลงานครับ

    Reply

  16. โดม

    +1 พรอัณทะ

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top

Social media & sharing icons powered by UltimatelySocial