Tag: web accessibility

จาก คราวที่แล้ว ที่ผมได้บ่นไปเรื่อยเกี่ยวกับช่วงเวลาที่พัฒนาเว็บไซต์สำหรับ การประกวดเว็บไซต์ที่ทุกคนเข้าถึงได้ (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 ว่าจะเปลี่ยนได้เท่าไหร่ แค่ไหน ผู้ใช้งานแต่ละคนไม่เหมือนกันครับ ควรจะทำให้ยืดหยุ่น สามารถปรับขนาดกี่เท่าก็ได้ จะดีที่สุด
• เปลี่ยนสีตัวอักษรและพื้นหลังสำหรับคนสายตาเลือนราง ปกติเว็บทั่วไป(ตัวอักษรสีดำ พื้นหลังสีขาว) ก็ถือว่ามีสีที่ตัดกัน มองเห็นได้ชัดเจนอยู่แล้วนะครับ แต่ที่มันไม่เหมาะก็เป็นเพราะว่าพื้นหลังที่เป็นสีขาวนั้นเป็นสีสว่างครับ แสงจ้าเกินไปทำให้มองเห็นตัวอักษรสีทึบได้ไม่ชัด จึงต้องสลับกันครับ สลับเป็นทำให้พื้นหลังสีทึบและตัวอักษรสีสว่างแทน แต่ก็ไม่ควรเปลี่ยนสีตามใจชอบนะครับ ในผลงานของผมจะใช้สีพื้นหลังสีดำ ตัวอักษรสีขาว ลิ้งค์สีฟ้านะครับ ซึ่งจะเหมือนกับ เว็บไซต์สมาคมคนตาบอดแห่งประเทศไทย จะทำอะไรให้ใครสะดวกก็ถามเค้าก่อนนะครับว่าเค้าชอบแบบไหน

กระทรวง ICT ได้จัดการประกวดเว็บไซต์ืัที่ทุกคนเข้าถึงได้ (Web Accessibility) เพื่อส่งเสริมและเผยแพร่การพัฒนาเว็บไซต์ให้เป็นมาตรฐานและทุกคนเข้าถึงได้ ซึ่งผมมองว่าเป็นโครงการที่ดีมากเหมาะสำหรับบุคคลที่สนใจไม่ว่าจะเป็น Web Standard, XHTML, CSS ถ้าใครสนใจก็สามารถเข้าไปดาวน์โหลดรายละเอียดและข้อกำหนดต่าง ๆ ในการประกวดได้ที่ การประกวดเว็บไซต์ืัที่ทุกคนเข้าถึงได้ (Web Accessibility)

จากที่ผมได้ลองดาวน์โหลดรายละเอียดมาอ่าน (จริง ๆ ลงทะเบียนไปเรียบร้อยแล้วด้วย :P) เลยรู้ว่าเงื่อนไขข้อกำหนดเกี่ยวกับผลงานที่ส่งนั้นเค้าก็ไม่ได้ fix อะไรมาก โดยรวมก็คือ ทำเว็บมา 1 เว็บหรือเป็นเว็บที่มีอยู่แล้วก็ได้ ยกตัวอย่างเช่น พี่พร กะ พี่รดิสสนใจก็นำเว็บ thaicss ไปส่งได้เลยแต่มีเงื่อนไขอยู่ว่า ต้องเป็นเว็บไซต์ที่ผ่านมาตรฐาน WCAG 2.0 level A ขึ้นไป และใ้ช้ XHTML 1.0 transitional ขึ้นไปด้วย หลัก ๆ ก็จะมีเท่านี้

จากที่ได้อีเมลล์คุยกันไป-มาหลายรอบกับ Mr.ผ่านมา วันนี้ก็ได้ฤกษ์ได้เพลา ปล่อยของซะที บทความที่เกี่ยวกับ Web Accessibility (WAI, WCAG) และความเกี่ยวเนื่องกับ Search Engine (SEO) ชิ้นนี้

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

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

1.คำอธิบายภาพที่เป็นส่วนหนึ่งของเนื้อหาในเอกสารผ่าน alt แอตทริบิวท์

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