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

Web Accessibility เว็บไซต์ที่รองรับความสามารถในการเข้าถึงได้ในทุกรูปแบบที่เป็นมาตรฐาน เพื่อเป็นหลักประกันได้ว่าข้อมูลสารสนเทศที่เผยแพร่นั้น ทุกคนสามารถเข้าถึงได้อย่างเท่าเทียมกัน ใช้เทคโนโลยีที่เป็นมาตรฐานสากล HTML, XHTML, CSS, XML, DOM เป็นต้น

เว็บไซต์ที่รองรับความสามารถในการเข้าถึงได้ในทุกรูปแบบที่เป็นมาตรฐาน

เพื่อเป็นหลักประกันได้ว่าข้อมูลสารสนเทศที่เผยแพร่นั้น ทุกคนสามารถเข้าถึงได้อย่างเท่าเทียมกัน

ใช้เทคโนโลยีที่เป็นมาตรฐานสากล HTML, XHTML, CSS, XML, DOM เป็นต้น

ผลที่ได้จาก Web Accessibility กลุ่มผู้ใช้ผ่านเครื่อง PDA หรืออุปกรณ์ Mobile กลุ่มคนพิการ บกพร่องทางการเห็น บกพร่องทางการได้ยิน บกพร่องทางการเคลื่อนไหว กลุ่มผู้ใช้ Browser ที่แตกต่างกัน กลุ่มผู้ใช้อินเทอร์เน็ตความเร็วต่ำ

กลุ่มผู้ใช้ผ่านเครื่อง PDA หรืออุปกรณ์ Mobile

กลุ่มคนพิการ

บกพร่องทางการเห็น

บกพร่องทางการได้ยิน

บกพร่องทางการเคลื่อนไหว

กลุ่มผู้ใช้ Browser ที่แตกต่างกัน

กลุ่มผู้ใช้อินเทอร์เน็ตความเร็วต่ำ

กลุ่มผู้พิการ ผู้พิการทางการเห็น โปรแกรมช่วยอ่านหน้าจอ – เสียง (TTS), Braille โปรแกรมขยายหน้าจอ โปรแกรม Web Browser

ผู้พิการทางการเห็น

โปรแกรมช่วยอ่านหน้าจอ – เสียง (TTS), Braille

โปรแกรมขยายหน้าจอ

โปรแกรม Web Browser

กลุ่มผู้พิการทางการเห็น ตัวอย่างโปรแกรมขยายหน้าจอ

ตัวอย่างโปรแกรมขยายหน้าจอ

ฟอนต์ที่ควรเลือกใช้ คือ ?

Alternate Text

Alternate Text <IMG SRC=“ ชื่อไฟล์ภาพ ” ALT=“ คำอธิบายภาพ” > คำอธิบายภาพควรสื่อความหมายชัดเจน Firefox ไม่แสดงคำอธิบายภาพ แต่ทำงานกับ Attribute TITLE ฃ

<IMG SRC=“ ชื่อไฟล์ภาพ ” ALT=“ คำอธิบายภาพ” >

คำอธิบายภาพควรสื่อความหมายชัดเจน

Firefox ไม่แสดงคำอธิบายภาพ แต่ทำงานกับ Attribute TITLE ฃ

1. &quot;Image of George Washington&quot; 2. &quot;George Washington, the first president of the United States&quot; 3. An empty alt attribute (alt=&quot;​&quot;) will suffice. 4. &quot;George Washington&quot;

1. &quot;Image of George Washington&quot;

2. &quot;George Washington, the first president of the United States&quot;

3. An empty alt attribute (alt=&quot;​&quot;) will suffice.

4. &quot;George Washington&quot;

1. An empty alt attribute (alt=&quot;​&quot;) will suffice. 2. &quot;Wikipedia entry for George Washington&quot; 3. &quot;Read More&quot; 4. &quot;George Washington&quot;

1. An empty alt attribute (alt=&quot;​&quot;) will suffice.

2. &quot;Wikipedia entry for George Washington&quot;

3. &quot;Read More&quot;

4. &quot;George Washington&quot;

1. &quot;George Washington&quot; 2. &quot;Painting of George Washington&quot; 3. &quot;Painting of George Washington crossing the Delaware River&quot; 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;

1. &quot;George Washington&quot;

2. &quot;Painting of George Washington&quot;

3. &quot;Painting of George Washington crossing the Delaware River&quot;

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;

1. &quot;Employment Application&quot; 2. &quot;PDF File&quot; 3. &quot;PDF icon&quot; 4. The content of the image is presented in context, so (alt=&quot;​&quot;) is appropriate.

1. &quot;Employment Application&quot;

2. &quot;PDF File&quot;

3. &quot;PDF icon&quot;

4. The content of the image is presented in context, so (alt=&quot;​&quot;) is appropriate.

1. &quot;decorative line&quot; 2. &quot;Beginning of footer&quot; 3. &quot;separator&quot; 4. alt=&quot;​&quot; will suffice

1. &quot;decorative line&quot;

2. &quot;Beginning of footer&quot;

3. &quot;separator&quot;

4. alt=&quot;​&quot; will suffice

สิ่งที่ไม่ควรทำ 1. &quot;next&quot; 2. &quot;next page&quot; 3. &quot;George Washington's Presidency&quot; 4. &quot;Continue to George Washington's Presidency&quot;

1. &quot;next&quot;

2. &quot;next page&quot;

3. &quot;George Washington's Presidency&quot;

4. &quot;Continue to George Washington's Presidency&quot;

Empty Alt (alt=“”) ภาพที่ไม่สื่อความหมาย ภาพที่ถูกตัดเป็นหลายชิ้น แต่ไม่มีผลต่อการทำงาน ภาพ Background

ภาพที่ไม่สื่อความหมาย

ภาพที่ถูกตัดเป็นหลายชิ้น แต่ไม่มีผลต่อการทำงาน

ภาพ Background

Long Description คำอธิบายแบบยาว เพิ่ม Attribute LONGDESC=“ ชื่อไฟล์คำอธิบาย .txt” ให้พิมพ์ด้วย Notepad แล้วบันทึกเป็น .txt คำนึงถึง Thai Encoding & Decoding ด้วย

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

เพิ่ม Attribute LONGDESC=“ ชื่อไฟล์คำอธิบาย .txt”

ให้พิมพ์ด้วย Notepad แล้วบันทึกเป็น .txt

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

Alt สำหรับ Flash ระบุ Alt Description & Shortcut

ระบุ Alt

Description & Shortcut

สีนั้นสำคัญไฉน ? ใช้สีพื้นและสีตัวอักษรที่แตกต่างกัน

ใช้สีพื้นและสีตัวอักษรที่แตกต่างกัน

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

การลงรหัสที่ ไม่ถูกต้อง <p> <font size=“+3”><b> This is a heading </b></font> </p> <p>Blah blah blah</p> <p> <font size=“+3”><b> This is another heading </b></font> </p> <p>Blah blah blah</p> <p> <font size=“+2”><b> A sub-section </b></font> </p> <p>Blah blah blah</p>

<p> <font size=“+3”><b> This is a heading </b></font> </p>

<p>Blah blah blah</p>

<p> <font size=“+3”><b> This is another heading </b></font> </p>

<p>Blah blah blah</p>

<p> <font size=“+2”><b> A sub-section </b></font> </p>

<p>Blah blah blah</p>

การลงรหัสที่ถูกต้อง Use markup and style sheets and do so properly <h1> This is a heading </h1> <p>Blah blah blah</p> <h1> This is another heading </h1> <p>Blah blah blah</p> <h2> A sub-section </h2> <p>Blah blah blah</p> Outline: This is a heading This is another heading A sub-section

Use markup and style sheets and do so properly

<h1> This is a heading </h1>

<p>Blah blah blah</p>

<h1> This is another heading </h1>

<p>Blah blah blah</p>

<h2> A sub-section </h2>

<p>Blah blah blah</p>

Outline:

This is a heading

This is another heading

A sub-section

สร้างเอกสาร HTML ที่ได้มาตรฐาน < ! DOCTYPE HTML PUBLIC &quot;-// W3C // DTD HTML 4.01 Transitional // EN &quot; &quot; http :// www . w3 . org / TR / html4 / loose . dtd &quot; >

< ! DOCTYPE HTML PUBLIC &quot;-// W3C // DTD HTML 4.01 Transitional // EN &quot; &quot; http :// www . w3 . org / TR / html4 / loose . dtd &quot; >

ระบุภาษาให้ชัดเจน <p> เมื่อวานมีชาวต่างชาติพูดกับฉันว่า <span lang = “en”>I love you< / span>< / p> และระบุภาษาหลักในแท็ก <HTML> <html lang =&quot; th &quot; >

<p> เมื่อวานมีชาวต่างชาติพูดกับฉันว่า <span lang = “en”>I love you< / span>< / p>

และระบุภาษาหลักในแท็ก <HTML>

<html lang =&quot; th &quot; >

กำกับคำย่อ <acronym title=&quot;World Wide Web Consortium&quot;>W3C</acronym> <abbr title=&quot;World Wide Web Consortium&quot;>W3C</abbr>

<acronym title=&quot;World Wide Web Consortium&quot;>W3C</acronym>

<abbr title=&quot;World Wide Web Consortium&quot;>W3C</abbr>

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

<tr> <th id =&quot; t1 &quot; > ชื่อ < / th> <th id =&quot; t2 &quot; > อายุ < / th> <th id =&quot; t3 &quot; > สถานที่เกิด < / th> <th id =&quot; t4 &quot; > สถานที่ทำงาน < / th> < / tr> <tr> <td headers =&quot; t1 &quot; > น้ำหนึ่ง < / td> <td headers =&quot; t2 &quot; >29< / td> <td headers =&quot; t3 &quot; > กรุงเทพฯ < / td> <td headers =&quot; t4 &quot; > เนคเทค < / td> < / tr> <tr> <td headers =&quot; t1 &quot; > ยุทธการ < / td> <td headers =&quot; t2 &quot; >28< / td> <td headers =&quot; t3 &quot; > หนองคาย < / td> <td headers =&quot; t4 &quot; > เนคเทค < / td> < / tr>

<tr>

<th id =&quot; t1 &quot; > ชื่อ < / th>

<th id =&quot; t2 &quot; > อายุ < / th>

<th id =&quot; t3 &quot; > สถานที่เกิด < / th>

<th id =&quot; t4 &quot; > สถานที่ทำงาน < / th>

< / tr>

<tr>

<td headers =&quot; t1 &quot; > น้ำหนึ่ง < / td>

<td headers =&quot; t2 &quot; >29< / td>

<td headers =&quot; t3 &quot; > กรุงเทพฯ < / td>

<td headers =&quot; t4 &quot; > เนคเทค < / td>

< / tr>

<tr>

<td headers =&quot; t1 &quot; > ยุทธการ < / td>

<td headers =&quot; t2 &quot; >28< / td>

<td headers =&quot; t3 &quot; > หนองคาย < / td>

<td headers =&quot; t4 &quot; > เนคเทค < / td>

< / tr>

กลุ่มผู้พิการทางการได้ยิน สามารถอ่านหนังสือได้ เข้าใจเนื้อหาจากการอ่าน ?

สามารถอ่านหนังสือได้

เข้าใจเนื้อหาจากการอ่าน ?

Captions สร้าง caption ให้ Movie Movie Caption

สร้าง caption ให้ Movie

ระบุ Shortcut Key

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

Automated validators http://webxact.watchfire.com

http://webxact.watchfire.com