• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Accessibility
 

Web Accessibility

on

  • 4,828 views

เทคนิคการออกแบบเว็บไซต์ที่สะดวกในการเข้าถึง

เทคนิคการออกแบบเว็บไซต์ที่สะดวกในการเข้าถึง

Statistics

Views

Total Views
4,828
Views on SlideShare
2,287
Embed Views
2,541

Actions

Likes
0
Downloads
26
Comments
0

4 Embeds 2,541

http://www.thailibrary.in.th 2501
http://stks.or.th 24
http://www.stks.or.th 15
https://ymodules.yammer.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Accessibility Web Accessibility Presentation Transcript

    • เทคนิคการออกแบบเว็บไซต์ ที่สะดวกในการเข้าถึง โครงการอบรมบุคลากร เพื่อการพัฒนาเว็บไซต์มหาวิทยาลัยมหิดล ประจำปี พ . ศ . ๒๕๕๑
    • บุญเลิศ อรุณพิบูลย์
      • นักวิชาการ 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
    • กรณีศึกษา 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
    • Template & Layout Design TITLE 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=&quot;Description&quot; CONTENT=&quot; มหาวิทยาลัยเกษตรศาสตร์เป็นสถาบันอุดมศึกษาที่เปิดสอนหลักสูตรทางการเกษตรแห่งแรกของประเทศไทย ถือกำเนิดมาจากโรงเรียนฝึกหัดครู ประถมกสิกรรม เมื่อ พ . ศ . 2460 ต่อมาได้ขยายและยกฐานะขึ้นเป็นวิทยาลัยเกษตรศาสตร์และพัฒนาจนกระทั่งก่อตั้งเป็นมหาวิทยาลัยเกษตรศาสตร์ โดยพระราชบัญญัติ มหาวิทยาลัยเกษตรศาสตร์ เมื่อวันที่ 2 กุมภาพันธ์ พ . ศ . 2486 ปัจจุบันมหาวิทยาลัยเกษตรศาสตร์ ประกอบด้วยวิทยาเขตที่เปิดเรียนแล้ว 5 วิทยาเขต และโครงการ จัดตั้ง 2 วิทยาเขต &quot;>
      • </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=&quot;Author&quot; CONTENT=&quot;Kasetsart University, Thailand, Bangkok&quot;>
      • <META NAME=&quot;Keywords&quot; CONTENT=&quot;Kasetsart University, Thailand, University, Bangkok, Higher Education, Equality in Education, Colleges, School, Campuses, Faculty, มหาวิทยาลัยเกษตรศาสตร์ , เกษตรศาสตร์ ศาสตร์ของแผ่นดิน &quot;>
    • 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: &quot;sans serif&quot;}
      • 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=&quot;right&quot;>
      • This paragraph will be right-aligned.
      • </p>
      • <p class=&quot;center&quot;>
      • This paragraph will be center-aligned.
      • </p>
    • Class Selector
      • กรณีที่ Attribute เดียวกัน และ้ต้องการประกาศใช้กับทุก Tag สามารถกำหนด Certain Class ได้ดังนี้
      • .center {text-align: center}
    • Class Selector
      • การใช้ Certain Class มีรูปแบบดังนี้
      • <h1 class=&quot;center&quot;>
      • This heading will be center-aligned
      • </h1>
      • <p class=&quot;center&quot;>
      • This paragraph will also be center-aligned.
      • </p>
    • ID Selector
      • Selector ที่ไม่ใช้แท็กคำสั่งของ HTML เรียกว่า ID Selector
      • ประกาศขึ้นต้นด้วยเครื่องหมาย #
      • ห้ามใช้ตัวเลขขึ้นต้นชื่อ
      • #green {color: green}
      • <h1 id=&quot;green&quot;>Some text</h1>
      • <p id=&quot;green&quot;>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=&quot;stylesheet&quot; type=&quot;text/css&quot;
          • href=&quot;mystyle.css&quot; />
      • </head>
    • Web Accessibility
      • เว็บไซต์ที่รองรับความสามารถในการเข้าถึงได้ในทุกรูปแบบที่เป็นมาตรฐาน
      • เพื่อเป็นหลักประกันได้ว่าข้อมูลสารสนเทศที่เผยแพร่นั้น ทุกคนสามารถเข้าถึงได้อย่างเท่าเทียมกัน
      • ใช้เทคโนโลยีที่เป็นมาตรฐานสากล HTML, XHTML, CSS, XML, DOM เป็นต้น
    • ผลที่ได้จาก Web Accessibility
      • กลุ่มผู้ใช้ผ่านเครื่อง PDA หรืออุปกรณ์ Mobile
      • กลุ่มคนพิการ
        • บกพร่องทางการเห็น
        • บกพร่องทางการได้ยิน
        • บกพร่องทางการเคลื่อนไหว
      • กลุ่มผู้ใช้ Browser ที่แตกต่างกัน
      • กลุ่มผู้ใช้อินเทอร์เน็ตความเร็วต่ำ
    • กลุ่มผู้พิการ
      • ผู้พิการทางการเห็น
        • โปรแกรมช่วยอ่านหน้าจอ – เสียง (TTS), Braille
        • โปรแกรมขยายหน้าจอ
        • โปรแกรม Web Browser
    • กลุ่มผู้พิการทางการเห็น
      • ตัวอย่างโปรแกรมขยายหน้าจอ
    • Alternate Text
    • Alternate Text
      • <IMG SRC=“ ชื่อไฟล์ภาพ ” ALT=“ คำอธิบายภาพ” >
      • คำอธิบายภาพควรสื่อความหมายชัดเจน
        • Firefox ไม่แสดงคำอธิบายภาพ แต่ทำงานกับ Attribute TITLE ฃ
      • 1. &quot;Image of George Washington&quot;
      • 2. &quot;George Washington, the first president of the United States&quot;
      • 3. An empty alt attribute (alt=&quot;​&quot;) will suffice.
      • 4. &quot;George Washington&quot;
      • 1. An empty alt attribute (alt=&quot;​&quot;) will suffice.
      • 2. &quot;Wikipedia entry for George Washington&quot;
      • 3. &quot;Read More&quot;
      • 4. &quot;George Washington&quot;
      • 1. &quot;George Washington&quot;
      • 2. &quot;Painting of George Washington&quot;
      • 3. &quot;Painting of George Washington crossing the Delaware River&quot;
      • 4. &quot;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.&quot;
      • 1. &quot;Employment Application&quot;
      • 2. &quot;PDF File&quot;
      • 3. &quot;PDF icon&quot;
      • 4. The content of the image is presented in context, so (alt=&quot;​&quot;) is appropriate.
      • 1. &quot;decorative line&quot;
      • 2. &quot;Beginning of footer&quot;
      • 3. &quot;separator&quot;
      • 4. alt=&quot;​&quot; will suffice
    • สิ่งที่ไม่ควรทำ
      • 1. &quot;next&quot;
      • 2. &quot;next page&quot;
      • 3. &quot;George Washington's Presidency&quot;
      • 4. &quot;Continue to George Washington's Presidency&quot;
    • 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 &quot;-// W3C // DTD HTML 4.01 Transitional // EN &quot; &quot; http :// www . w3 . org / TR / html4 / loose . dtd &quot; >
    • ระบุภาษาให้ชัดเจน
      • <p> เมื่อวานมีชาวต่างชาติพูดกับฉันว่า <span lang = “en”>I love you< / span>< / p>
      • และระบุภาษาหลักในแท็ก <HTML>
      • <html lang =&quot; th &quot; >
    • กำกับคำย่อ
      • <acronym title=&quot;World Wide Web Consortium&quot;>W3C</acronym>
      • <abbr title=&quot;World Wide Web Consortium&quot;>W3C</abbr>
    • ระบุ id ให้กับหัวเรื่องตาราง
      • <tr>
      • <th id =&quot; t1 &quot; > ชื่อ < / th>
      • <th id =&quot; t2 &quot; > อายุ < / th>
      • <th id =&quot; t3 &quot; > สถานที่เกิด < / th>
      • <th id =&quot; t4 &quot; > สถานที่ทำงาน < / th>
      • < / tr>
      • <tr>
      • <td headers =&quot; t1 &quot; > น้ำหนึ่ง < / td>
      • <td headers =&quot; t2 &quot; >29< / td>
      • <td headers =&quot; t3 &quot; > กรุงเทพฯ < / td>
      • <td headers =&quot; t4 &quot; > เนคเทค < / td>
      • < / tr>
      • <tr>
      • <td headers =&quot; t1 &quot; > ยุทธการ < / td>
      • <td headers =&quot; t2 &quot; >28< / td>
      • <td headers =&quot; t3 &quot; > หนองคาย < / td>
      • <td headers =&quot; t4 &quot; > เนคเทค < / 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