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

ภาษาไทย กับการพัฒนาเว็บเพจ ด้านพัฒนาเว็บ 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) ภาพที่ต้องการความคมชัดสูง มีสีมากทำพื้นโปร่งใสได้

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 ของเว็บไม่ควรเกินครึ่งหนึ่งของพื้นที่ที่เหลือ

ลักษณะของหน้าเว็บที่เหมาะสม 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

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

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

การลงรหัสที่ ไม่ถูกต้อง <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 ที่ได้มาตรฐาน < ! 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

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

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

More Related Content

What's hot (10)

Viewers also liked (18)

Similar to Web Accessibility (20)

More from Boonlert Aroonpiboon (20)

Web Accessibility