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

Tahoma & MS Sans Serif

ภาษาไทย กับการพัฒนาเว็บเพจ

ด้านพัฒนาเว็บ

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

Interlaced GIF

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

Transparent GIFs

Animation GIF

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)

ภาพที่ต้องการความคมชัดสูง มีสีมากทำพื้นโปร่งใสได้

GIF / JPEG

GIF or JPEG?

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 & Google

ไม่ระบุ Web Title

allintitle: tiac

URL

Uniform Resource Locator

ตำแหน่งที่อยู่ของเว็บไซต์

http:// www.nectec.or.th/ courseware/ index.html

Protocol Domain-name Directory Path File

allinurl: tiac

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

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"

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

การลงรหัสที่ ไม่ถูกต้อง

<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> <font size=“+2”><b> A sub-section </b></font> </p>

การลงรหัสที่ถูกต้อง

Use markup and style sheets and do so properly

<h1> This is a heading </h1>

<h1> This is another heading </h1>

<h2> A sub-section </h2>

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 " >

ระบุภาษาให้ชัดเจน

<p> เมื่อวานมีชาวต่างชาติพูดกับฉันว่า <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 ให้กับหัวเรื่องตาราง

<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

ระบุ Shortcut Key

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

Automated validators

http://webxact.watchfire.com

Web Accessibility Coding

0 comments

Notes on slide 1

1 Favorite