web accessibility

การพฒนา เว บไซตท สะดวก การพฒนา เว บไซตท สะดวก ใน การ เข า ถงใน การ เข า ถง

ตามมาตรฐาน ตามมาตรฐาน Web Web Accessibility Accessibility บญเลศ อรณพบลย

ศนยบรการความรทางวทยาศาสตรและเทคโนโลย

สำานกงานพฒนาวทยาศาสตรและเทคโนโลยแหงชาต[email protected]

http://www.stks.or.th

มาตรฐานเว บไซตมาตรฐานเว บไซต

• ดานเทคโนโลย• ดานการใช• ดานการเขาถง

ดานเทคโนโลยด านเทคโนโลย

• การแสดงผลบนเบราวเซอร• ระบบปฏบตการ• ความเรวในการโอนถายขอมล• การนำาเสนอดวยเสยง• การนำาเสนอดวยวดทศน• ความตองการ Plug-ins• ฮารดแวร

ดานการใชด านการใช

• ความสมำาเสมอเกยวกบขอความ และสอประกอบตางๆ

• ความสมำาเสมอในสวน Interface– Layout– Navigator– Icon & Symbol

• ความสมำาเสมอในการตดตอสอสาร

ดานการเข าถ งด านการเข าถ ง

• การเขาถงทไมจำากดดวยความแตกตางเรอง– เวลา– สถานท– อปกรณ– กายภาพของผเขาชม

ความเข าใจผดบางประการความเข าใจผดบางประการ

Accessibility web คอ เวบทคนทมปญหาทางสายตาเขาถงได

ทงท ๆ ควรจะสนบสนนท ง• ผท มความบกพรองทางการไดย น• ผท มความบกพรองทางสายตา• ผท มความบกพรองทางร างกาย• ผท มความบกพรองทางสตป ญญา• บคคลปกตท ไมมความพรอม ณ เวลานนๆ

ความเข าใจผดบางประการความเข าใจผดบางประการ

• ควรทำาหร อไม • สนเปลองงบประมาณ• เสยเวลา• ไม ค มคา

Accessibility ไมไดเนนเฉพาะผท มความบกพรองต างๆ เทาน น แตหมายถงโอกาสในการเข าถงของทกคน (All users)

Server & ClientServer & ClientWindowsXP

IE

Windows2000IE

Macintosh

Windows98Netscape

พฒนาเวบดวยHTML Editor,

HTML Generatorบน

Windows

Server :Unix/NT

upload

Server & ClientServer & ClientText Browser

คนพการ

Mobile Phone

PDA

พฒนาเวบดวยHTML Editor,

HTML Generatorบน

Windows

Server :Unix/NT

upload

มาตรฐานทเก ยวข องมาตรฐานทเก ยวข อง

• มาตรฐานการตงชอไฟลและ Directory• มาตรฐานทางดานเนอหา• มาตรฐานทางดานรปแบบการใชภาษาบนเวบ

• มาตรฐานทางดานเทคนค• มาตรฐานการรกษาความปลอดภย

การตงช อไฟลและ การตงช อไฟลและ DirectoryDirectory

• สอความหมาย- เขาใจตรงกน• สนกระชบ• ไมเกดความสบสน• ชวยให Search engine ใหคาความสำาคญ

ของเวบไซตสงสด หากคำาสำาคญพบเปนชอไฟลและชอ

Directory โดยตรง

การตงช อไฟลและ การตงช อไฟลและ DirectoryDirectory

• ภาษาองกฤษ ผสมตวเลข

• ใชเครองหมายเฉพาะ –• ไมควรมชองวาง• ไมควรยาวมากเกนไป

แบบอกษร แบบอกษร (Fonts)(Fonts)

• เลอกใชฟอนตมาตรฐาน– Tahoma– Tahoma, MS Sans Serif, Thonburi– ตระกล NEW

Tahoma & MS Sans SerifTahoma & MS Sans Serif

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

• ดานพฒนาเวบ– HTML Editor, Generator แสดงผลภาษาไทย

?– HTML Editor, Generator เขารหสภาษา

ไทย ?

• ดานเรยกดเวบ– ฟอนต ไมควรสรางภาระใหกบผใชงาน– แสดงผลอกขระไดถกตอง ทก (เกอบทก)

platform

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

กรณศ กษา กรณศ กษา Macromedia Macromedia DreamweaverDreamweaver

Decoding Decoding ภาษาไทยถกต องภาษาไทยถกต องหร อไม หร อไม

<meta http-equiv=“content-type” content=“text/html; charset=………..”>

TIS-620/Windows-874TIS-620/Windows-874

• ประเทศไทยมมาตรฐานอกขระซงกำาหนดโดย สำานกงานมาตรฐานอตสาหกรรม ดงทเรยกกนโดย

ทวไปวารหส สมอ. แตรหส สมอ. หรอทมชอ ทางการวา มอก.620 หรอ TIS-620 น เปน

มาตรฐานของประเทศไทย ซงเมอนำาไปใชบนเครอ ขายอนเทอรเนต กอาจเกดความเขาใจไมตรงกนได

ดงนนจงมความพยายามทจะจดทะเบยน รหส สมอ. ท Internet Assigned Numbers Authority

(IANA) ซงเปนผควบคมมาตรฐานของเครอขาย อนเทอรเนต และไดดำาเนนการจดทะเบยนจนสำาเรจ

เมอวนท 22 กนยายน 2541

TIS-620/Windows-TIS-620/Windows-874/UTF-8874/UTF-8

• windows-874 เปน character Set ทใช ภายในระบบปฏบตการทผลตโดยบรษท

ไมโครซอฟต เทานน ไมไดเปน character Set ทใชในการแลกเปลยนขอมลระหวางเครอง– มสวนขยายเพอการแสดงผล เชน bullet,

smart quote, dash ฯลฯ• tis-620 เปน character Set ทจดทะเบยน

ถกตอง เปนทรบรกนทวโลก ทกระบบปฏบต การ (แมแตระบบปฏบตการของไมโครซอฟต

เอง)

ฐานขอม ลก บภาษาไทยฐานขอม ลก บภาษาไทย

• ตองร Character Set ของฐานขอมล

FormatFormat

• รปแบบของไฟลภาพทใชในการจดเกบภาพ• การเลอกรปแบบทเหมาะสมตอการนำาเสนอ

จะชวยใหภาพมขนาด (File Size) เลกลง โดยคงความคมชดไวในระดบด

• เปนการประหยดพนทของสอบนทกขอมลได เปนอยางด

เว บกราฟกเว บกราฟก

ร ปภาพทแสดงในโหมดปกต

การแสดงผลภาพแบบ Interlacedการแสดงผลภาพ แบบ Progressive

Interlaced GIFInterlaced GIF

JPEG Quality & JPEG Quality & ProgressiveProgressive

• ภาพฟอรแมต JPG คา Quality ไมควรตำา หรอสงเกนไป

• กำาหนดรปแบบการแสดงผล เปนแบบ Progressive ดวย

สำาหรบภาพทมขนาดโต

GIFGIF

• Graphics Interlace File• จำานวนสและความละเอยดของภาพไมสงมากนก

• ตองการพนแบบโปรงใส• ตองการแสดงผลแบบโครงรางกอน แลวคอยแสดงผลแบบละเอยด

• ตองการนำาเสนอภาพแบบภาพเคลอนไหว• สวนขยายคอ .gif

Bit depth drastically affects Bit depth drastically affects file sizefile size

24 bit color

16 million colors

1.55 MB

8 bit color

256 color

s

518k

8 bit gray scale

256 shades of gray

518k

1 bit dithere

d

image

64k

Transparent GIFsTransparent GIFs

Animation GIFAnimation GIF

JPEGJPEG

• Joint Photographer's Experts Group

• เหมาะสมกบการนำาเสนอทงระบบสอมลตมเดย และ เวบไซต

• สามารถกำาหนดขนาดของไฟลไดตามความเหมาะ สม (File Compression)

• สามารถกำาหนดคณสมบตการแสดงผลแบบหยาบ แลวคอยๆ ละเอยดเมอเวลาผานไป ทเรยกวา คณสมบต Progressive

• สวนขยายของไฟลรปแบบนคอ .jpg หรอ .jpeg

JPEG File FormatJPEG File Format

JPEG - 19KLow Quality

JPEG - 60KMax Quality

PNGPNG

• Portable Network Graphics

• รปแบบลาสดในการนำาเสนอภาพผานเครอขาย อนเทอรเนต

• สามารถแสดงผลไดในระบบสเตมพกด (True Color), มขนาดไฟลเลก และควบคมคณภาพได

ตามทตองการ มการกำาหนดใหพนภาพเปนพน โปรงใสได (Transparent) รวมทงการแสดงผล

แบบหยาบสละเอยด (Interlaced)

• สวนขยายของไฟลรปแบบนคอ .png

TIFFTIFF

• 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 / JPEGGIF / JPEG

GIF or JPEG?GIF or JPEG?

Example of an image at 72-ppi and Example of an image at 72-ppi and 300-ppi300-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 ModeColor 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 modelRGB model

• RGB model used for lighting, video, and monitors

• So, computer’s monitor only has 3 colors

Red

Green

Blue

CMYK modelCMYK model

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

MetadataMetadata

• Data about data• ขอมลแสดงคณสมบตของไฟล หรอวตถตางๆ

• แสดงขอมลสรปเกยวกบรายละเอยดของไฟล

• แสดงลขสทธความเปนเจาของ

• แยกกลมไดตามประเภทของไฟลหรอวตถ

• Subject Metadata• Title Metadata• Category Metadata• Keyword Metadata• Author Metadata• Description

Metadata• Publisher

Metadata• Resource

Metadata

(30 . . 2550) พ ค การเขาถงเทคโนโลยสารสนเทศเพอคนพการ


บตรรายการหนงส อบ ตรรายการหนงส อ

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…

ประโยชนของ ประโยชนของ MetadataMetadata

• เพมประสทธภาพการสบคนเอกสาร• เปนขอมลใหกบ Search Engine ตางๆ• การเผยแพรในระบบอนเทอรเนต เปนไปอยางรวดเรว


Web MetadataWeb 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 TitleWeb Title

<head><title>NECTEC : Thailand : National Electronics and Computer Technology Center</title>

</head>

เปดดดวยคำาสง View, Source


Web Title & GoogleWeb Title & Google


ไม ระบ ไม ระบ Web TitleWeb Title


allintitle:tiac


URLURL

• Uniform Resource Locator• ตำาแหนงทอยของเวบไซต• http://www.nectec.or.th/courseware/ind

ex.htmlProtocol Domain-name Directory Path File


allinurl:tiac

Meta tag: DescriptionMeta tag: Description

<head><META NAME="Description" CONTENT="มหาวทยาลยเกษตรศาสตรเปนสถาบนอดมศกษาทเปดสอนหลกสตรทางการเกษตรแหงแรกของประเทศไทย ถอกำาเนดมาจากโรงเรยนฝกหดคร ประถมกสกรรม เมอ พ.ศ. 2460 ตอมาไดขยายและยกฐานะขนเปนวทยาลยเกษตรศาสตรและพฒนาจนกระทงกอตงเปนมหาวทยาลยเกษตรศาสตร โดยพระราชบญญต มหาวทยาลยเกษตรศาสตร เมอวนท 2 กมภาพนธ พ.ศ. 2486 ปจจบนมหาวทยาลยเกษตรศาสตร ประกอบดวยวทยาเขตทเปดเรยนแลว 5 วทยาเขต และโครงการ จดตง 2 วทยาเขต">

</head>เปดดดวยคำาสง View, Source


Meta tag: DescriptionMeta tag: Description

• กรณทไมไดระบ Description Meta Tag โปรแกรมจะดงขอความ 1 – 2 KB จาก

เวบไซตมาแสดงผลแทน


Meta tag Meta tag อนๆอ นๆ

• Authors, Creator• Keyword• Generator • Robot

– จะระบไวใน Head Section ของเอกสารเวบ– ไมปรากฏบนเวบเบราวเซอรหรอในเอกสาร– Search Engine เขาถงได

Author & KeywordAuthor & 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 TagsWeb Meta Tags

• บรรจไวใน Head •รปแบบทวไป <META NAME=“dataname”

CONTENT=“datavalue”>

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

Image SearchImage Search

• Google คนหาภาพไดจาก– คำาทอยใกลภาพ/ ขางเคยงภาพ (adjacent)– Image Caption– Links– Alt Attribute ของ Image Tag– Embedded Metadata

<img src=“aaa.jpg” alt=“Computer System”>


Image MetadataImage 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 MetadataExif Metadataโปรแกรมกราฟกตางๆสามารถเปดดได เชน ACDSee,XnView โดยคลกปมขวาแลวเลอกคำาสง Properties…


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


ตวอยางการตรวจสอบ Metadata ของเอกสารฟอรแมตตางๆ ทง .doc, .ppt, .pdf,และรปภาพ .jpg ดวยโปรแกรม Catalogue

http://www.download.com/Catalogue/3000-7241_4-10260395.html?tag=lst-0-4

Web AccessibilityWeb Accessibility

• เวบไซตทรองรบความสามารถในการเขาถงไดในทกรปแบบทเปนมาตรฐาน

• เพอเปนหลกประกนไดวาขอมลสารสนเทศท เผยแพรนน ทกคนสามารถเขาถงไดอยางเทา

เทยมกน• ใชเทคโนโลยทเปนมาตรฐานสากล HTML,

XHTML, CSS, XML, DOM เปนตน

ผลทได จาก ผลทได จาก Web AccessibilityWeb Accessibility

• กลมผใชผานเครอง PDA หรออปกรณMobile

• กลมคนพการ– บกพรองทางการเหน– บกพรองทางการไดยน– บกพรองทางการเคลอนไหว

• กลมผใช Browser ทแตกตางกน• กลมผใชอนเทอรเนตความเรวตำา

กลมผ พ การกล มผ พ การ

• ผพการทางการเหน– – โปรแกรมชวยอานหนาจอ เสยง (TTS),

Braille– โปรแกรมขยายหนาจอ– โปรแกรม Web Browser

กลมผ พ การทางการเห นกล มผ พ การทางการเห น

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

Alternate TextAlternate Text

Alternate TextAlternate 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=“”)Empty Alt (alt=“”)

• ภำพทไมสอควำมหมำย• ภำพทถกตดเปนหลำยชน แตไมมผลตอกำรทำำงำน

• ภำพ Background

Long DescriptionLong Description

• คำำอธบำยแบบยำว– เพม Attribute LONGDESC=“ชอไฟลคำำอธบำย.txt”

– ใหพมพดวย Notepad แลวบนทกเปน .txt

คำำนงถง Thai Encoding & Decoding ดวย

คำำอธ บำยแบบยำว คำำอธ บำยแบบยำว Long Long DescriptionDescription

Alt Alt สำำหร บ สำำหร บ FlashFlash

• ระบ Alt• Description & Shortcut

สน นส ำำค ญไฉน สน นส ำำค ญไฉน ??

• ใชสพ นและสตวอกษรทแตกต ำงก น

สน นส ำำค ญไฉน สน นส ำำค ญไฉน ??

http://www.accesskeys.org/tools/color-contrast.html

กำรลงรหสท กำรลงรหสท ไมถ กต องไมถ กต อง

This is a heading

Blah blah blahThis is

another heading Blah blah blahA 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 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 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>

กลมผ พ กำรทำงกำรไดย นกล มผ พ กำรทำงกำรไดย น

• สำมำรถอำนหนงสอได• เขำใจเนอหำจำกกำรอำน เขำใจเนอหำจำกกำรอำน ??

CaptionsCaptions

• สร ำง caption ให Movie

Movie

Caption

ระบ ระบ Shortcut KeyShortcut Key

ลำำด บกำรเล อนในลำำด บกำรเล อนในแบบฟอร มแบบฟอร ม

Automated validatorsAutomated validators

http://webxact.watchfire.com