Embed Size (px)
DESCRIPTION
ตัวอย่้างการลงรหัส HTML ตามมาตรฐาน web accessibility
Citation preview
การพั�ฒนาเว็�บไซต์�ที่��สะดว็กในการการพั�ฒนาเว็�บไซต์�ที่��สะดว็กในการเข้�าถึ�งเข้�าถึ�ง
ต์ามมาต์รฐานต์ามมาต์รฐานWeb Web Accessibility Accessibility
บุ�ญเลิ�ศ อรุ�ณพิ�บุ�ลิย์�ศ�นย์�บุรุ�การุความรุ� �ทางว�ทย์าศาสตรุ�แลิะเทคโนโลิย์�
ส�าน�กงานพิ�ฒนาว�ทย์าศาสตรุ�แลิะเทคโนโลิย์�แห่"งชาต�[email protected]
http://www.stks.or.th
Web AccessibilityWeb Accessibility
• เว$บุไซต�ท�'รุองรุ�บุความสามารุถในการุเข้�าถ+งได้�ในท�กรุ�ปแบุบุท�'เป.นมาตรุฐาน
• เพิ0'อเป.นห่ลิ�กปรุะก�นได้�ว"าข้�อม�ลิสารุสนเทศท�'เผย์ แพิรุ"น�2น ท�กคนสามารุถเข้�าถ+งได้�อย์"างเท"าเท�ย์ม
ก�น• ใช�เทคโนโลิย์�ท�'เป.นมาตรุฐานสากลิ HTML,
XHTML, CSS, XML, DOM เป.นต�น
ผลที่��ได�จาก ผลที่��ได�จาก Web AccessibilityWeb Accessibility
• กลิ�"มผ��ใช�ผ"านเครุ0'อง PDA ห่รุ0ออ�ปกรุณ� Mobile• กลิ�"มคนพิ�การุ
– บุกพิรุ"องทางการุเห่$น– บุกพิรุ"องทางการุได้�ย์�น– บุกพิรุ"องทางการุเคลิ0'อนไห่ว
• กลิ�"มผ��ใช� Browser ท�'แตกต"างก�น• กลิ�"มผ��ใช�อ�นเทอรุ�เน$ตความเรุ$วต�'า
กล"#มผ$�พั%การกล"#มผ$�พั%การ• ผ��พิ�การุทางการุเห่$น
– – โปรุแกรุมช"วย์อ"านห่น�าจอ เส�ย์ง (TTS), Braille– โปรุแกรุมข้ย์าย์ห่น�าจอ– โปรุแกรุม Web Browser
กล"#มผ$�พั%การที่างการเห็�นกล"#มผ$�พั%การที่างการเห็�น• ต�วอย์"างโปรุแกรุมข้ย์าย์ห่น�าจอ
ฟอนต์�ที่��คว็รเล*อกใช้�ค*อฟอนต์�ที่��คว็รเล*อกใช้�ค*อ??
Alternate TextAlternate Text
Alternate TextAlternate Text
• <IMG SRC=“ช0'อไฟลิ�ภาพิ” ALT=“ค�าอธิ�บุาย์ภาพิ”>
• ค�าอธิ�บุาย์ภาพิควรุส0'อความห่มาย์ช�ด้เจน– Firefox ไม"แสด้งค�าอธิ�บุาย์ภาพิ แต"ท�างานก�บุ
Attribute TITLEฃ
1. "Image of George Washington"
2. "George Washington, the first president of the United States"
3. An empty alt attribute (alt=" ") will suffice.
4. "George Washington"
1. An empty alt attribute (alt=" ") will suffice.
2. "Wikipedia entry for George Washington"
3. "Read More"
4. "George Washington"
1. "George Washington"2. "Painting of George Washington"3. "Painting of George Washington crossing the Delaware River"4. "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."
1. "Employment Application"
2. "PDF File"
3. "PDF icon"
4. The content of the image is presented in context, so (alt=" ") is appropriate.
1. "decorative line"
2. "Beginning of footer"
3. "separator"
4. alt=" " will suffice
ส%�งที่��ไม#คว็รที่,าส%�งที่��ไม#คว็รที่,า
1. "next"
2. "next page"
3. "George Washington's Presidency"
4. "Continue to George Washington's Presidency"
Empty Alt (alt=“”)Empty Alt (alt=“”)
• ภาพิท�'ไม"ส0'อความห่มาย์• ภาพิท�'ถ�กต�ด้เป.นห่ลิาย์ช�2น แต"ไม"ม�ผลิต"อการุ
ท�างาน• ภาพิ Background
Long DescriptionLong Description
• ค�าอธิ�บุาย์แบุบุย์าว– เพิ�'ม Attribute LONGDESC=“ช0'อไฟลิ�ค�า
อธิ�บุาย์.txt”– ให่�พิ�มพิ�ด้�วย์ Notepad
แลิ�วบุ�นท+กเป.น .txt
ค�าน+งถ+ง Thai Encoding & Decoding ด้�วย์
ค,าอธิ%บายแบบยาว็ค,าอธิ%บายแบบยาว็Long Long DescriptionDescription
Alt Alt ส,าห็ร�บส,าห็ร�บFlashFlash
• รุะบุ� Alt• Description & Shortcut
ส�น�0นส,าค�ญไฉนส�น�0นส,าค�ญไฉน??• ใช้�ส�พั*0นและส�ต์�ว็อ�กษรที่��แต์กต์#างก�น
ส�น�0นส,าค�ญไฉนส�น�0นส,าค�ญไฉน??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>
การลงรห็�สที่��ถึ$กต์�องการลงรห็�สที่��ถึ$กต์�อง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 HTML ที่��ได�ที่��ได�มาต์รฐานมาต์รฐาน
<!DOCTYPE HTML PUBLIC -" //W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
ระบ"ภาษาให็�ช้�ดเจนระบ"ภาษาให็�ช้�ดเจน<p>เม0'อวานม�ชาวต"างชาต�พิ�ด้ก�บุฉั�นว"า<span
lang=“en”>I love you</span></p>
แลิะรุะบุ�ภาษาห่ลิ�กในแท$ก <HTML>
<html lang="th">
ก,าก�บค,าย#อก,าก�บค,าย#อ<acronym title="World Wide Web
Consortium">W3C</acronym>
<abbr title="World Wide Web Consortium">W3C</abbr>
ระบ"ระบ"id id ให็�ก�บห็�ว็เร*�องต์ารางให็�ก�บห็�ว็เร*�องต์าราง
<tr><th id="t1">ช0'อ</th><th id="t2">อาย์�</th><th id="t3">สถานท�'เก�ด้</th><th id="t4">สถานท�'ท�างาน</th>
</tr><tr>
<td headers="t1">น�2าห่น+'ง</td><td headers="t2">29</td><td headers="t3">กรุ�งเทพิฯ</td><td headers="t4">เนคเทค</td>
</tr><tr>
<td headers="t1">ย์�ทธิการุ</td><td headers="t2">28</td><td headers="t3">ห่นองคาย์</td><td headers="t4">เนคเทค</td>
</tr>
กล"#มผ$�พั%การที่างการได�ย%นกล"#มผ$�พั%การที่างการได�ย%น• สามารุถอ"านห่น�งส0อได้�• เข้�าใจเน02อห่าจากการุอ"าน เข้�าใจเน02อห่าจากการุอ"าน ??
CaptionsCaptions
• สร�าง caption ให็� Movie
Movie
Caption
ระบ"ระบ"Shortcut KeyShortcut Key
ล,าด�บการเล*�อนในล,าด�บการเล*�อนในแบบฟอร�มแบบฟอร�ม
Automated validatorsAutomated validators
http://webxact.watchfire.com
