CSS3 HTML5 XHTML and Web Accessibility Design : ThaiCSS

ช่วงนี้ผมวุ่นวาย ๆ กับงานจนเวลาที่มีว่างเล็กน้อยจะเอาไปใช้ในการบำบัดรักษา พักผ่อนสมองตน และ เปิดห้องเรียนสอน xhtml css coder กับ แมกซ์ (@max_mayer) เล็ก ๆ ที่บ้านเป็นส่วนใหญ่ ต้องขออภัยที่ "หายหัว" ไปนานโขพอสมควร สำหรับหน้าที่เขียนบทความ ณ สถานที่แห่งนี้ เลยต้องให้พร รับบทหนักอยู่คนเดียวเป็นส่วนใหญ่ช่วงนี้ เพราะพร พลังเยอะ ฮ่า ๆ

โอเคครับ วกกลับมาหาสิ่งที่จะพูดกันวันนี้ สั้น ๆ ห้วน ๆ ไม่ยาวมากเท่าที่สมองจะรวบรัดกระชับมาให้ได้ ต้องอารัมภบทก่อนว่าที่ผ่าน ๆ มาผมได้มีโอกาสคลุกคลีกับระบบงานที่ต้องทำงาน คร่ำคิด วิเคราะห์ สิ่งของต่าง ๆ ที่ส่งผลต่อผู้ใช้งานปลายทางส่วนใหญ่ (ในขอบข่ายของผลิตภัณฑ์เว็บไซต์นะครับ) ต้องขอขอบพระคุณพี่เอ้อ (@errorlloyd) และ พี่เอ้(@DjFunkyDog) ที่ให้ไอเดีย และ สอนสั่งทั้งทางตรง และ ทางอ้อม ทำให้ผมสนใจที่จะต้องหาความรู้ สังเกต และ ทดลอง อะไรบางอย่างที่เกี่ยวกับ User Experience (แปลเป็นไทยอย่างไรดี ความพึงพอใจของผู้ใช้งาน ดีไหม?) ครับ อย่าเพิ่งบ่นนะว่า ทำไมไอ้คุณปลา มันไม่เขียนอะไรที่มันเป็น HTML / CSS เลยวะ? เพราะผมคิดว่า ผมบ้าครับ :)

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

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

จากรูปที่เห็นอยู่ด้านบนนั้น คนส่วนใหญ่ที่เขียน HTML มานักต่อนักมักจะมองในรูปแบบการแสดงผลเพียงด้านเดียว คือ ให้แสดงผลสำหรับผู้บริโภคผ่านทาง Screen เท่านั้น โดยการวาง HTML จะนำ Element ที่เป็น <img/> ขึ้นก่อนเสมอ แต่ตามหลักการการเข้าถึงแล้ว เนื้อหาใดๆ ที่โผล่ขึ้นมานั้น ควร หรือ จะต้องมี heading level ลำดับ ใด ใด นำหน้าก่อนเสมอ เพื่อบ่งบอกว่า เนื้อหานั้น เป็นเนื้อหาที่เกี่ยวข้องกับอะไร

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

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

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

[accesskey]

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