Web Accessibility Coding

960 views

Published on

ตัวอย่้างการลงรหัส HTML ตามมาตรฐาน web accessibility

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
960
On SlideShare
0
From Embeds
0
Number of Embeds
79
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Accessibility Coding

  1. 1. การพัฒนา​เว็บไซต์ที่สะดวก​ใน​การ​เข้า​ถึง ​ ตามมาตรฐาน​ Web Accessibility บุญเลิศ อรุณพิบูลย์ ศูนย์บริการ ความรู้ทางวิทยาศาสตร์และเทคโนโลยี สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ [email_address] http://www.stks.or.th
  2. 2. Web Accessibility <ul><li>เว็บไซต์ที่รองรับความสามารถในการเข้าถึงได้ในทุกรูปแบบที่เป็นมาตรฐาน </li></ul><ul><li>เพื่อเป็นหลักประกันได้ว่าข้อมูลสารสนเทศที่เผยแพร่นั้น ทุกคนสามารถเข้าถึงได้อย่างเท่าเทียมกัน </li></ul><ul><li>ใช้เทคโนโลยีที่เป็นมาตรฐานสากล HTML, XHTML, CSS, XML, DOM เป็นต้น </li></ul>
  3. 3. ผลที่ได้จาก Web Accessibility <ul><li>กลุ่มผู้ใช้ผ่านเครื่อง PDA หรืออุปกรณ์ Mobile </li></ul><ul><li>กลุ่มคนพิการ </li></ul><ul><ul><li>บกพร่องทางการเห็น </li></ul></ul><ul><ul><li>บกพร่องทางการได้ยิน </li></ul></ul><ul><ul><li>บกพร่องทางการเคลื่อนไหว </li></ul></ul><ul><li>กลุ่มผู้ใช้ Browser ที่แตกต่างกัน </li></ul><ul><li>กลุ่มผู้ใช้อินเทอร์เน็ตความเร็วต่ำ </li></ul>
  4. 4. กลุ่มผู้พิการ <ul><li>ผู้พิการทางการเห็น </li></ul><ul><ul><li>โปรแกรมช่วยอ่านหน้าจอ – เสียง (TTS), Braille </li></ul></ul><ul><ul><li>โปรแกรมขยายหน้าจอ </li></ul></ul><ul><ul><li>โปรแกรม Web Browser </li></ul></ul>
  5. 5. กลุ่มผู้พิการทางการเห็น <ul><li>ตัวอย่างโปรแกรมขยายหน้าจอ </li></ul>
  6. 6. ฟอนต์ที่ควรเลือกใช้ คือ ?
  7. 7. Alternate Text
  8. 8. Alternate Text <ul><li><IMG SRC=“ ชื่อไฟล์ภาพ ” ALT=“ คำอธิบายภาพ” > </li></ul><ul><li>คำอธิบายภาพควรสื่อความหมายชัดเจน </li></ul><ul><ul><li>Firefox ไม่แสดงคำอธิบายภาพ แต่ทำงานกับ Attribute TITLE ฃ </li></ul></ul>
  9. 9. <ul><li>1. &quot;Image of George Washington&quot; </li></ul><ul><li>2. &quot;George Washington, the first president of the United States&quot; </li></ul><ul><li>3. An empty alt attribute (alt=&quot;​&quot;) will suffice. </li></ul><ul><li>4. &quot;George Washington&quot; </li></ul>
  10. 10. <ul><li>1. An empty alt attribute (alt=&quot;​&quot;) will suffice. </li></ul><ul><li>2. &quot;Wikipedia entry for George Washington&quot; </li></ul><ul><li>3. &quot;Read More&quot; </li></ul><ul><li>4. &quot;George Washington&quot; </li></ul>
  11. 11. <ul><li>1. &quot;George Washington&quot; </li></ul><ul><li>2. &quot;Painting of George Washington&quot; </li></ul><ul><li>3. &quot;Painting of George Washington crossing the Delaware River&quot; </li></ul><ul><li>4. &quot;Painting of George Washington crossing the Delaware River. Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle.&quot; </li></ul>
  12. 12. <ul><li>1. &quot;Employment Application&quot; </li></ul><ul><li>2. &quot;PDF File&quot; </li></ul><ul><li>3. &quot;PDF icon&quot; </li></ul><ul><li>4. The content of the image is presented in context, so (alt=&quot;​&quot;) is appropriate. </li></ul>
  13. 13. <ul><li>1. &quot;decorative line&quot; </li></ul><ul><li>2. &quot;Beginning of footer&quot; </li></ul><ul><li>3. &quot;separator&quot; </li></ul><ul><li>4. alt=&quot;​&quot; will suffice </li></ul>
  14. 14. สิ่งที่ไม่ควรทำ <ul><li>1. &quot;next&quot; </li></ul><ul><li>2. &quot;next page&quot; </li></ul><ul><li>3. &quot;George Washington's Presidency&quot; </li></ul><ul><li>4. &quot;Continue to George Washington's Presidency&quot; </li></ul>
  15. 15. Empty Alt (alt=“”) <ul><li>ภาพที่ไม่สื่อความหมาย </li></ul><ul><li>ภาพที่ถูกตัดเป็นหลายชิ้น แต่ไม่มีผลต่อการทำงาน </li></ul><ul><li>ภาพ Background </li></ul>
  16. 16. Long Description <ul><li>คำอธิบายแบบยาว </li></ul><ul><ul><li>เพิ่ม Attribute LONGDESC=“ ชื่อไฟล์คำอธิบาย .txt” </li></ul></ul><ul><ul><li>ให้พิมพ์ด้วย Notepad แล้วบันทึกเป็น .txt </li></ul></ul>คำนึงถึง Thai Encoding & Decoding ด้วย
  17. 17. คำอธิบายแบบยาว Long Description
  18. 18. Alt สำหรับ Flash <ul><li>ระบุ Alt </li></ul><ul><li>Description & Shortcut </li></ul>
  19. 19. สีนั้นสำคัญไฉน ? <ul><li>ใช้สีพื้นและสีตัวอักษรที่แตกต่างกัน </li></ul>
  20. 20. สีนั้นสำคัญไฉน ? http :// www . accesskeys . org / tools / color - contrast . html
  21. 21. การลงรหัสที่ ไม่ถูกต้อง <ul><li><p> <font size=“+3”><b> This is a heading </b></font> </p> </li></ul><ul><li><p>Blah blah blah</p> </li></ul><ul><li><p> <font size=“+3”><b> This is another heading </b></font> </p> </li></ul><ul><li><p>Blah blah blah</p> </li></ul><ul><li><p> <font size=“+2”><b> A sub-section </b></font> </p> </li></ul><ul><li><p>Blah blah blah</p> </li></ul>
  22. 22. การลงรหัสที่ถูกต้อง <ul><li>Use markup and style sheets and do so properly </li></ul><ul><li><h1> This is a heading </h1> </li></ul><ul><li><p>Blah blah blah</p> </li></ul><ul><li><h1> This is another heading </h1> </li></ul><ul><li><p>Blah blah blah</p> </li></ul><ul><li><h2> A sub-section </h2> </li></ul><ul><li><p>Blah blah blah</p> </li></ul><ul><li>Outline: </li></ul><ul><li>This is a heading </li></ul><ul><li>This is another heading </li></ul><ul><ul><li>A sub-section </li></ul></ul>
  23. 23. สร้างเอกสาร HTML ที่ได้มาตรฐาน <ul><li>< ! DOCTYPE HTML PUBLIC &quot;-// W3C // DTD HTML 4.01 Transitional // EN &quot; &quot; http :// www . w3 . org / TR / html4 / loose . dtd &quot; > </li></ul>
  24. 24. ระบุภาษาให้ชัดเจน <ul><li><p> เมื่อวานมีชาวต่างชาติพูดกับฉันว่า <span lang = “en”>I love you< / span>< / p> </li></ul><ul><li>และระบุภาษาหลักในแท็ก <HTML> </li></ul><ul><li><html lang =&quot; th &quot; > </li></ul>
  25. 25. กำกับคำย่อ <ul><li><acronym title=&quot;World Wide Web Consortium&quot;>W3C</acronym> </li></ul><ul><li><abbr title=&quot;World Wide Web Consortium&quot;>W3C</abbr> </li></ul>
  26. 26. ระบุ id ให้กับหัวเรื่องตาราง
  27. 27. <ul><li><tr> </li></ul><ul><li><th id =&quot; t1 &quot; > ชื่อ < / th> </li></ul><ul><li><th id =&quot; t2 &quot; > อายุ < / th> </li></ul><ul><li><th id =&quot; t3 &quot; > สถานที่เกิด < / th> </li></ul><ul><li><th id =&quot; t4 &quot; > สถานที่ทำงาน < / th> </li></ul><ul><li>< / tr> </li></ul><ul><li><tr> </li></ul><ul><li><td headers =&quot; t1 &quot; > น้ำหนึ่ง < / td> </li></ul><ul><li><td headers =&quot; t2 &quot; >29< / td> </li></ul><ul><li><td headers =&quot; t3 &quot; > กรุงเทพฯ < / td> </li></ul><ul><li><td headers =&quot; t4 &quot; > เนคเทค < / td> </li></ul><ul><li>< / tr> </li></ul><ul><li><tr> </li></ul><ul><li><td headers =&quot; t1 &quot; > ยุทธการ < / td> </li></ul><ul><li><td headers =&quot; t2 &quot; >28< / td> </li></ul><ul><li><td headers =&quot; t3 &quot; > หนองคาย < / td> </li></ul><ul><li><td headers =&quot; t4 &quot; > เนคเทค < / td> </li></ul><ul><li>< / tr> </li></ul>
  28. 28. กลุ่มผู้พิการทางการได้ยิน <ul><li>สามารถอ่านหนังสือได้ </li></ul><ul><li>เข้าใจเนื้อหาจากการอ่าน ? </li></ul>
  29. 29. Captions <ul><li>สร้าง caption ให้ Movie </li></ul>Movie Caption
  30. 30. ระบุ Shortcut Key
  31. 31. ลำดับการเลื่อนใน แบบฟอร์ม
  32. 32. Automated validators <ul><li>http://webxact.watchfire.com </li></ul>

×