บทความพิเศษ

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

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

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

ก่อนหน้านี้

ผมทำใจ คิดทบทวนอยู่นานว่าจะเลือกอย่างไหนดี ระหว่าง “ดันทุรังเขียนโปรแกรมเอง” และ “เปลี่ยนไปใช้ WordPress หรือ Drupal” ซึ่งสุดท้ายผมก็ยอมแพ้สังขารตัวเอง หันมาพึ่งพิงความสะดวกสบาย ที่พอจะยอมรับได้ในยามที่สำเนียกตัวเองได้ว่า อายุมันเพิ่มขึ้นเรื่อยๆ ความคึกคะนองมันย่อมลดลง แปรผกผันกันตามแบบฉบับของธรรมชาติ

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

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

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

สวัสดีครับ,

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

เขียนหน่อยนะ กูเปลี่ยนหลังบ้านใหม่ เพราะกูเองหมดปัญญาจะเขียนระบบเองแล้ว … อยากให้มึงเขียนอะไรให้กับระบบใหม่นี้หน่อย

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

ไม่มีอะไรหรอกที่พร ดันทุรังเขียนเองเพราะสถานที่แห่งนี้เหมือนเป็นห้องทดลองสำหรับพวกเราที่หนึ่งครับ ไม่ว่าจะเป็น การเข้าถึงได้ (Accessibility), Semantics Web หรืออะไรที่เกี่ยวกับภาษาโครงสร้างใหม่ๆ อย่าง HTML5,  XML, XSLT หรือแม้กระทั่ง CSS3 สุดท้ายเพื่อนผมคงเหนื่อยแล้วครับเลยกลับมาซบอก WordPress (ฮ่าๆ)

จากข่าวสองมาตรฐานเรื่องล่าสุดที่ Apple ได้ออกตัวล้อฟรี เหม็นไหม้ยาง ในการสนับสนุน HTML5 CSS3 อย่างเต็มที่ พร้อมๆ กับทำ Micro site เพื่อแสดงความสามารถของ Safari ที่สามารถทำงานกับ คุณสมบัติใหม่ๆ ได้อย่างราบรื่นนั้น ไม่ว่าจะมองไปทางไหน ผมเห็น อาร์ทตัวพ่อ ทั้งไทยและเทศ ต่างวิพากย์ วิจารณ์ ในมุม Apple เลือกปฏิบัติ เพราะบังคับให้ดูเฉพาะใน Safari แถมยังพาดประโยคจิก กัด บราวเซอร์ ล้านปลั๊กอินเจ้าหนึ่งเอาไว้ด้วย

แม้แต่ Mozilla ก็ออกมาวิพากย์ บางอันกับเขาเหมือนกัน

จริงครับ Apple เลือกพูดเฉพาะส่วนที่ตัวเอง ถูก เท่านั้น เรื่องอย่างนี้เราคุ้นกันอยู่แล้วครับ เพราะไม่ใช่แค่ Apple หรอกครับผมว่า M$ เอง ก็เลือกหลับตาข้างหนึ่งเล่นบทนี้เหมือนกันในตอนที่สดสอบ IE9 พรีวิวล่าสุด ที่ออกมาบอกว่าตัวเองรองรับมาตรฐานได้สูงกว่าใครเพื่อน

ไม่ว่ายังไงก็ช่าง ผมขออย่างหนึ่งสำหรับคนทำงาน CSS HTML ที่รัก และชอบพัฒนาตัวเองอยู่เงียบๆ "อย่าหลงประเด็น" ในขณะที่คนอื่นต่างพากัน เฮโล เกทับ บัฟแหลก ด่า Apple อยู่นั้น ขอมองระหว่าง บรรทัด ของที่ซ่อนอยู่ข้างใน มีประโยชน์มหาศาล

ก่อนหน้านี้ ผมได้เขียนเรื่อง ยุคสมัยของ CSS Layout เอาไว้ แล้วผมก็ค้างเรื่องสุดท้าย ซึ่งจะเป็นยุคสมัยของ CSS Layout ในอนาคต นั่นก็คือ การใช้ Position เพื่อทำ Layout หน้าเว็บ

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

ไม่ใช่แค่ Position เท่านั้น ที่จะมาเป็น พระเอก สำหรับการเขียน Layout ของเว็บในอนาคต Display คืออีกหนึ่ง Property ที่มาร่วมด้วยช่วยกัน ทำตัวเป็นพระรองให้เราได้ใช้งาน

หลักการพื้นฐานง่ายๆ ก่อนที่จะเข้าสู่วังวนแห่งความมึนงง คือ "ให้เลิกคิดไปตั้งแต่ตอนนี้ว่า CSS เอาไว้จัดหน้าเว็บ อย่างเดียว" CSS มีไว้เพื่อจัดการหน้าเอกสารให้กับทุก
Devices ที่ถูกวางโครงสร้างการนำเสนอด้วยภาษา HTML ในโลกของ http เพราะเมื่อขึ้นด้วย Hypertext Transfer แล้วหละก็ มันก็คือ HTML วันยังค่ำ

"CSS Advanced Layout Module" (ชื่อเก่า) ซึ่งตอนนี้ อยู่ในขั้น WD คือ Working Draft และเปลี่ยนชื่อมาเป็น "CSS Template Layout Module" เมื่อ เมษายน 2009