Web Accessibility

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

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

จาก คราวที่แล้ว ที่ผมได้บ่นไปเรื่อยเกี่ยวกับช่วงเวลาที่พัฒนาเว็บไซต์สำหรับ การประกวดเว็บไซต์ที่ทุกคนเข้าถึงได้ (Web Accessibility) ประจำปี 2553 นั้น ณ ตอนนี้เว็บไซต์ที่ผมได้พัฒนาก็ได้เสร็จสมบูรณ์พูลสุขแล้ว จึงอยากจะนำเว็บไซต์ที่ตัวเองพัฒนานั้นมาแบ่งปันให้ทุกท่านที่สนใจในเรื่อง Web Accessibility ได้รับชมกันครับ

รายละเอียดคร่าว ๆ เกี่ยวกับผลงาน

ที่มา : เป็นการนำเว็บไซต์ www.themagicblogs.com มาพัฒนาต่อให้มีความเป็น Web Accessibility มากขึ้น

เทคนิคและเทคโนโลยีที่นำมาใช้ : พัฒนาด้วย html5, css3, jquery

การตรวจสอบมาตรฐาน : ผ่านมาตรฐาน HTML5 และ WCAG 2.0 AAA

เว็บบราวเซอร์ : เว็บบราวเซอร์ตระกูล webkit (Chrome และ Safari) เพราะว่าสามารถแสดงความสามารถของ CSS3 ได้เยอะที่สุดครับ แต่แนะนำให้เปิดด้วย Safari นะครับ เพราะใน Chrome แสดงผล fontface ภาษาไทยได้ไม่ดีเท่าไหร่
การแสดงผลรูปแบบต่าง ๆ : เนื่องจากบ้าพลังเกินเหตุ ผมจึงมีการแสดงผลให้เลือกหลายแบบหน่อย ไล่ไปตั้งแต่ การแสดงผลปกติ, สำหรับสายตาเลือนราง, สำหรับมือถือ และปริ้นท์ (ในส่วนนี้กติกาไม่ได้บังคับหรือเจาะจงว่า “ควรจะมีรูปแบบอะไรบ้าง” จึงอุปมาเอาเองตามความเหมาะสมของเวลาที่จะเอื้ออำนวย

ผู้พิการทางการมองเห็น (คนตาบอดและสายตาเลือนราง) เข้าถึงข้อมูลได้ดีแค่ไหน ?

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

• tag ถูกต้องตามความหมาย (อันนี้ช่วยได้เยอะ)
• skip navigation ใช้สำหรับกระโดดข้ามไปยังเนื้อหาบริเวณต่าง ๆ ที่สำคัญ เพื่อที่โปรแกรมอ่านหน้าจอของคนตาบอดจะได้ไม่ต้องอ่านข้อมูลเดิมซ้ำ ๆ ในกรณีที่ลิ้งค์ไปหน้าอื่น (ไม่มีนี่แย่เลย)
• accesskey เป็นคีย์ลัดซึ่งวิธีการใช้งานขึ้นอยู่กับบราวเซอร์นั้น ๆ เพราะแต่ละบราวเซอร์กดไม่เหมือนกัน ใช้เฉพาะลิ้งค์ใน skip navigation เพราะได้รับคำแนะนำมาว่าไม่ต้องมีเยอะ มีเยอะไปคนพิการก็ไม่ได้ใช้ เพราะแค่จะจำคีย์ในการใช้งานโปรแกรมอ่านหน้าจอก็เยอะแล้ว ไหนจะต้องมาจำคีย์ของ accesskey อีก อีกเหตุผลนึงที่ไม่ควรมี accesskey เยอะก็คือ ถ้าเรากำหนด accesskey เป็นตัวหนังสือหรือตัวเลขบางอย่าง มันจะไปชนกับคีย์ของโปรแกรมอ่านหน้าจอ
• font size สามารถเปลี่ยนขนาด font size ได้เรื่อย ๆ ซึ่งจะมีประโยชน์สำหรับคนสายตาเลือนรางที่มองเห็นไม่ค่อยชัด รวมไปถึงผู้สูงอายุด้วย เว็บไซต์บางเว็บส่วนมากถ้าเปลี่ยนขนาดตัวอักษรได้ก็จะมีตัวอักษรให้เลือก 3 ระดับคือ ปกติ ใหญ่ ใหญ่ที่สุด(ส่วนใหญ่ถ้าเป็นเว็บไซต์ไทยจะใช้ตัวอักษร ก) ปัญหาจึงไปตกอยู่กับผู้ใช้บางคนที่เลือกระดับ “ใหญ่ที่สุด” แต่ยังมองไม่เห็น ฟังค์ชั่นการเปลี่ยนขนาดตัวอักษรที่ดีคือ ไม่ควร fix ว่าจะเปลี่ยนได้เท่าไหร่ แค่ไหน ผู้ใช้งานแต่ละคนไม่เหมือนกันครับ ควรจะทำให้ยืดหยุ่น สามารถปรับขนาดกี่เท่าก็ได้ จะดีที่สุด
• เปลี่ยนสีตัวอักษรและพื้นหลังสำหรับคนสายตาเลือนราง ปกติเว็บทั่วไป(ตัวอักษรสีดำ พื้นหลังสีขาว) ก็ถือว่ามีสีที่ตัดกัน มองเห็นได้ชัดเจนอยู่แล้วนะครับ แต่ที่มันไม่เหมาะก็เป็นเพราะว่าพื้นหลังที่เป็นสีขาวนั้นเป็นสีสว่างครับ แสงจ้าเกินไปทำให้มองเห็นตัวอักษรสีทึบได้ไม่ชัด จึงต้องสลับกันครับ สลับเป็นทำให้พื้นหลังสีทึบและตัวอักษรสีสว่างแทน แต่ก็ไม่ควรเปลี่ยนสีตามใจชอบนะครับ ในผลงานของผมจะใช้สีพื้นหลังสีดำ ตัวอักษรสีขาว ลิ้งค์สีฟ้านะครับ ซึ่งจะเหมือนกับ เว็บไซต์สมาคมคนตาบอดแห่งประเทศไทย จะทำอะไรให้ใครสะดวกก็ถามเค้าก่อนนะครับว่าเค้าชอบแบบไหน

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

บ่นนำ

หลาย ๆ คนที่คลุกคลีหรือมีความรู้เกี่ยวกับ Web Accessibility อาจจะทราบอยู่แล้วว่ากระทรวง ict มีโครงการประกวดเว็บไซต์ที่ทุกคนเข้าถึงได้ (Web Accessiblity) ซึ่งรายละเอียดเพิ่มเติมเกี่ยวกับกฎกติกาและเกณฑ์ในการประกวด สามารถตามไปอ่านได้ที่นี่ครับ http://equitable-society.com/webcontest.aspx ปีนี้ก็ปีที่ 3 แล้ว สำหรับตัวผมเองก็ส่งผลงานไปทุกปี ปีนี้ก็เช่นเคย ( เห็นว่าส่งทุกปีแบบนี้ แต่ผลงานที่ส่งไปก็ไม่ซ้ำกันเลยนะครับ) แถมปีนี้มีรางวัลพิเศษมาล่อให้เกิดกิเลส เกิดไฟและเกิดแรงบันดาลใจในการที่จะทำผลงานเพื่อส่งประกวดอีกด้วย หวังไว้เล็ก ๆ ว่าปีนี้น่าจะได้รางวัลใดรางวัลหนึ่งติดไม้ติดมือกลับมา ให้สมกับความตั้งใจที่ได้ทำลงไปบ้าง

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

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

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

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

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

ปฏิเสธไม่ได้ว่า สิ่งที่ยากที่สุดสิ่งหนึ่งในการเขียน HTML และ CSS คือ การตั้งชื่อ Class และ ID ถึงแม้ว่า ในตอนนี้จะหมดยุคของการตั้งชื่อ Class เพื่อเขียน CSS แล้วก็ตาม เราสามารถเขียน Combinator selectors หรือ Simple selectors แบบ Type Selector ผสมกับ Child Selector กันไปได้ใน CSS2.1 ถึงกระนั้น เราก็ยังจำเป็นต้องสร้าง Class เพราะว่า การตั้งชื่อ Class และ ID ไม่ได้เกี่ยวอะไรโดยตรงกับ CSS

Class และ ID เป็นสิ่งจำเป็นอย่างยิ่ง ในยุคของ Web 4.0 (อย่างช้า ก็ 5.0) เป็นต้นไป เพราะ หน้าเว็บนั้นๆ หรือเอกสารนั้นๆ จะถือตนเป็นฐานข้อมูล HTML ด้วยตัวของมันเอง กฎของเว็บยุคใหม่ สามารถอนุญาตให้เข้าถึง และ Share ข้อมูลกันได้จากหน้าเว็บโดยตรง เช่น นาย ก ไก่ ทำเว็บเกี่ยวกับ "การปลูกผักสวนครัว" นาย ข ไข่ ทำเว็บเกี่ยวกับการเลี้ยงปลา นาย ค "ทำเว็บเกี่ยวกับการ ทำอาหาร" ทั้งสามคนนี้ สามารถที่จะ เขียนชุดภาษาคอมพิวเตอร์ใดๆ เพื่อที่จะไป เก็บข้อมูลจากหน้าเว็บ ตามที่เว็บนั้นๆ "ได้ Markup เอาไว้อย่างถูกวิธี และแยก Class และ ID ของข้อมูลอย่างเป็นระเบียบ" ทั้งนี้ สามคนข้างต้น ต้องมีการตกลงเรื่องการเสนอข้อมูลทางกฎหมายต่อไป ว่าจะเอาไปแสดงยังไง อ้างอิงยังไง แต่เรื่องความปลอดภัยในการเข้าถึงข้อมูลก็เป็นอีกเรื่องหนึ่ง ซึ่งเมื่อไม่นานมานี้ "เซอร์ ทิม เบอร์นเนอส ลี" ก็ได้กล่าวเอาไว้ว่า เรื่องความเสี่ยงของการเข้าไปนำข้อมูลจากหน้าเว็บของคนอื่น แล้วเอาออกมาใช้นั้น จะทำอย่างไร หรือมีมาตรการใด เพื่อเป็นรับรองได้ว่า ไม่ได้เป็นการทำเพื่อการโกง แฮ๊ก ล่วงเกินข้อมูลของผู้อื่น

กลับมากันอีกรอบครับ ต่อจาก ตอนที่ 1 ที่ได้เคยนำเสนอไปเมื่อเดือนที่แล้ว ทีนี้เราจะมาว่ากันในส่วนที่เหลือกันต่อว่าเราต้องตระเตรียมอะไรกันอีกบ้างสำหรับ Web Accessiblity ครับ

เนื้อหาที่เป็น Dynamic

• เราไม่ควรใช้ JavaScript events ใด ๆ ใช้โหลดหน้าเวปใหม่ขึ้นมาแทนที่เมื่อคลิก หรือ (จะอธิบายอย่างไรให้เห็นภาพดี) เหมือนเปลี่ยนหน้าใหม่แต่อยู่ที่ที่เดิม เหมือนการใช้ tag iframe

รูปภาพ และ multimedia (ขออนุญาติทับศัพท์ครับ)

• ต้องแน่ใจว่าคุณใส่ attribute alt ให้กับรูปภาพครบถ้วนแล้ว ถ้าเป็นไปได้พยายามใส่ข้อความอธิบายแบบกระชับได้ใจความ ลงไปด้วยนะครับ
• ถ้ามี link ที่รูปภาพ ต้องใส่ alt เพื่ออธิบาย link นั้น ๆ นะครับ
• ว่าด้วยเรื่อง คำอธิบายที่กระชับ อาทิ มีรูป ๆ หนึ่งที่ผมถ่ายคู่กับพร ควรจะอธิบายให้เข้าใจได้ว่า รดิส และ พร อันทะ เดินท่องไปตามถนน ม.ขอนแก่น ไม่ใช่แบบนี้ รูปถ่ายของอีปลา และ อีพร
• ในกรณีของไฟล์ vdo หรือ ไฟล์เสียง เป็นไปได้ควรทำบรรยายเป็นภาษานั้น ๆ (ตามกลุ่มเป้าหมายก็พอนะครับ หรือ ใครจะฟิตทำให้รองรับทุกประเทศก็ได้ ผมช่วยเชียร์) อาทิ เช่น vdo สอน photoshop ที่เป็นภาษาอังกฤษ จะเอามาสอนคนไทยก็เอามาพากย์ เป็นภาษาไทยเสีย หรือ ใส่ subtitle บรรยายไปด้วย
• อีกวิธีหนึ่งคือ ทำไฟล์บรรยายเกี่ยวกับไฟล์ vdo นั้น ๆ แยกออกมาต่างหากสำหรับผู้ที่ไม่สามารถมองเห็น เพื่อที่จะให้เขาได้เข้าใจไฟล์ vdo นั้น ๆ อย่างแจ่มแจ้ง (อาจจะไม่จำเป็นต้องทำเป็นไฟล์เสียงก็ได้ ทำเป็นเอกสาร .html อธิบายโดยละเอียดก็ได้ แยกกัน)
• ถ้าไฟล์ vdo นั้นไม่สามารถ autoplay ได้คุณต้องแน่ใจด้วยว่า มีปุ่มกด vdo panel (play, pause, stop …) ที่สามารถเข้าถึงได้ ใช้งานได้จริง ๆ
• การใช้ background image แทนตัวหนังสือควรใช้อย่างเหมาะสมนะครับ เอาเท่าที่จำเป็น
• ตรวจสอบให้แน่ใจว่า text ที่คุณใช้สามารถแสดงผลได้ดีในทุก ๆ browser ต้องตรวจสอบให้แน่ใจว่า font ตระกูลที่ใช้นั้นแสดงผลได้ดี มีในทุก ๆ OS (เรื่องลิขสิทธิ์ต้องช่วยตัวเองครับ ฮ่า ๆ)
• อย่าใช้ CAPCHA ถ้าไม่จำเป็นจริง ๆ ครับ ถ้าจะต้องใช้ควรจะเป็น audio CAPCHA ด้วยนะครับ