บล็อกนี้สรุปมาจากบทความ 10 Simple Web Accessibility Tips You Can Do Today จากเว็บ Six Revisions (แชร์ผ่าน Google Reader โดย Radiz — ขอบคุณครับ) เป็นวิธีในการทำเว็บให้ขยับเข้าไกล้คำว่า Web Accessibility มากขึ้น ซึ่งแต่ละข้อเป็นเรื่องง่ายๆ ถ้าคนดูแล-บริหารเว็บจะให้ความสนใจกับสิ่งเหล่านี้
(รูปของ vanderwal จากเว็บ flickr.com (cc) — ไม่เกี่ยวกับเนื้อหา)
1. ใช้ title attributes ที่มีความหมาย
การใช้ title attributes ที่มีความหมายในคำสั่ง hyperlink <a> ก็จะช่วยอธิบายเนื้อหาได้มากขึ้น
แต่หลายครั้ง ยังมีคนใส่แบบขอไปที เช่น <a href="portfolio.html" title="portfolio">Portfolio</a> แต่่ถ้าเราเปลี่ยนเป็น <a href="portfolio" title="Some artwork of the artist">Portfolio</a> อย่างนี้น่าจะเข้าใจได้มากขึ้นกว่าเดิม
2. เพิ่มเติมสิ่งจำเป็นไว้ในตอนต้นของเว็บเพจ
ในหลายๆ เว็บเพจ การที่จะข้ามไปยัง เมนู หรือ hyperlink ที่ใช้บ่อยๆ ภายในเว็บ จะต้องกด Tab จำนวนมากมาย (การกด Tab เป็นการเลื่อนโฟกัสไปยังตำแหน่ง hyperlink ถัดไป — ปกป้อง) ยิ่งถ้าต้องเปิดอ่านข้อมูลหลายๆ เว็บเพจ คงไม่สนุก
จะดีกว่ามั้ย ถ้าเอา เมนู หรือ hyperlink สำคัญ มาไว้ด้านบนสุดของเว็บ กด Tab ไม่กี่ครั้งก็เจอ (ในส่วนนี้ สามารถใช้ css / display: none position:absolute; top:-10000px; ช่วยซ่อนเพื่อความสวยงามได้ — ปกป้อง)
** อัพเดท: display: none จะทำให้โปรแกรมอ่านหน้าจอ เช่นโปรแกรม JAWS for Windows ไม่อ่าน div ที่ใช้คุณสมบัตินี้ ** (ขอบคุณ @donuzz ที่แนะนำคร้าบ)
3. ไม่ควรใส่คำขึ้นต้นของ title attributes ด้วยคำซ้ำๆ
ตัวอย่างที่ไม่ดีเช่น
<a href="/" title="Link to home">Home</a>
<a href="/products" title="Link to products">Products</a>
<a href="/contact" title="Link to contact">Contact</a>
เพราะการใช้คำขึ้นต้นที่ซ้ำกัน และไม่มีความหมาย จะทำให้การค้นหา หรือข้ามไปยัง hyperlink ที่ต้องการ ทำได้ยากลำบาก
4. ใช้งานหัวข้อ heading ให้ถูกต้อง
แท็ก Heading จะช่วยให้ผู้ใช้สามารถข้ามไปยังหัวข้อที่ตัวเองสนใจ ยกตัวอย่างเช่น แท็ก <h2> จะต้องอยู่หลัง <h1> และเป็นส่วนย่อยของ <h1>
โดยเฉพาะถ้าเป็นเว็บที่มีเนื้อหาจำนวนมาก การใช้ Heading เป็นสิ่งสำคัญเพราะจะช่วยให้ผู้ใช้ข้ามไปยังตำแหน่งที่ต้องการได้ง่ายขึ้น
5. ความแตกต่าง และความหมายของ page title
สิ่งแรกที่โปรแกรม screen reader จะอ่าน หลังจากโหลดข้อมูลครบคือข้อความที่อยู่ในแท็ก <title>
ถ้าคุณใช้ข้อความเหมือนกัน หรือไม่ใส่ข้อความใน page title ก็จะไม่ช่วยอะไรในการบอกข้อมูลเริ่มต้นของการอ่านข้อมูล
ตัวอย่างง่ายๆ เช่น
<head>
<title>About us - Six Revisions</title>
</head>
<head>
<title>All Article: Six Revisions</title>
</head>
<head>
<title>Six Revisions: Home</title>
</head>
6. การข้ามเมนูบอกทาง (skip navigation)
โปรแกรมช่วยอ่าน (screen reader) เป็นโปรแกรมที่อ่านเอกสาร HTML จากด้านบนไปยังด้านล่าง
การข้ามเมนูบอกทาง ทำได้ง่ายเพียงใส่ hyperlink ก่อนหน้าเมนูบอกทาง และกำหนดว่าให้อ่านเนื้อหาจากตรงไหนต่อไป
จากตัวอย่างต่อไปนี้ เป็นการข้ามเมนูบอกทางไปยัง เนื้อหา div#content (การข้ามเมนูนี้ สามารถใช้ css ซ่อนการแสดงผลได้เช่นกัน — ปกป้อง)
<a id="skipnav" href="#content" title="Jump to content">Skip Navigation</a>
<ul id="nav">
<li><a href="home.html" title="">Home</a></li>
<li><a href="about.html" title="">About</a></li>
<li><a href="blog.html" title="">Blog</a></li>
<li><a href="portfolio.html" title="">Portfolio</a></li>
<li><a href="contact.html" title="">Contact</a></li>
</ul>
<div id="leftCol">
<h1>My friends</h1>
<ul>
<li><a href="http://blogofafriend.com/" title="">Blog of a friend</a></li>
<li><a href="ttp://friendofablog.com/" title="">Friend of a blog</a></li>
</ul>
</div>
<div id="#content">
<h1>Page Title</h1>
...
</div>
7. ใส่ป้าย (label) ให้กับ form
เพื่อเป็นการบอกว่า form แต่ละช่องนั้น เป็นการกรอกข้อมูลอะไร ตัวอย่าง
<lable for="searchbox">Enter key words to search:</lable><input id="searchbox" name="searchbox" type="text" />
8. ทดลองดูเว็บของคุณ โดยปิด CSS และ JavaScript
วิธีหนึ่งในการทดสอบว่าเว็บไซต์นี้เข้าใช้งานได้ง่ายหรือไม่ คือการปิดการทำงานของ CSS และ JavaScript
การทดลองเปิดการทำงานดังกล่าวจะสามารถตรวจสอบ(เบื้องต้น)ได้ว่า เนื้อหาภายในเว็บไซต์จะสามารถเข้าถึง(ด้วยโปรแกรมช่วยอ่าน) หรืออยู่ในลักษณะที่เหมาะสมหรือไม่
9. ศึกษาเทคโนโลยี
บางครั้งการออกแบบที่ดีที่สุดคือให้คนที่ใช้งานเป็นคนออกแบบ แต่ถ้าคุณไม่รู้จักใครเลยที่จะช่วยคุณได้ในเรื่องนี้ ก็มีเทคโนโลยีช่วยเหลือต่างๆ ให้เราพอจะเข้าใจว่าจะต้องออกแบบอย่างไร
ทดลองใช้เครื่องจำลองเช่น WebAnywhere ซึึ่งเป็นเครื่องมือที่สร้างจากความร่วมมือกันของ มหาวิทยาลัย Michigan และมหาวิทยาลัย Rochester ซึ่งถ้าหากคุณต้องการทดลองการใช้งานจริงเหมือนคนตาบอด เพียงจำคำสั่งที่คีย์บอร์ดไม่กี่อัน แล้วปิดหน้าจอ ถอดเมาส์ ลองดูว่าคุณจะสามารถอ่านและโต้ตอบกับเว็บของคุณเองได้หรือไม่
หรือจะตรวจสอบสภาพสี สำหรับคนที่มีปัญหาด้านการแยกสี ว่าจะมองเห็นเว็บไซต์ของคุณเป็นสีอะไร ลองที่เครื่องมือตรวจสอบสภาพสี (list of tools for evaluating colors)
นอกจากนี้ยังมีเครื่องมืออีกมากที่จะช่วยให้คุณสามารถสร้างเว็บไซต์ให้ทุกคนสามารถเข้าถึง ดูเพิ่มที่บทความ 10 เครื่องมือสำหรับออกแบบเว็บที่ทุกคนเข้าถึง (10 Tools for Evaluating Web Design Accessibility)
10. Web Accessibility ไม่มีผลกับผู้ใช้โดยรวม
การทำเว็บที่ทุกคนเข้าถึง เป็นเหมือนกับการสร้างสนามเด็กเล่น เป็นการออกแบบทางเลือกให้สามารถเข้าถึงได้หลายทาง ใช้งานได้หลายระดับ ทั้งผู้ชมระดับสูง และเปิดโอกาสให้ผู้ชมกลุ่มอื่น สามารถเข้าได้ง่ายด้วยเช่นกัน
