ทำความเข้าใจการใช้งาน Alternative text ให้มากขึ้น

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

ลองนึกภาพถ้าหากเราใช้งานเว็บในช่วงที่อินเตอร์เน็ตมีปัญหาอยู่ ซึ่งบราวเซอร์ไม่สามารถแสดงภาพออกมาประกอบการอธิบายบทความที่คุณอ่านอยู่ สิ่งหนึ่งที่สามารถช่วยคุณได้เวลานั้นคือ Alternative text ทีสามารถอธิบายเพื่อให้คุณเข้าใจ ความหมายระหว่างภาพและเนื้อหาได้สมบูรณ์ขึ้น และอย่าลืมว่า ไม่ได้มีแต่เราเท่านั้นที่จะใช้งานเว็บไซต์ ยังมีคนอีกกลุ่มหนึ่งที่อาจจะมีปัญหาทางประสาทสัมผัส ที่จะต้องใช้เครื่องมือหรือซอร์ฟแวร์ให้การเข้าถึงเว็บไซต์ ดังนั้นเราจึงไม่ควรที่จะมองข้าม Attribute เหล่านี้เพื่อให้เว็บไซต์ของเราทุกคนสามารถเข้าถึงได้

ทำไมต้องใช้ Alternative text

  1. เพื่อให้กลุ่มผู้มีปัญหาทางประสาทสัมผัสสามารถใช้งานเว็บเราผ่านซอร์ฟแวร์ Screen Reader
  2. เมื่อตอนที่อินเตอร์เน็ตมีปัญหาความเร็วต่ำภาพไม่สามารถแสดงได้ ให้แสดง alt แทน
  3. หากใช้บราวเซอร์ที่แสดงผลแต่ตัวหนังสือเช่นบนโทรศัพท์มือถือบางรุ่น เราจะสามารถเข้าใจภาพได้

ลักษณะ Alternative text ที่ดีควรมีดังนี้

  1. มีเนื้อหาที่ตรงกับภาพ
  2. มีเนื้อหาที่ให้ข้อมูลเชื่อมโยงกับกราฟฟิกได้
  3. เขียนให้สั้นที่สุดเท่าที่จะทำได้ แต่ยังสามารถให้ความหมายได้ตรงกับภาพอย่างครบถ้วน
  4. มีความเหมาะสมกับเนื้อหา ภาพเดียวกันแต่มีสถานการณ์ต่างกันก็ควรจะมี "alt" ที่ต่างกัน
  5. ไม่ควรมี "alt" ซ้ำกันในหน้าเดียวกัน

การใช้งาน "alt" หากภาพอยู่ในลิ้งค์หรือปุ่ม ที่ไม่มีเนื้อหา

หากลิ้งค์หรือเป็นปุ่มแต่ไม่มีเนื้อหาใดๆอยู่เลยนอกจากภาพ "alt" จะต้องใส่เนื้อหาเพื่อเชื่อมโยงและบอกวัตุประสงค์ของลิ้งค์

ตัวอย่างนี้ คือสมมุติว่าต้องการให้เลือกสีจากลิสนี้ แต่ปุ่มทั้งหมดเป็นภาพ และไม่มีข้อความอยู่เลย ดังนั้น "alt" ควรเป็นตัวเชื่อมโยงวัตุถประสงค์ของลิ้งค์นี้

  • Red
  • Green
  • Blue

การใช้งาน "alt" ในลักษณะงานนำเสนอ เช่น Charts, Diagrams, Graphs, Maps, เป็นต้น

เราสามารถอธิบายความหมายของ Chart ผ่าน "alt" ได้เลยหรือถ้ามีการลิ้งในเนื้อหาเราสามารถอธิบายความหมายเพียงสั้นๆ โดยอาศัยการเชื่อมโยงความหมายของภาพโดยผ่านลิ้งแทน

รูปแบบวงจรชีวิตผีเสื้อ

จากผีเสื้อที่โตเต็มวัย จะหาที่วางไข่ หลังจากไข่ฟักจะกลายเป็นหนอน แล้วจะกลายเป็นดักแด้ จากดักแด้จะกลายเป็นผีเสื้อ

หรือหากรูปภาพอยู่ภายใต้ลิ้งค์เราสามารถเขียน "alt" อธิบายสั้นๆ โดยใช้ลิ้งค์เป็นส่วนเชื่อมโยงกับเนื้อหาแทน

รูปแบบวงจรชีวิตผีเสื้อ

ภาพตัวอย่างวงจรชีวิตผีเสื้อ

วงจรชีวิตผีเสื้อ

จากผีเสื้อที่โตเต็มวัย จะหาที่วางไข่ หลังจากไข่ฟักจะกลายเป็นหนอน แล้วจะกลายเป็นดักแด้ จากดักแด้จะกลายเป็นผีเสื้อ

ตัวอย่างนี้ อาจจะไม่เหมาะที่จะเขียน รายละเอียดทั้งหมดลงใน "alt" เนื่องจากมีลักษณะเป็นชุดข้อมูลควร ที่จะใช้การแสดงข้อมูลเป็นลักษณะตาราง แล้วให้เนื้อหาของ "alt" มีความสอดคล้องกับตาราง

ภาพตัวอย่าง สถิติการใช้งาน บราวเซอร์ไตรมาศสุดท้ายประจำปี พ.ศ.2553

สถิติการใช้งาน บราวเซอร์ไตรมาศสุดท้ายประจำปี พ.ศ.2553
2553 Internet Explorer Firefox Chrome Safari Opera
ธันวาคม 27.5 % 43.5% 22.4% 3.8% 2.2%
พฤศจิกายน 28.6 % 44.0% 20.5% 4.0% 2.3%
ตุลาคม 29.7 % 44.1% 19.2% 3.9% 2.2%

การใช้งาน ข้อความที่เป็นรูปภาพ

หากภาพมีเนื้อหาเป็นข้อความเราควรจะใส่ "alt" เพื่ออธิบายข้อความเหล่านั้นไปเลย

เขตปลอดเกรียน!

ตัวอย่างนี้ถึงจะมคำที่ซ้ำกัน แต่การสื่อความหมายมีความหมายเดียวสามารถเขียน "alt" ที่เป็นความหมายของภาพไปได้เลย

เขตปลอดเกรียน!

การใช้งานภาพที่ไม่ได้สื่อความหมายใดๆ เลย

หากภาพที่นำมาใช้แค่เพื่อตกแต่งเฉยๆไม่ได้สื่อความหมายใดๆ "alt" สามารถเว้นว่างไว้ได้เลย แต่จะต้องแน่ใจก่อนนะว่ามันไม่สำคัญจริงๆ

การใช้งานภาพที่เพิ่มรูปแบบหรือสาระสำคัญของเนื้อหาของหน้าเว็บ

ภาพประกอบแต่ "alt" กลับไม่มีส่วนใดส่วนหนึ่งเกี่ยวกับเนื้อหาอาจจะทำให้เกิดการสือสารที่ผิดพลาด ดังนั้น "alt" ควรจะอธิบายความเกียวข้องกับเนื้อหาหรือการเพิ่มลิ้งค์ เพื่อที่จะบอกถึงความเกี่ยวเนื่องกันระหว่างภาพและเนื้อหา ก็เป็นอีกวิธีนึงที่ทำได้

ภาพบรรยกาศถนนคนเดินเชียงใหม่ที่ เนืองแน่นไปด้วยผู้คนจากทั่วทุกสารทิศ

บรรยากาศถนนคนเดินเชียงใหม่

ถนนคนเดินเชียงใหม่ ก็ยังเนืองแน่นไปด้วยผู้คนจากทั่วทุกสารทิศเหมือนเดิม ถนนคนเดินกลายเป็นเสน่ห์ของเชียงใหม่ไปโดยปริยาย

ภาพบรรยกาศถนนคนเดินเชียงใหม่

บรรยากาศถนนคนเดินเชียงใหม่

ถนนคนเดินเชียงใหม่ ก็ยังเนืองแน่นไปด้วยผู้คนจากทั่วทุกสารทิศเลยเหมือนเดิม ถนนคนเดินกลายเป็นเสน่ห์ของเชียงใหม่ไปโดยปริยาย

การใช้งาน Icon

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

ระวัง!
คุณยังไม่ได้เซฟงาน


ระวัง!
คุณยังไม่ได้เซฟงาน

การใช้งาน Alternative text ที่ผมยกตัวอย่างอาจจะยังเป็นการใช้งานพื้นฐาน ถ้านำมาใช้อย่างถูกต้องจะช่วยให้เรา หรือผู้มีปัญหาในงานใช้งานเว็บไซต์สามารถใช้งานได้อย่างถูกต้อง เรื่องเทคนิคและวิธีการยังมีอีกหลายแบบซึ่งผมอยากจะฝากเอาไว้ให้ชาว ThaiCSS ทุกคนให้ความสำคัญและลองใช้งาน "alt" เพื่อการเข้าถึงเว็บไซต์ได้ดียิ่งขึ้นนะครับ

สวัสดีครับ

Back to Top

8 Responses to ทำความเข้าใจการใช้งาน Alternative text ให้มากขึ้น

  1. aon

    ถ้าอันไหนไม่จำเป็นเราไม่ต้องเขียน alt เลยไม่ได้หรอครับ ทำไมต้องเขียนแล้วปล่อยมันว่างด้วยอ่ะครับ alt=””

    Reply

    • Sitthiphorn Anthawonksa
      Sitthiphorn Anthawonksa

      ถ้าไม่เขียนเลย มันก็ผิดกฎ ภาษา XHTML สิครับ

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

      ไม่ใส่ ก็ขี่มอไซค์ได้ … แต่ xx

      Reply

  2. Piyapong Thanawang
    Piyapong Thanawang

    การปล่อยให้ alt เป็นค่าว่างหมายถึงการที่ภาพนั้นไม่มีเนื้อหาใน alt แต่ไม่ใช่ไม่มี alt เลย

    ซึ่งการไม่มีเนื้อหาอยู่ในนั้นต้องพิจารณาด้วยว่า ภาพนั้นไม่มีความหมายหรือความสำคัญจริงๆ ดังตัวอย่างข้างบนนะครับ

    แต่ถ้าจะเว้นว่างอีกกรณีนึงคือภาพจะต้องอยู่ในลักษณะที่มีจุดเชื่อมโยงระหว่างภาพกับเนื้อหาเช่น มีลิ้งค์จากภาพไปที่เนื้อหา หรือต้องอยู่ในพารากราฟเดียวกับเนื้อหาและและมีคำอธิบายเนื้อหาที่ชัดเจน เช่นอย่างตัวอย่างของการใช้ไอค่อนครับ

    ขอบคุณครับ

    Reply

  3. james

    ไม่ควรมี “alt” ซ้ำกันในหน้าเดียวกัน

    หากมีซ้ำในหน้าเดียวกันจะมีผลอะไรหรือป่าวครับ

    อย่างเช่น icon ระวัง สมมุติเรามี Icon ตัวนี้ 3 ตัวในหน้าเพจ
    เราสามารถใช้ alt “ระวัง” ทั้ง3ตัวหรือป่าว หรือควรเปลี่ยนครับ

    Reply

    • Piyapong Thanawang
      Piyapong Thanawang

      ถามว่าการเขียน alt ซ้ำนั้นมีผลอะไรหรือเปล่ามันอาจไม่ได้มีผลกับเราโดยตรงอยู่แล้ว แต่มันอาจจะมีผลกับความเข้าใจและความต่อเนื่องของเนื้อหา

      หากว่าเราไม่สามารถใช้ alt อธิบายได้ว่ารูปภาพนั้นเกี่ยวข้องกับเนื้อหาของเว็บไซต์เราได้อย่างไร เช่นรูปเดียวกันแต่เนื้อหาที่เกี่ยวข้องกับภาพนั้นต่างกัน alt ก้อต้องต่างกันเพื่อความสอดคล้องกับเนื้อหา

      หรืออย่างที่คุณ James ยกตัวอย่างมาคือถ้ามี Icon 3 อันล่ะ กรณีนี้เราคงต้องพิจารณาเนื้อก่อนว่าไอค่อนแต่ละอันนั้นเกี่ยวข้องกับเนื้อหาอย่างไร เพื่อที่จะเขียน alt ให้เหมาะสมกับแต่ละ Icon หรือเราสามารถเขียน alt=”” ไว้แล้วใช้การเน้นเนื้อหาด้วย strong เพื่อแสดงความสำคัญของเนื้อหา แบบตัวอย่างการใช้ Icon แบบที่สองก็เป็นอีกวิธีนึงที่สามารถทำได้ครับ

      ขอบคุณครับ

      Reply

  4. james

    ขอบคุณมากครับ

    Reply

  5. Pingback: Text « pancharach99

Leave a Reply

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

Connect with Facebook

Back to Top