Web Accessibility Coding

การพัฒนาเว็บไซต์ที่สะดวกในการเข้าถึง ตามมาตรฐาน Web Accessibility บุญเลิศ อรุณพิบูลย์ ศูนย์บริการ ความรู้ทางวิทยาศาสตร์และเทคโนโลยี สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ [email_address] http://www.stks.or.th

มาตรฐานเว็บไซต์ ,[object Object],[object Object],[object Object]

ด้านเทคโนโลยี ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ด้านการใช้ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ด้านการเข้าถึง ,[object Object],[object Object],[object Object],[object Object],[object Object]

ความเข้าใจผิดบางประการ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ความเข้าใจผิดบางประการ ,[object Object],[object Object],[object Object],[object Object],Accessibility ไม่ได้เน้นเฉพาะผู้ที่มีความบกพร่องต่างๆ เท่านั้น แต่หมายถึงโอกาสในการเข้าถึงของทุกคน (All users) ‏

Server & Client WindowsXP IE Windows2000 IE Macintosh Windows98 Netscape พัฒนาเว็บด้วย HTML Editor, HTML Generator บน Windows Server : Unix/NT upload

Server & Client Text Browser คนพิการ Mobile Phone PDA พัฒนาเว็บด้วย HTML Editor, HTML Generator บน Windows Server : Unix/NT upload

มาตรฐานที่เกี่ยวข้อง ,[object Object],[object Object],[object Object],[object Object],[object Object]

การตั้งชื่อไฟล์และ Directory ,[object Object],[object Object],[object Object],[object Object]

แบบอักษร (Fonts) ,[object Object],[object Object],[object Object],[object Object]

ภาษาไทย กับการพัฒนาเว็บเพจ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

HTML Editor กับการเข้ารหัส ภาษาไท ย

กรณีศึกษา Macromedia Dreamweaver

Decoding ภาษาไทยถูกต้องหรือไม่ <meta http-equiv=“content-type” content=“text/html; charset=………..”>

TIS-620/Windows-874 ,[object Object]

TIS-620/Windows-874/UTF-8 ,[object Object],[object Object],[object Object]

ฐานข้อมูลกับภาษาไทย ,[object Object]

Format ,[object Object],[object Object],[object Object]

เว็บกราฟิก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ Interlaced การแสดงผลภาพ แบบ Progressive

JPEG Quality & Progressive ,[object Object],[object Object]

GIF ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Bit depth drastically affects file size 24 bit color 16 million colors 1.55 MB 8 bit color 256 colors 518k 8 bit gray scale 256 shades of gray 518k 1 bit dithered image 64k

JPEG ,[object Object],[object Object],[object Object],[object Object],[object Object]

JPEG File Format JPEG - 19K Low Quality JPEG - 60K Max Quality

PNG ,[object Object],[object Object],[object Object],[object Object]

TIFF ,[object Object],[object Object],[object Object],[object Object]

สรุปการเลือกใช้ฟอร์แมตภาพ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Example of an image at 72-ppi and 300-ppi ,[object Object],[object Object]

Color Mode ,[object Object],[object Object],[object Object],[object Object],[object Object]

RGB model ,[object Object],[object Object],Red Green Blue

Metadata ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

บัตรรายการหนังสือ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

การกำหนดคุณสมบัติของเอกสาร ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ประโยชน์ของ Metadata ,[object Object],[object Object],[object Object]

Web Metadata ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Web Title <head> <title>NECTEC : Thailand : National Electronics and Computer Technology Center</title> </head> เปิดดูด้วยคำสั่ง View, Source

ไม่ระบุ Web Title

URL ,[object Object],[object Object],[object Object],Protocol Domain-name Directory Path File

Meta tag: Description ,[object Object],[object Object],[object Object],เปิดดูด้วยคำสั่ง View, Source

Meta tag: Description ,[object Object]

Meta tag อื่นๆ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Author & Keyword ,[object Object],[object Object]

Web Meta Tags ,[object Object],[object Object],[object Object]

http://www.submitexpress.com/analyzer/

Image Search ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<img src=“aaa.jpg” alt=“Computer System” >

Image Metadata ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],XNView

Exif Metadata โปรแกรมกราฟิกต่างๆ สามารถเปิดดูได้ เช่น ACDSee, XnView โดยคลิกปุ่มขวาแล้ว เลือกคำสั่ง Properties…

IPTC Metadata โปรแกรมกราฟิกต่างๆ อนุญาตให้เพิ่มข้อมูลต่างๆ ได้ เช่น ACDSee, XnView

ตัวอย่างการตรวจสอบ Metadata ของเอกสารฟอร์แมตต่างๆ ทั้ง .doc, .ppt, .pdf, และรูปภาพ .jpg ด้วยโปรแกรม Catalogue http://www.download.com/Catalogue/3000-7241_4-10260395.html?tag=lst-0-4

Web Accessibility ,[object Object],[object Object],[object Object]

ผลที่ได้จาก Web Accessibility ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

กลุ่มผู้พิการ ,[object Object],[object Object],[object Object],[object Object]

กลุ่มผู้พิการทางการเห็น ,[object Object]

Alternate Text ,[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object]

สิ่งที่ไม่ควรทำ ,[object Object],[object Object],[object Object],[object Object]

Empty Alt (alt=“”) ,[object Object],[object Object],[object Object]

Long Description ,[object Object],[object Object],[object Object],คำนึงถึง Thai Encoding & Decoding ด้วย

คำอธิบายแบบยาว Long Description

Alt สำหรับ Flash ,[object Object],[object Object]

สีนั้นสำคัญไฉน ? ,[object Object]

สีนั้นสำคัญไฉน ? http :// www . accesskeys . org / tools / color - contrast . html

การลงรหัสที่ ไม่ถูกต้อง ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

การลงรหัสที่ถูกต้อง ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

สร้างเอกสาร HTML ที่ได้มาตรฐาน ,[object Object]

ระบุภาษาให้ชัดเจน ,[object Object],[object Object],[object Object]

กำกับคำย่อ ,[object Object],[object Object]

ระบุ id ให้กับหัวเรื่องตาราง

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

กลุ่มผู้พิการทางการได้ยิน ,[object Object],[object Object]

Captions ,[object Object],Movie Caption

ลำดับการเลื่อนใน แบบฟอร์ม

Automated validators ,[object Object]

Web Accessibility Coding

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (19)

Similar to Web Accessibility Coding

Similar to Web Accessibility Coding (20)

More from Boonlert Aroonpiboon

More from Boonlert Aroonpiboon (20)

Web Accessibility Coding