Web Accessibility Coding

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

มาตรฐานเว็บไซต์ ด้านเทคโนโลยี ด้านการใช้ ด้านการเข้าถึง

ด้านเทคโนโลยี การแสดงผลบนเบราว์เซอร์ ระบบปฏิบัติการ ความเร็วในการโอนถ่ายข้อมูล การนำเสนอด้วยเสียง การนำเสนอด้วยวีดิทัศน์ ความต้องการ Plug-ins ฮาร์ดแวร์

ด้านการใช้ ความสม่ำเสมอเกี่ยวกับข้อความ และสื่อประกอบต่างๆ ความสม่ำเสมอในส่วน Interface Layout Navigator Icon & Symbol ความสม่ำเสมอในการติดต่อสื่อสาร

ด้านการเข้าถึง การเข้าถึงที่ไม่จำกัดด้วยความแตกต่างเรื่อง เวลา สถานที่ อุปกรณ์ กายภาพของผู้เข้าชม

ความเข้าใจผิดบางประการ Accessibility web คือ เว็บที่คนที่มีปัญหาทางสายตาเข้าถึงได้ ทั้งที่ๆ ควรจะสนับสนุนทั้ง ผู้ที่มีความบกพร่องทางการได้ยิน ผู้ที่มีความบกพร่องทางสายตา ผู้ที่มีความบกพร่องทางร่างกาย ผู้ที่มีความบกพร่องทางสติปัญญา บุคคลปกติที่ไม่มีความพร้อม ณ เวลานั้นๆ

ความเข้าใจผิดบางประการ ควรทำหรือไม่ สิ้นเปลืองงบประมาณ เสียเวลา ไม่คุ้มค่า 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

มาตรฐานที่เกี่ยวข้อง มาตรฐานการตั้งชื่อไฟล์และ Directory มาตรฐานทางด้านเนื้อหา มาตรฐานทางด้านรูปแบบการใช้ภาษาบนเว็บ มาตรฐานทางด้านเทคนิค มาตรฐานการรักษาความปลอดภัย

การตั้งชื่อไฟล์และ Directory สื่อความหมาย - เข้าใจตรงกัน สั้นกระชับ ไม่เกิดความสับสน ช่วยให้ Search engine ให้ค่าความสำคัญของเว็บไซต์สูงสุด หากคำสำคัญพบเป็นชื่อไฟล์และชื่อ Directory โดยตรง

การตั้งชื่อไฟล์และ Directory ภาษาอังกฤษ ผสมตัวเลข ใช้เครื่องหมายเฉพาะ – ไม่ควรมีช่องว่าง ไม่ควรยาวมากเกินไป

แบบอักษร (Fonts) เลือกใช้ฟอนต์มาตรฐาน Tahoma Tahoma, MS Sans Serif, Thonburi ตระกูล NEW

ภาษาไทย กับการพัฒนาเว็บเพจ ด้านพัฒนาเว็บ HTML Editor, Generator แสดงผลภาษาไทย ? HTML Editor, Generator เข้ารหัสภาษาไทย ? ด้านเรียกดูเว็บ ฟอนต์ ไม่ควรสร้างภาระให้กับผู้ใช้งาน แสดงผลอักขระได้ถูกต้อง ทุก ( เกือบทุก ) platform

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

กรณีศึกษา Macromedia Dreamweaver

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

TIS-620/Windows-874 ประเทศไทยมีมาตรฐานอักขระซึ่งกำหนดโดย สำนักงานมาตรฐานอุตสาหกรรม ดังที่เรียกกันโดยทั่วไปว่ารหัส สมอ . แต่รหัส สมอ . หรือที่มีชื่อทางการว่า มอก . 620 หรือ TIS-620 นี้ เป็นมาตรฐานของประเทศไทย ซึ่งเมื่อนำไปใช้บนเครือข่ายอินเทอร์เน็ต ก็อาจเกิดความเข้าใจไม่ตรงกันได้ ดังนั้นจึงมีความพยายามที่จะจดทะเบียน รหัส สมอ . ที่ Internet Assigned Numbers Authority ( IANA ) ซึ่งเป็นผู้ควบคุมมาตรฐานของเครือข่ายอินเทอร์เน็ต และได้ดำเนินการจดทะเบียนจนสำเร็จ เมื่อวันที่ 22 กันยายน 2541

TIS-620/Windows-874/UTF-8 windows-874 เป็น character Set ที่ใช้ภายในระบบปฏิบัติการที่ผลิตโดยบริษัท ไมโครซอฟต์ เท่านั้น ไม่ได้เป็น character Set ที่ใช้ในการแลกเปลี่ยนข้อมูลระหว่างเครื่อง มีส่วนขยายเพื่อการแสดงผล เช่น bullet, smart quote, dash ฯลฯ tis-620 เป็น character Set ที่จดทะเบียนถูกต้อง เป็นที่รับรู้กันทั่วโลก ทุกระบบปฏิบัติการ ( แม้แต่ระบบปฏิบัติการของไมโครซอฟต์เอง )

ฐานข้อมูลกับภาษาไทย ต้องรู้ Character Set ของฐานข้อมูล

Format รูปแบบของไฟล์ภาพที่ใช้ในการจัดเก็บภาพ การเลือกรูปแบบที่เหมาะสมต่อการนำเสนอจะช่วยให้ภาพมีขนาด ( File Size ) เล็กลง โดยคงความคมชัดไว้ในระดับดี เป็นการประหยัดพื้นที่ของสื่อบันทึกข้อมูลได้เป็นอย่างดี

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

JPEG Quality & Progressive ภาพฟอร์แมต JPG ค่า Quality ไม่ควรต่ำ หรือสูงเกินไป กำหนดรูปแบบการแสดงผล เป็นแบบ Progressive ด้วย สำหรับภาพที่มีขนาดโต

GIF Graphics Interlace File จำนวนสีและความละเอียดของภาพไม่สูงมากนัก ต้องการพื้นแบบโปร่งใส ต้องการแสดงผลแบบโครงร่างก่อน แล้วค่อยแสดงผลแบบละเอียด ต้องการนำเสนอภาพแบบภาพเคลื่อนไหว ส่วนขยายคือ .gif

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 Joint Photographer's Experts Group เหมาะสมกับการนำเสนอทั้งระบบสื่อมัลติมีเดีย และเว็บไซต์ สามารถกำหนดขนาดของไฟล์ได้ตามความเหมาะสม ( File Compression ) สามารถกำหนดคุณสมบัติการแสดงผลแบบหยาบ แล้วค่อยๆ ละเอียดเมื่อเวลาผ่านไป ที่เรียกว่าคุณสมบัติ Progressive ส่วนขยายของไฟล์รูปแบบนี้คือ . jpg หรือ . jpeg

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

PNG Portable Network Graphics รูปแบบล่าสุดในการนำเสนอภาพผ่านเครือข่ายอินเทอร์เน็ต สามารถแสดงผลได้ในระบบสีเต็มพิกัด ( True Color ) , มีขนาดไฟล์เล็ก และควบคุมคุณภาพได้ตามที่ต้องการ มีการกำหนดให้พื้นภาพเป็นพื้นโปร่งใสได้ ( Transparent ) รวมทั้งการแสดงผลแบบหยาบสู่ละเอียด ( Interlaced ) ส่วนขยายของไฟล์รูปแบบนี้คือ . png

TIFF Tagged - Image File Format รูปแบบที่ใช้เก็บภาพพร้อมรายละเอียดต่างๆ เช่น เลเยอร์ ( Layer ) , Annotation, โหมดภาพทั้งระบบ CMYK, RGB, Lab Color ตลอดจนข้อมูลประกอบอื่นๆ ตามต้นฉบับเดิมของภาพ เหมาะสมต่อการเก็บบันทึกภาพต้นฉบับ และภาพสำหรับใช้ประกอบการสร้างสื่อสิ่งพิมพ์ ส่วนขยายของไฟล์รูปแบบนี้คือ . tif

สรุปการเลือกใช้ฟอร์แมตภาพ ไฟล์สกุล GIF (Graphics Interlace File) ภาพที่ไม่ต้องการความคมชัดมากนัก สีไม่มาก มีลักษณะพื้นโปร่งใส ไฟล์สกุล JPG (Joint Photographer’s Experts Group) ภาพที่ต้องการความคมชัดสูง มีสีมาก ไฟล์สกุล PNG (Portable Network Graphics) ภาพที่ต้องการความคมชัดสูง มีสีมากทำพื้นโปร่งใสได้

Example of an image at 72-ppi and 300-ppi 72 ppi = 72 pixels high x 72 pixels wide = 5184 pixels in a square inch 300 ppi = 300 pixels high x 300 pixels wide = 90,000 pixels in a square inch

Color Mode A color mode determines the color model used to display and print images. Common models include RGB (red, green, blue) CMYK (cyan, magenta, yellow, black) …

RGB model RGB model used for lighting, video, and monitors So, computer’s monitor only has 3 colors Red Green Blue

CMYK model The CMYK model is based on the light-absorbing quality of ink printed on paper.

Metadata Data about data ข้อมูลแสดงคุณสมบัติของไฟล์ หรือวัตถุต่างๆ แสดงข้อมูลสรุปเกี่ยวกับรายละเอียดของไฟล์ แสดงลิขสิทธิ์ความเป็นเจ้าของ แยกกลุ่มได้ตามประเภทของไฟล์หรือวัตถุ Subject Metadata Title Metadata Category Metadata Keyword Metadata Author Metadata Description Metadata Publisher Metadata Resource Metadata

บัตรรายการหนังสือ 613 สาทิศ อินทรกำแหง ส762ช ชีวจิต : การใช้ชีวิตอย่างเข้าใจธรรมชาติ/ สาทิศ อินทรกำแหง. –พิมพ์ครั้งที่ 10.– กรุงเทพฯ: คลินิกบ้านและสวน, 2541. 130 หน้า ; 21 ซม. ISBN 974-8368-42-4 1. สุขศาสตร์. 2. อาหารธรรมชาติ. 3. ชื่อเรื่อง.

การกำหนดคุณสมบัติของเอกสาร MS – Office File, Properties.. OpenOffice.org File, Properties… Acrobat Professional File, Document Properties…

ประโยชน์ของ Metadata เพิ่มประสิทธิภาพการสืบค้นเอกสาร เป็นข้อมูลให้กับ Search Engine ต่างๆ การเผยแพร่ในระบบอินเทอร์เน็ต เป็นไปอย่างรวดเร็ว

Web Metadata Web Title URL :Uniform Resource Locator H1, H2, H3 Tag Contents Alternate Text for Image/Multimedia Meta Tag Description เนื้อหา 1 – 2 Kb ของเอกสารเว็บ Authors Keyword Generator

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

ไม่ระบุ Web Title

URL Uniform Resource Locator ตำแหน่งที่อยู่ของเว็บไซต์ http:// www.nectec.or.th/ courseware/ index.html Protocol Domain-name Directory Path File

Meta tag: Description <head> <META NAME="Description" CONTENT=" มหาวิทยาลัยเกษตรศาสตร์เป็นสถาบันอุดมศึกษาที่เปิดสอนหลักสูตรทางการเกษตรแห่งแรกของประเทศไทย ถือกำเนิดมาจากโรงเรียนฝึกหัดครู ประถมกสิกรรม เมื่อ พ . ศ . 2460 ต่อมาได้ขยายและยกฐานะขึ้นเป็นวิทยาลัยเกษตรศาสตร์และพัฒนาจนกระทั่งก่อตั้งเป็นมหาวิทยาลัยเกษตรศาสตร์ โดยพระราชบัญญัติ มหาวิทยาลัยเกษตรศาสตร์ เมื่อวันที่ 2 กุมภาพันธ์ พ . ศ . 2486 ปัจจุบันมหาวิทยาลัยเกษตรศาสตร์ ประกอบด้วยวิทยาเขตที่เปิดเรียนแล้ว 5 วิทยาเขต และโครงการ จัดตั้ง 2 วิทยาเขต "> </head> เปิดดูด้วยคำสั่ง View, Source

Meta tag: Description กรณีที่ไม่ได้ระบุ Description Meta Tag โปรแกรมจะดึงข้อความ 1 – 2 KB จากเว็บไซต์มาแสดงผลแทน

Meta tag อื่นๆ Authors, Creator Keyword Generator Robot จะระบุไว้ใน Head Section ของเอกสารเว็บ ไม่ปรากฏบนเว็บเบราว์เซอร์หรือในเอกสาร Search Engine เข้าถึงได้

Author & Keyword <META NAME="Author" CONTENT="Kasetsart University, Thailand, Bangkok"> <META NAME="Keywords" CONTENT="Kasetsart University, Thailand, University, Bangkok, Higher Education, Equality in Education, Colleges, School, Campuses, Faculty, มหาวิทยาลัยเกษตรศาสตร์ , เกษตรศาสตร์ ศาสตร์ของแผ่นดิน ">

Web Meta Tags บรรจุไว้ใน Head รูปแบบทั่วไป <META NAME=“dataname” CONTENT=“datavalue”>

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

Image Search Google ค้นหาภาพได้จาก คำที่อยู่ใกล้ภาพ / ข้างเคียงภาพ (adjacent) ‏ Image Caption Links Alt Attribute ของ Image Tag Embedded Metadata <img src=“aaa.jpg” alt=“Computer System” >

Image Metadata Exchangeable Image File Format (Exif) Metadata ระบุอัตโนมัติเมื่อมีการถ่ายภาพด้วยกล้องดิจิทัล พัฒนาโดย Japan Electronic Industries Development Association (JEIDA) ‏ International Press Telecommunications Council (IPTC) Metadata Metadata ที่ผู้ใช้สามารถบันทึกเพิ่มเติมได้ พัฒนาโดย International Press Telecommunications Council 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 เว็บไซต์ที่รองรับความสามารถในการเข้าถึงได้ในทุกรูปแบบที่เป็นมาตรฐาน เพื่อเป็นหลักประกันได้ว่าข้อมูลสารสนเทศที่เผยแพร่นั้น ทุกคนสามารถเข้าถึงได้อย่างเท่าเทียมกัน ใช้เทคโนโลยีที่เป็นมาตรฐานสากล HTML, XHTML, CSS, XML, DOM เป็นต้น

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

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

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

Alternate Text <IMG SRC=“ ชื่อไฟล์ภาพ ” ALT=“ คำอธิบายภาพ” > คำอธิบายภาพควรสื่อความหมายชัดเจน 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=“”) ภาพที่ไม่สื่อความหมาย ภาพที่ถูกตัดเป็นหลายชิ้น แต่ไม่มีผลต่อการทำงาน ภาพ Background

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

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

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

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

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

การลงรหัสที่ ไม่ถูกต้อง This is a heading Blah blah blah This is another heading Blah blah blah A sub-section Blah blah blah

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

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

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

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

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

<tr> <th id =" t1 " > ชื่อ < / th> <th id =" t2 " > อายุ < / th> <th id =" t3 " > สถานที่เกิด < / th> <th id =" t4 " > สถานที่ทำงาน < / th> < / tr> <tr> <td headers =" t1 " > น้ำหนึ่ง < / 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>

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

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

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

Automated validators http://webxact.watchfire.com

Web Accessibility Coding

More Related Content

What's hot

Viewers also liked

Similar to Web Accessibility Coding

More from Boonlert Aroonpiboon

Web Accessibility Coding