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

มาทำเนื้อหาเว็บและโซเชียลมีเดียให้คนตาบอดเข้าถึงได้กันเถอะ

เมื่อวาน (19 พฤษภาคม 2565) ได้มีโอกาสไปร่วมแชร์ความเห็นและรับฟังเกี่ยวกับเรื่องของปัญหาการเข้าถึงเทคโนโลยีของคนตาบอดที่สมาคมคนตาบอดแห่งประเทศไทยมา เพราะเป็นวันแห่งการรณรงค์ส่งเสริมการเข้าถึงเทคโนโลยีดิจิทัลและความเท่าเทียมสำหรับผู้พิการทั่วโลก หรือ Global Accessibility Awareness Day (GAAD) ก็มีโอกาสได้พูดถึงการเขียนบล็อกที่เป็นมิตรกับผู้พิการทางการมองเห็น (ไม่ใช่แค่ตาบอดนะครับ แต่รวมถึงผู้ที่มองเห็นได้เลือนรางด้วย) จริงๆ อยากเขียนบล็อกนี้ตั้งแต่เมื่อวานแล้ว แต่เดินทางในกรุงเทพฯ เหนื่อย สลบ เลยขอมาเขียนในวันนี้แทน เพื่อขอร่วมรณรงค์ให้เหล่าผู้ผลิตเนื้อหา หรือ Content creator ทั้งหลาย มาทำเว็บไซต์และโซเชียลมีเดียให้ผู้พิการทางสายตาเข้าถึงได้สะดวกกันเถอะ

อย่าไปคิดเอาเองว่าผู้พิการทางสายตา หรือคนตาบอดใช้เทคโนโลยีไม่ได้

เอาจริงๆ นะครับ ผู้พิการทางสายตา รวมถึงคนตาบอด ก็ทำอะไรต่อมิอะไรได้เหมือนๆ กับเราๆ ท่านๆ นั่นแหละ เขาแค่มองไม่เห็น ทำให้อาจจะต้องอำนวยความสะดวกเขาเพิ่มบ้างก็เท่านั้นเอง พวกเขาสามารถใช้สมาร์ทโฟน แท็บเล็ตหรือคอมพิวเตอร์ได้ เพราะระบบปฏิบัติการสมัยนี้เขามีฟีเจอร์ที่เรียกว่า Accessibility หรือ ฟีเจอร์การเข้าถึง ที่ช่วยอำนวยความสะดวกให้แก่ผู้ที่มีความบกพร่องทางร่างกาย เช่น หากยังพอเห็นได้อยู่บ้าง ก็อาจจะปรับขนาดตัวอักษรให้ใหญ่ขึ้น หรือ ปรับ Contrast ของภาพให้ต่ำลง เป็นต้น หากมองไม่เห็นเลย ก็มีฟีเจอร์ (หรือบางทีก็ต้องใช้แอป) อย่าง On-screen reader หรือ Voiceover เข้ามาช่วยได้

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

ผมเคยได้พบกับคุณสิทธิโชค วรอิทธินันท์ หรือชื่อเล่นคือ คุณล้ง ที่หลายๆ คนเรียกว่าหมอคอม เขาเป็นคนตาบอดที่เป็นนักรีวิวอุปกรณ์ไอที เขาได้สาธิตวิธีการใช้สมาร์ทโฟนของคนตาบอดให้ดู ซึ่งก็เป็นการใช้ฟีเจอร์ Voiceover ของระบบปฏิบัติการ iOS นั่นทำให้เขาสามารถใช้งานได้แทบทุกแอป แม้จะมองไม่เห็น (หน้าจอสมาร์ทโฟนก็ไม่ต้องเปิดด้วย เพราะไม่มีประโยชน์) ตัวระบบปฏิบัติการจะอ่านให้เขาฟังเองว่า ตอนนี้เขาแตะอะไรอยู่ หรือมีข้อความว่าอะไรอยู่

ภาพหน้าจอรูปบนโพสต์ของเฟซบุ๊กที่เป็นภาพของผู้ชายหน้าตาหล่อเหลาใส่ชุดสูทสีดำ มีข้อความคำว่า Tomorrow (วันพรุ่งนี้) สีขาว อยู่ตรงด้านล่างของภาพ ในภาพนี้มีการใช้ปลั๊กอินของโปรแกรมเบราว์เซอร์เพื่อแสดงรายละเอียดของรูป ทั้งยูอาร์แอลของภาพ ขนาดของรูปภาพ และ alt text ซึ่งถูกเขียนโดยเอไอของเฟซบุ๊กว่า May be an image of 1 person and text that says "13 Tomorrow" หรือแปลเป็นไทยคือ อาจจะเป็นภาพของคนหนึ่งพร้อมข้อความเขียนว่า 13 พรุ่งนี้

ผู้พัฒนาแพลตฟอร์มต่างๆ ก็มีความใส่ใจในเรื่อง Accessibility หรือ การเข้าถึงของผู้มีความบกพร่องทางร่างกายมากขึ้น เทคโนโลยีที่พัฒนาไปมาก ก็ช่วยอำนวยความสะดวกให้กับผู้มีความบกพร่องทางสายตามากขึ้นเช่นกัน โดยเฉพาะเรื่องของปัญญาประดิษฐ์ หรือ AI เช่น เผื่อใครไม่ทราบ รูปภาพใดๆ ที่เราโพสต์ไปบน Facebook ทางแพลตฟอร์มเขาจะมีการสแกนและวิเคราะห์รูปภาพ เพื่อเดาว่ามันเป็นรูปเกี่ยวกับอะไร และนำมาเขียนเป็นสิ่งที่เรียกว่า Alt text (หมายถึง คำอธิบายรูปที่แทรกอยู่ในโค้ด HTML ของเว็บไซต์)

Alt text มีประโยชน์มาก แต่มักถูกสอนว่าไม่ต้องใส่ ไม่จำเป็น คนส่วนใหญ่เมิน

อย่าง Lynx จะแสดงให้อ่านแทนรูป ซึ่งไม่จำเป็นต้องใส่ก็ได้ ถ้าขี้เกียจ พอในยุคหลังๆ คนที่เรียน SEO (Search Engine Optimization) ก็จะได้คำอธิบายว่าใส่ Alt text เถอะ เพราะว่า Search engine มันจะใช้เป็นข้อมูลในการค้นหาด้วย ซึ่งขนาดมันมีประโยชน์เรื่อง SEO ขนาดนี้ คนก็ยังไม่ค่อยจะใส่กันเลย หรือถ้าจะใส่ ก็เพื่อประโยชน์ด้าน SEO เท่านั้น เพราะดันไม่มีใครสอนเลยว่า Alt text นี่สำคัญมาก เพราะมันคือสิ่งที่จะช่วยให้ผู้บกพร่องทางการมองเห็น สามารถรู้ได้ว่ารูปนี้คืออะไร

ภาพหน้าจอเว็บไซต์เฟซบุ๊กในขั้นตอนการใส่ Alt text ให้กับรูปภาพ

จริงๆ การใส่ Alt text ให้กับรูป ขั้นตอนไม่ยากเลยครับ สำหรับโปรแกรมทำเว็บไซต์ต่างๆ เช่น WordPress มันก็มีฟีเจอร์ให้ใส่ง่ายๆ อยู่แล้ว แค่คลิกที่รูป แล้วก็ไปใส่ใน Image settings แม้แต่พวกโซเชียลมีเดียต่างๆ ไม่ว่าจะเป็น Facebook, Twitter หรือ Instagram ต่างก็มีตัวเลือกให้เราใส่ Alt text ได้ทั้งนั้น

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

ภาพสำหรับเป็นตัวอย่างการใส่คำอธิบายรูป หรือ Alt text ซึ่งเป็นภาพระยะใกล้ของหน้าจอแสดงระดับแบตเตอรี่ของพัดลมพกพาสีเขียว หน้าจอแสดงตัวเลข 98% และมีสัญลักษณ์สายฟ้าสีเขียวแสดงสถานะว่ากำลังชาร์จแบตเตอรี่อยู่

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

แบบที่ 1: ผู้หญิงผมยาว กำลังมองโน้ตบุ๊กอยู่

แบบที่ 2: ผู้หญิงผมยาว สีทอง กำลังนั่งเท้าคางด้วยแขนข้างซ้าย กำลังมองโน้ตบุ๊กด้วยสีหน้าเคร่งเครียด มือข้างขวากำลังแตะที่ทัชแพดของโน้ตบุ๊ก ห้องมีลักษณะค่อนข้างมืด บนโต๊ะที่วางโน้ตบุ๊ก มีโคมไฟสีขาว แก้วกาแฟและจานรองแก้วสีขาว แว่นตาสีดำว่งอยู่ด้านซ้ายของตัวผู้หญิง และมีกระถางต้นไม้วางอยู่ด้านหลังของโน้ตบุ๊ก

ภาพสำหรับใบ้ประกอบการอธิบายวิธีการใส่ Alt text ทั้งแบบสั้นกระชับ กับแบบอธิบายโดยละเอียด

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

ภาพหน้าจอจากเว็บไซต์ข่าว ที่เมื่อเช็กข้อมูลแล้ว ไม่พบว่ามีการใส่ Alt text แต่อย่างใด

ภาพข่าวนี้เป็นภาพของนายจุรินทร์ ลักษณวิศิษฏ์ รัฐมนตรีว่าการกระทรวงพาณิชย์ของประเทศไทย กำลังพูดคุยกับนางแคทเธอรีน ไท ผู้แทนการค้าสหรัฐ โดยทั้งสองคนสวมหน้ากากอนามัย นั่งบนเก้าอี้สีขาว มีโต๊ะสีขาววางอยู่ตรงกลางระหว่างสองคน โดยมีป้าย United States อยู่ทางซ้ายและ Thailand อยู่ทางขวา เพื่อบอกว่าฝั่งไหนเป็นตัวแทนจากประเทศใด มีล่ามผู้หญิงสองคนสวมหน้ากากอนามัย คอยช่วยแปลภาษา ล่ามฝั่งสหรัฐอเมริกาสวมเสื้อสูทสีฟ้า ล่ามฝั่งไทยสวมเสื้อคลุมสีดำ

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

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

Alt text นี้ไม่ได้มีแค่การทำเว็บนะครับ การออกแบบ User Interface ของโปรแกรมหรือแอปก็มีอะไรคล้ายๆ กันครับ เพียงแต่ว่าพวกโปรแกรมหรือแอปเนี่ย มันไม่ใช่ต้องอธิบายแค่รูปภาพเท่านั้น แต่พวกองค์ประกอบ (Element) ต่างๆ เช่น ปุ่ม ก็จะต้องมีคำอธิบายเอาไว้ด้วย เช่น ในการเขียนโปรแกรมเพื่อพัฒนาแอปสำหรับระบบปฏิบัติการแอนดรอยด์ ก็จะมี Attribute ชื่อ contentDescription เพื่อใช้อธิบายองค์ประกอบของ User Interface ครับ (สามารถไปอ่านทำความเข้าใจเพิ่มเติมได้ที่บทความ Make apps more accessible)

<!-- Use string resources for easier localization. -->
<!-- The en-US value for the following string is "Inspect". -->
<ImageView
    ...
    android:contentDescription="@string/inspect" />

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

อย่าทิ้งใครไว้เบื้องหลัง

ผมเข้าใจนะว่าจำนวนของผู้พิการในประเทศไทยไม่มีเยอะ จากรายงานข้อมูลสถานการณ์ด้านคนพิการในประเทศไทย ของกระทรวงพัฒนาสังคมและความมั่นคงของมนุษย์ กรมส่งเสริมและพัฒนาคุณภาพชีวิตคนพิการ ฉบับล่าสุด ณ ตอนที่เขียนบล็อกนี้ วันที่ 31 มีนาคม 2565 บอกว่ามีผู้พิการทางการเห็นอยู่ 186,701 คน และส่วนใหญ่เป็นผู้สูงอายุ 60 ปีขึ้นไป มันเลยอาจจะไม่ใช่แรงจูงใจที่มากพอที่จะทำให้เหล่า Content creator ทั้งหลายฮึดทำเนื้อหาของตัวเองให้คนตาบอดสามารถเข้าถึงได้สะดวก แต่ผมก็อยากจะขอชวนให้ Content creator ทั้งหลาย สละเวลาเพิ่มอีกซักนิด ใส่ Alt text ใส่คำอธิบายรูปภาพ เพื่อให้แน่ใจว่าเนื้อหาของคุณสามารถเข้าถึงได้สะดวกเถอะ อย่าทิ้งใครไว้เบื้องหลังเลย


ภาพประกอบปกบล็อก Braille photo created by freepik – www.freepik.com

Leave a Reply

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

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

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้เพื่อการวิเคราะห์

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

บันทึกการตั้งค่า