Web Accessibility

เทคนิคการออกแบบเว็บไซต์ ที่สะดวกในการเข้าถึง โครงการอบรมบุคลากร เพื่อการพัฒนาเว็บไซต์มหาวิทยาลัยมหิดล ประจำปี พ . ศ . ๒๕๕๑

บุญเลิศ อรุณพิบูลย์

นักวิชาการ 1

ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี (STKS)

สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ ( สวทช .)

ประวัติการทำงาน

ศูนย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ ( เนคเทค )

เจ้าหน้าที่ระบบคอมพิวเตอร์ 3

หัวหน้างานพัฒนาเนื้อหาสาระดิจิทัล

หัวหน้างานวิชาการ , หัวหน้างานเทคนิค

หน่วยปฏิบัติการวิจัยและพัฒนาวิศวกรรมเทคโนโลยีซอฟต์แวร์

งานพัฒนาเนื้อหาสาระดิจิทัล

ศูนย์ฝึกอบรมคอมพิวเตอร์เนคเทค

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

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

ด้านการใช้

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

มาตรฐานเว็บไซต์ สวย เร็ว ค้นได้ รองรับ การเข้าถึง

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

การแสดงผลบน เบราว์เซอร์

ระบบปฏิบัติการ

ความเร็วในการโอนถ่ายข้อมูล

การนำเสนอด้วยเสียงการนำเสนอด้วยวีดิทัศน์

ความต้องการ Plug-ins

ฮาร์ดแวร์

ด้านการใช้

ความสม่ำเสมอเกี่ยวกับข้อความ และสื่อประกอบต่างๆ

ความสม่ำเสมอในส่วน Interface

Layout

Navigator

Icon & Symbol

ความสม่ำเสมอในการติดต่อสื่อสาร

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

การเข้าถึงที่ไม่จำกัดด้วยความแตกต่างเรื่อง

เวลา

สถานที่

อุปกรณ์

กายภาพของผู้เข้าชม

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

ควรทำหรือไม่

สิ้นเปลืองงบประมาณ

เสียเวลา

ไม่คุ้มค่า

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

GIF Transparent

PNG Transparent

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?

72-ppi and 300-ppi

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.

ลักษณะของหน้าเว็บที่เหมาะสม

หน้าเว็บที่เหมาะสม ไม่มีข้อกำหนดที่ชัดเจน ควรคำนึงถึง

กลุ่มเป้าหมาย (Personal/Business)

ลักษณะของคอมพิวเตอร์ที่กลุ่มเป้าหมายใช้ (Screen Area ของจอภาพ )

Screen Area ที่เหมาะสมในปัจจุบัน คือ 1024 x 768 pixels

Web Area ที่เหมาะสมคือ

ความยาวไม่เกิน 98 0 pixel

ความสูงไม่มีข้อกำหนดตายตัว แต่ส่วน Header ของเว็บไม่ควรเกินครึ่งหนึ่งของพื้นที่ที่เหลือ

Truehits.net

ลักษณะของหน้าเว็บที่เหมาะสม Web Area 980 pixel Screen Area 600 pixel web Area

Template & Layout Design TITLE Menu History Duty Project

Template & Layout Design TITLE History Duty Project

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

CSS : Standard Web Solution

เว็บเบราว์เซอร์แต่ละค่ายกำหนดคำสั่ง HTML และ Attribute แตกต่างกันออกไป

เกิดปัญหาในการสร้างเอกสารเว็บที่สนับสนุนกับ ทุกเบราว์เซอร์

เกิดปัญหาในการปรับแก้ไขเอกสารเว็บ

การควบคุมการแสดงผล Tag หรือ Attribute ด้วย CSS จึงเป็นทางออกที่ W3C แนะนำ

What is CSS?

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles are normally stored in Style Sheets

External Style Sheets can save you a lot of work

External Style Sheets are stored in CSS files

Multiple style definitions will cascade into one

CSS syntax

selector {property: value}

Selector เป็นได้ทั้งแท็กคำสั่ง HTML หรือเป็นชื่อที่กำหนดมาใหม่ ก็ได้

Property คือ Attribute ที่ต้องการแสดงผล

แต่ละ Property จะต้องระบุค่าการแสดงผล (Value) ‏

CSS syntax

คั่นระหว่าง Property และ value ด้วยเครื่องหมาย colon

และ้ล้อมรอบด้วย { } curly braces

body {color: black}

CSS syntax

ถ้า value ประกอบด้วยคำหลายคำ ( มีช่องว่างระหว่างคำ ) ต้องใส่เครื่องหมายคำพูดกำกับ (quotes) ‏

p {font-family: "sans serif"}

p {font-family: tahoma}

CSS syntax

สามารถระบุ property ได้มากกว่า 1 โดยใช้เครื่องหมาย semi-colon แบ่ง

p {text-align : center ; color:red}

เพืื่่อให้อ่านได้สะดวกควรเปลียนรูปแบบเป็น

p {

text-align : center ;

color:red

}

CSS syntax

สามารถจัดกลุ่ม Selector หลายๆ ตัว เมืื่่อมี Property เดียวกัน ด้วยเครื่องหมาย comma

h1,h2,h3,h4,h5,h6

{

color: green

}

h1 { color: green} h2 { color: green } h3 { color: green } h4 { color: green } h5 { color: green } h6 { color: green }

Class Selector

แท็ก HTMl แต่ละ Tag สามารถกำหนดรูปแบบการแสดงแตกต่างกันได้ โดยการสร้าง Class selector ดังนี้

p.right {text-align: right}

p.center {text-align: center}

ขึ้นต้นด้วย Tag ตามด้วยจุด และต่อด้วย Attribute

ไม่อนุญาตให้ขึ้นต้นชื่อ class ด้วยตัวเลข

Class Selector

การใ้ช้งาน

<p class="right">

This paragraph will be right-aligned.

</p>

<p class="center">

This paragraph will be center-aligned.

</p>

Class Selector

กรณีที่ Attribute เดียวกัน และ้ต้องการประกาศใช้กับทุก Tag สามารถกำหนด Certain Class ได้ดังนี้

.center {text-align: center}

Class Selector

การใช้ Certain Class มีรูปแบบดังนี้

<h1 class="center">

This heading will be center-aligned

</h1>

<p class="center">

This paragraph will also be center-aligned.

</p>

ID Selector

Selector ที่ไม่ใช้แท็กคำสั่งของ HTML เรียกว่า ID Selector

ประกาศขึ้นต้นด้วยเครื่องหมาย #

ห้ามใช้ตัวเลขขึ้นต้นชื่อ

#green {color: green}

<h1 id="green">Some text</h1>

<p id="green">Some text</p>

ID Selector

กรณีที่ต้องการประกาศเป็น Attribute ใหม่ของ HTML Tag จะใช้รูปแบบ ดังนี้

p#para1

{

text-align: center;

color: red

}

External Style Sheet

สร้าง text file

ป้อนคำสั่ง css

บันทึกด้วยนามสกุล .css

ประกาศใช้ css ใน html file ด้วยคำสั่ง

<head>

<link rel="stylesheet" type="text/css"

href="mystyle.css" />

</head>

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

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

PDF Security Document

Watermark

ข้อมูลแสดงลิขสิทธิ์หรือคุณสมบัติของไฟล์

แสดงความเป็นเจ้าของ

แบ่งได้เป็น

Text Embedded Watermark

Image Embedded Watermark

มีประโยชน์อย่างสูงสำหรับ Digital Library, Digital Archive, E-Commerce

Text Embedded Watermark

มีลักษณะเป็นข้อความที่ผนวกกับไฟล์ภาพ

สามารถระบุได้จากโปรแกรม Adobe PhotoShop จากคำสั่ง File, File info, Copyright & URL

สามารถค้นหาได้จากคำสั่ง Search/Find ของ Windows

Image Embedded Watermark

มีลักษณะเป็นภาพที่ผนวกกับไฟล์ภาพ

อาจจะเป็นภาพโลโก้ของหน่วยงาน , ภาพข้อความลิขสิทธิ์

สามารถระบุได้จากซอฟต์แวร์ประเภท Watermarking Software

Watermark Processing

Encoding การเข้ารหัส

Decoding/Detect การตรวจสอบรหัส

ระบบ Detect สามารถกระทำได้กับภาพที่มีการลง Watermark และสั่งพิมพ์บนกระดาษ โดยนำภาพดังกล่าวมาสแกน แล้วใช้ Detecting Watermark Software ทำการตรวจสอบ

The Watermark Embedding Process

The Watermark Detection Process

แหล่งอ้างอิง

http://stks.or.th

http://stks.or.th/elearning

http://webxact.watchfire.com

Web Accessibility

0 comments

Notes on slide 1

Favorites, Groups & Events