Radiz Sutthisoontorn

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

เรามาเข้าสู่ checklist กันเลย

Markup

• แยกคำสั่งแสดงผลออกจาก markup ทั้งหมด คงเหลือไว้แต่ markup เพียว ๆ เท่านั้น และ ต้องไม่ลืมว่าเราต้องใช้ markup ให้ตรงกับชนิดของ content ที่ควรจะเป็น
• Header ทั้งหลาย สำคัญ และ เป็นประโยชน์มากต่อผู้พิการทางสายตา เพราะฉะนั้นควรลำดับความสำคัญ​ตามเนื้อหาให้ดีครับ (สมมติเหมือนกับว่าเรากำลังเขียนรายงานส่งอาจารย์ หรือ เจ้านายนั่นแหละครับ)
• คุณต้องมั่นใจว่า หลังจากเขียน markup แล้ว เนื้อหาของหน้าเวปนั้น ๆ อ่านเข้าใจ สมบูรณ์ไม่งง และ ใช้ <title> (xhtml tag) ให้เหมาะสมกับเนื้อหาของหน้านั้น ๆ จริง ๆ
• ใช้ lang (xhtml attribute) ช่วยบ่งบอกว่า เนื้อหาของหน้าเวปของคุณนั้นเป็นภาษาอะไร (ภาษามนุษย์นะครับ) เช่น <p><span lang="en">Hello</span> แปลว่า <q>สวัสดี</q></p>
• พยายามทำ link สำหรับ skip to content ไว้บนสุดของลำดับการเขียน markup (ก่อนการเขียน navigation หลักของเวป) เพื่อข้ามไปหาเนื้อหาหลัก (ใช้ได้ทั้งคนปกติ และ ผู้พิการทางสายตา)
• หัวข้อของตารางก็ควรใช้ <th> ครอบนะครับ ที่สำคัญคุณต้องวางเซลล์ที่เป็นเนื้อย่อยของหัวข้อนั้น ให้สัมพันธ์กันด้วยนะครับ (ทั้ง row และ column)
• ต้องแน่ใจเสมอว่า tabindex (xhtml attribute) ของคุณนั้น เป็นไปตามลำดับที่ดี ไม่ใช่ข้ามไปข้ามมาไม่รู้เรื่อง

เกริ่นเรื่อง

กาลปางก่อน เนิ่นนานมานั้น เหล่านักพัฒนาทั้งหลาย ที่พัฒนา Web site นั้นมีแนวทางในการแก้ไขปัญหาสำหรับผู้ใช้ที่เข้ามาเยี่ยมชม Website ของพวกเขาด้วย โทรศัพท์มือถือ, palm, pda และ/หรือ เหล่า Smartphone ต่าง ๆ คร่าว ๆ หลัก ๆ ดังนี้

1. 1. คือไม่สนใจอะไรทั้งสิ้น ปล่อยให้ Browser ของอุปกรณ์เหล่านั้นแสดงผล โครงสร้างหน้าตา Website ของพวกเขาไปตามยถากรรมที่มันถูกพัฒนามา
2. 2. ดัดแปลงหน้าตาให้ใกล้เคียงกับการออกแบบที่ ออกแบบมาสำหรับ desktop screen ทั้งหลาย ด้วย CSS (handheld)
3. 3. ทำแยกออกมาเป็น version ของอุปกรณ์เหล่านี้ไปเลย desktop screen ก็อีกแบบ สำหรับมือถือนั้นก็เป็นอีกแบบแยกออกจากกัน

ครั้งนี้ผมจะเขียนแนะนำเกี่ยวกับ markup ที่ w3 นั้นพัฒนามาเพื่อสนับสนุนอุปกรณ์เหล่านี้โดยเฉพาะ และ มี feature อะไรบ้างที่ w3 นั้นเตรียมให้เรานำมาใช้กัน

จากครั้งก่อน ผมแนะนำสิ่งที่เรียกว่า Google-Apple Cloud ไปแล้ว เมื่อ Google มองการไกลถึงขนาดที่จะสร้าง Network ของ Super Computer (หรือ ที่เรียกว่า Cloud) วางไว้ทุกสารทิศทั่วโลกใบนี้ เพื่อเก็บข้อมูลทุก ๆ อย่าง เพื่อวาง Application ที่เราสามารถเข้าใช้ได้ทุกเมื่อ ซึ่งในอนาคตเราอาจจะไม่จำเป็นต้องมี Standalone PC อยู่ที่บ้านเพื่อทำงาน เราไม่จำเป็นต้องลง OS และ Software ต่าง ๆ มากมาย เพียงแต่เข้าไปใน Google ก็จะมีสิ่งต่าง ๆ ที่เราจำเป็นต้องใช้เตรียมพร้อมรออยู่ คุณผู้อ่านที่เป็นแฟน ๆ ของ Google App น่าจะทราบดีว่ามันมีเพิ่มมาทุกวัน ทุกวัน ให้เราได้เลือก ได้ลองใช้ ซึ่งผมคิดว่ามันเป็นของฟรีที่ดีเยี่ยมหลาย ๆ อย่าง

ทีนี้เรามาดูกันว่า ทำไม Google ส่งผู้บริหารบางคน ไปอยู่ใน Board ของ Apple ทีนี้เรามามองดูกันว่า ทำไม Google ถึงอยากให้ Apple สร้าง Super Computer ให้ เพราะ Apple ขึ้นชื่อว่าเป็น บริษัทที่เข้าใจหลักกายภาพของ user มากที่สุด และ สามารถผลิตนวัตกรรมที่หักล้างสิ่งที่ใคร ๆ ต่างคิดว่า คงไม่มีใครจะทำมันได้ มาแล้วนักต่อนัก ผมเพิ่งถึงบางอ้อเมื่อไม่กี่สัปดาห์มานี้ (หลายท่านอ่านจะ อ้อ ก่อนผมมาหลายเดือนแล้วก็ได้) ว่าทำไมถึงมี iPhone และ ทำไมถึงมี MacBook Air ออกมา ผมคิดว่ามันเป็นอนาคต อนาคตอะไร อนาคตที่กำลังจะใกล้เข้ามา (อ้างอิงจาก บทความของ : Nicholas Carr) ถ้าสิ่งต่าง ๆ ที่ว่ามานี้เกิดขึ้นจริง นั่นหมายความว่า MacBook Air และ iPhone นั้นอาจจะทำมาเพื่อรอ Project นี้ก็ได้เป็นแน่แท้ เราไม่ต้องการอุปกรณ์อะไรมากมายอีก เพียงแค่อุปกรณ์สำหรับเชื่อมต่อเข้าไปยัง Account ที่เรามีอยู่ของ Google ไม่ต้องมีรูปร่างใหญ่มาก พกพาสะดวกสบาย ที่เก็บข้อมูลก็ไม่จำเป็นต้องมีมากนัก เพราะว่าเรามีพื้นที่อยู่ในอากาศอยู่แล้ว (ต่อไปก็จะเกิดธุรกิจ ค้าขายพื้นที่บนอากาศ อากาศจะมีราคาแล้ว) เพียงแต่จ่ายค่าบริการรายเดือนเท่านั้นเอง ต่อไปพวก Computer ที่เป็น Standalone และ มีอุปกรณ์ และ Software ที่เพียบพร้อมนั้นอาจจะใช้เฉพาะกับงานเฉพาะทางเพียงเท่านั้น อาทิ การตัดต่อหนัง, การ render 3D และ งานหนัก ๆ ใหญ่ ๆ อื่น ๆ ที่ต้องกินทรัพยากรณ์ และ visual memory ที่ต้องเตรียมพร้อมหลาย ๆ อย่าง

ความเดิมจากตอนที่แล้ว จากตัวอย่างเมื่อคราวที่แล้ว ขออนุญาติตอบคำถามของคุณ​ mabonic ก่อนนะครับ ว่าใน IE6 ถ้าไม่สามารถกำหนด attribute selector ได้จะทำอย่างไร คำตอบมีสอง Case ครับ Case1: คือ เขียน class selector เพื่อกำหนดคุณสมบัติให้มันครับ ส่วน Case2: ก็คือ ใช้ JavaScript ที่ชื่อ ie7-js สำหรับ reset ค่า default ต่าง ๆ ในการ render และ ทำให้มันรู้จักคำสั่งของ CSS level ใหม่ ๆ ที่มันไม่รู้จัก (อย่าลืมนะครับว่า IE6 มันแก่แล้ว) JavaScript ตัวนี้ให้กำเนิดโดย Dean Edwards แต่ข้อจำกัดหลายอย่างก็ยังมีอยู่ ถ้าผู้ใดสนใจเป็นหนึ่งในทีมพัฒนาก็สามารถเข้าร่วมได้นะครับ

มาต่อกันที่เรื่องของฟอร์มกันครับ จากคราวที่แล้วผมนำเสนอตัวอย่างการเขียนฟอร์มเล็ก ๆ ง่าย ๆ ไปหนึ่งแบบทีนี้เราจะมาดูกันครับว่าถ้าเรามีฟอร์มสำหรับเก็บข้อมูลที่สัมพันธ์กันหลาย ๆ ส่วน เราจะเขียนออกมากันอย่างไร ในบทความนี้ tag ที่เพิ่มเข้ามาก็จะมีดังนี้ครับ <fieldset></fieldset> และ <legend></legend> จากครั้งที่แล้วได้เกริ่นไป แต่ยังไม่ได้มีบทบาท รอบนี้ล่ะ มันจะเป็นตัวชูโรง fieldset จะเป็น tag ที่ใช้สำหรับแยกฟอร์ม ออกเป็นส่วน ๆ ตามข้อมูลที่เรานั้นต้องการจะเก็บ และ legend จะเป็นการตั้งชื่อบ่งบอกชื่อให้กับ fieldset นั้น ๆ ว่าเป็น set ของอะไร

60 ปีที่แล้ว Digital Computer ทำให้ข้อมูลของเราอ่านได้ 20 ปีที่แล้ว Internet ทำให้ข้อมูลเหล่านั้นง่ายต่อการเข้าถึง 10 ปีที่แล้ว search engine crawler ตัวแรกถือกำเนิดขึ้นจาก database เพียงตัวเดียว Google ทำให้หลาย ๆ องค์ประกอบ ทฤษฎีในทัศนคติเป็นจริง Google ในทุก ๆ วันนี้กลายเป็นอีกหนึ่งวัฒนธรรม ไม่ว่าใครต่อใครก็ต้องใช้ Google ฝังลึกหยั่งรากลงไปมากกว่าที่เราจะทันรู้ตัว

ข้อมูลมากมายมหาศาลเหล่านั้น ที่ Google เก็บมาไว้ใน database ของตน เมื่อ 10 ปีที่แล้วหลาย ๆ คนคงอาจจะมองว่ามันเป็นเรื่องธรรมดาไร้สาระ แต่ในทุกวันนี้ผมคิดว่าแม้กระทั่ง 1 ตัวอักษร Google ก็ขายได้ มองย้อนกลับไปในยุคของ Kilobytes ข้อมูลจะถูกจัดเก็บบันทึกลงใน Floppy Disk ผมยังจำได้เวลาไปโรงเรียนเราจะพกแผ่น Floppy Disk ทั้งหลายเหล่านี้ไว้สำหรับ class ที่ต้องเรียน Computer ตั้งแต่ยังต้องท่องจำ Command Line ต่าง ๆ เพื่อที่จะสั่งให้เครื่องคอมพิวเตอร์ทำงานได้ตามที่ใจเราอยาก ต่อมาเป็นยุคของ Megabytes ข้อมูลทุก ๆ อย่างถูกเก็บลงใน Hard Disk และ มันก็ถูกพัฒนาไปเรื่อย ๆ จนสามารถเก็บข้อมูลได้เป็น Terabytes โดยที่ตัวมันเองก็เท่าเดิม แต่ใช้ Disk Array ในการจัดเก็บข้อมูลลงไป แล้วยุคของ Petabytes ล่ะจะจัดเก็บลงไปที่ไหน? มันจะถูกจัดเก็บลงไปใน Cloud (Cloud ในที่นี้คือ กลุ่มของ Supercomputer ที่จัดเก็บ Application และ ข้อมูลที่ถูกติดตั้งไว้ในทุกที่ ทุกมุมของโลก) ลองนึกดูว่ามันจะเกิดอะไรขึ้น ถ้าข้อมูลขนาด 1 Petabytes ถูกเก็บลงในฐานข้อมูลของ Google ทุก ๆ 72 นาที

ผมติดมาไว้นานมากตั้งแต่ปีที่แล้ว ที่บอกว่าถ้ามีเวลาผมจะแนะแนวทางการใช้ form ให้ถูกต้อง สะอาด และ accessibility วันนี้ก็คิดว่าคงได้เวลาแล้วล่ะ เพราะกว่าจะว่างอีกคงนานแน่ ๆ เลย เพราะตอนนี้ผมเองก็ไปมุ่งศึกษาในส่วนของ Semantic Web และ Mobile Web Technology แล้วมากกว่า อีกอย่างฝันอยากจะทำ free PDF Magazine เกี่ยวกับการสร้างสรรค์ การจุดประกาย ส่งเสริมให้เกิดความคิดสร้างสรรค์ คิดต่อยอด ให้มีในประเทศไทยบ้างแต่คงจะเริ่มจากกรอบของสิ่งที่ผมทำอยู่ รู้จัก และ ถนัด ซึ่งคิดว่าคงจะได้เห็นกันในเร็ว ๆ วันนี้ แต่อย่างไรก็ตาม ผมก็จะมาบ่น ๆ แบบเรื่อย ๆ เอื่อย ๆ ของผมแบบนี้ ต้องขออภัยที่อาจจะทำให้ ThaiCSS ดูเงียบเหงาไป อาจจะเห็นผมคนเดียวอย่างนี้บ่อย ๆ เพราะพรคงอาจจะนาน ๆ แวะเข้ามาทีแล้ว เพราะมีหน้าที่รับผิดชอบอันยิ่งใหญ่กว่าไว้รอ Surprise กันในเร็ว ๆ วัน สำหรับคนที่รัก Tweeter สามารถพูดคุยกับผมได้ทั้งวันทั้งมีสาระ และ ไม่มีสาระได้เลย (อย่างหลังคงไม่บ่อย หะ หะ) ผมใช้ username ว่า radiz ชื่อผมนี่แหละครับ แนะนำว่าให้ใช้ SNS ในทางที่มีประโยชน์นะครับ อย่าเอามันมาทำลายเวลา และ ขดสมอง

เข้าเรื่องกันดีกว่าครับ ก่อนเราจะเขียนโครงสร้างแบบฟอร์มใน xhtml นั้นเรามารู้จัก tag ต่าง ๆ ที่จะทำงานร่วมกับโครงสร้างแบบฟอร์มกันก่อนโดยผมจะกล่าวแบ่งตามประเภทของมันนะครับ (Block Element และ Inline Element) และ สิ่งที่ผมกล่าวถึงจะเป็นส่วนที่ทำงานเกี่ยวกับ Data Entry (การใส่ข้อมูล) ของแบบฟอร์มส่วนโครงสร้างร่วมอื่น ๆ ให้พิจารณาตามความเหมาะสมครับ บางคนอาจจะใช้ ul, ol หรือ dl ไม่แนะนำให้ใช้ table ในการจัด layout ของ form ครับผม มาทำความรู้จักกับ tag ที่ทำงานร่วมกับ Data Entry ต่าง ๆ กันเลยครับ