accessibility

Tag: accessibility

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

ทำความเข้าใจการใช้งาน Alternative text ให้มากขึ้น เพื่อเป็นช่องทางให้ผู้ใช้ทุกคนเข้าถึงข้อมูลในเว็บเราได้อย่างถูกต้อง

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

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

HTML Accesskey CSS Image Replacement and Outline

outline

จะมีสักกี่เว็บไซท์ในเมืองไทย ที่เราสามารถใช้ Keyboard กับ Attribute accessky ของ HTML ในหน้าเว็บนั้นได้ หรือว่าเราต้องการใช้ปุ่ม [TAB] ของ คีย์บอร์ด กดเดินหน้า ถอยหลังเพื่อที่จะไปยังเนื้อหาส่วนต่างๆ ในหน้าเว็บอย่างสบายอารมณ์

เพราส่วนใหญ่เวลาเรากด [TAB] ไปแล้วก็ยังไม่รู้ว่า จุดที่เรากำลัง :FOCUS นั้นมันอยู่หน้าไหน เพราะว่า ค่า outline มันไม่แสดงผลออกมา

วันนี้ผมขอพูดถึงเรื่อง Access Key ของ HTML และ Outline ของ CSS

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 ของบทความหลัก ๆ จากหน้าแรก หรือ ด้านบนของหน้าบทความ

Back to Top