Web Content Accessibility Guidelines 2.0 (WCAG 2.0)

1
Web Content Accessibility Guidelines 2.0 (WCAG
2.0)TWCAG 2008

• ???????? ?????
• ????????????????????????????????????-???????

2
Background of WCAG 2.0

• ?????? ?.?. 2537 ??? ????????????????????????
  World Wide Web Consortium (W3C)
• ?.?. 2540 W3C ?????????????????????????????????
  ???? Web Accessibility Initiative (WAI)
• ?.?. 2541 W3C ????????????????????????????????????
  ? ???? Web Content Accessibility Guidelines
  Version 1.0 (WCAG 1.0)
• ?.?.2548 W3C ?????????????????????????????????????
  ?????????? ???????????????????????????????????????
  ?????????????????????? WCAG 1.0 ?????????????
  WCAG 2.0 ??????????

3
TWCAG 2008

• ?.?.2550 ?????????????????????????????????????????
  ???????????????????????????????????????????????
  ICT ?.?.2551-2553
• ??????? TWCAG 2008 (Thai Web Content
  Accessibility Guide 2008) ????????????????????????
  ????????????????????????????????????
  ????????????????????? WCAG 2.0

4
?????????? TWCAG 2008

• ???????????????
• ?????????????????????????????????????????????
• ???????????????
• ?????????????????????????????????????????????????
  ?????????????????????????????????????
• ???????????????
• ???????????????????? ????????????????????????????
  ????????????????????
• ???????????????
• ???????????????????????? ????????????????????????
  ??????????????????? ? ?????????????????????????

5
?????????? TWCAG 2008

• ???????????????
• ?????????????????????????????????????????????
• ???????????????
• ?????????????????????????????????????????????????
  ?????????????????????????????????????
• ???????????????
• ???????????????????? ????????????????????????????
  ????????????????????
• ???????????????
• ???????????????????????? ????????????????????????
  ??????????????????? ? ?????????????????????????

6
??????????????? (Success Criteria)

• ????? A
• ???????????????????????????????????????? A
  ??????
• ????? AA
• ???????????????????????????????????????? A
  ??????
• ???????????????????????????????????????? AA
  ??????
• ????? AAA
• ???????????????????????????????????????? A
  ??????
• ???????????????????????????????????????? AA
  ??????
• ???????????????????????????????????????? AAA
  ??????

7
??????????????????????????

• ????? A
• ???????????????????????????? ????
  ???????????????????????????????????????????
• ????? AA
• ?????????????????????????????????????????????
  ????? ????????????????????????????????????????????
  ???????
• ????? AAA
• ???????????????????????????? ?????
  ??????????????????????????????????????????????????
  ???

8
?????????? TWCAG 2008

• ?????????? 1 ?????????????????????????????????
• ????????? 1.1 - ?????????????????????????????
  (Text) ??? ??????????????????????????
• ????????? 1.2 - ??????????????????????????????????
  ???????????????????????
• ????????? 1.3 - ?????????????????? ??????????
  ????????????????????????????????????
• ????????? 1.4 ??????????????????????????????????
  ? (??????????) ???????????????????????????????????
  ????????????????

9
?????????? TWCAG 2008

• ?????????? 2 - ?????????????? ?
  ??????????????????????????????????????????
• ????????? 2.1 - ??????????????????????????????????
  ????????????????
• ????????? 2.2 - ????????????????????????????????
  ??????????????? ????????? ????????????
• ????????? 2.3 - ??????????????????????????????????
  ??????????
• ????????? 2.4 - ??????????????????????????????????
  ????????????????? ????????????????????????????????
  ???? ?????????????????????????

10
?????????? TWCAG 2008

• ?????????? 3 - ?????????????????????????
  ?????????????????????????? ???
• ????????? 3.1 - ??????????????????????????????????
  ???
• ????????? 3.2 - ????????????????????
  ??????????????????????? ??????????????????????????
  ??????????
• ????????? 3.3 - ??????????????????????????????????
  ?????????????????????????????

11
?????????? TWCAG 2008

• ?????????? 4 - ???????????????????????????????????
  ?????????????????????????????????????
  (?????????????????????????????????)
• ????????? 4.1 - ?????????????????????? User Agent
  ????????????????? ???????? (??????????????????????
  ???????????)

12
????????? 1.1 - ?????????????????????????????
(Text) ??? ??????????????????????????

• ?????? ??????????????????????? (alternative
  text)
• ??????????????
• ltpgtltimg srcsomewhere/dog.jpg width200
  /gtlt/pgt
• ??????????????
• ltpgtltimg srcsomewhere/dog.jpg
  alt?????????????????? /gtlt/pgt

13
????????? 1.1 - ?????????????????????????????
(Text) ??? ?????????????????????????? - ???

• Controls, Input ??????????????? ?
  ?????????????????????????????????????????
• ??????????????
• ltpgtltlabel forinput1gt????????lt/labelgt
• ltinput typetext nameinput1 idinput1
  /gtlt/pgt
• ??????????????
• ltpgtltlabel foreducationgt????????lt/labelgt
• ltinput typetext nameeducation
  ideducation /gtlt/pgt

14
????????? 1.1 - ?????????????????????????????
(Text) ??? ?????????????????????????? - ???

• CAPTCHA ?????????????????????????????????????????
  ?????????????????????????????????????
  ????????????????????????
• ????????
• ??? http//www.captcha.net/

15
????????? 1.3 - ?????????????????? ??????????
????????????????????????????????????

• Decoration, Formatting, Invisible ???????????????
  ??????? ??????????????????????????????????????????
  ???
• ??????????????
• ltpgtltimg srcsomewhere/bg_top_coner.jpg
  alt???????????????? /gtlt/pgt
• ??????????????
• ltpgtltimg srcsomewhere/bg_top_coner.jpg alt
  /gtlt/pgt

16
????????? 1.3 - ?????????????????? ??????????
???????????????????????????????????? - ???

• ??? CSS

17
????????? 1.3 - ?????????????????? ??????????
???????????????????????????????????? - ???

• ?????? CSS

18
????????? 1.4 ??????????????????????????????????
? (??????????) ???????????????????????????????????
????????????????
??????????????
19
????????? 2.1 - ??????????????????????????????????
????????????????

• ??????????????
• ??? http//www.adobe.com/

20
????????? 2.2 - ????????????????????????????????
??????????????? ????????? ????????????

• ??????????????
• ltmeta http-equiv"refresh" content20urlhttp//
  www.somewhere.com /gt

21
????????? 2.3 ??????????????????????????????????
??????????

• ??????????????
• ??? https//www.flashingblinkylights.com/

22
????????? 2.4 - ??????????????????????????????????
????????????????? ????????????????????????????????
???? ?????????????????????????

• ????????
• ??? http//www.washington.edu/webguides/guidelines
  /breadcrumbs.html

23
????????? 3.1 - ??????????????????????????????????
???

• ???????????????????????????
• lt?xml version"1.0" encoding"tis-620"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d
  td"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  xmllang"th"gt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsettis-620" /gt
• ltmeta http-equiv"Content-Style-Type"
  content"text/css charsettis-620" /gt
• lt/headgt

24
????????? 3.1 - ??????????????????????????????????
???

• ????????????????????

25
????????? 3.1 - ??????????????????????????????????
???

• ?????
• ????????
• ltacronym titleHyper Text Markup
  LanguagegtHTMLlt/acronymgt
• ltabbr titleWorld Wide Web ConsortiumgtW3Clt/abbrgt
  

26
????????? 3.2 - ????????????????????
??????????????????????? ??????????????????????????
??????????

• ??????????????
• ??? https//www.cia.gov/library/publications/the-w
  orld-factbook/

27
????????? 3.3 - ??????????????????????????????????
?????????????????????????????

• ?????????????
• ??? http//www.tddf.or.th

28
????????? 4.1 - ?????????????????????? User Agent
????????????????? ???????? (??????????????????????
???????????)

• ?????????? (Parsing)
• ??????????????
• ltpgtThis paragraph is very ltstronggtimportant.ltpgt
• ltpgtPlease rememberlt/stronggt to not overlap
  tags.lt/pgt
• ??????????????
• ltpgtThis paragraph is very ltstronggtimportantlt/stron
  ggt.ltpgt
• ltpgtltstronggtPlease rememberlt/stronggt to not
  overlap tags.lt/pgt

29
10 ?????????????????????????

1. ????????????????? ??? alt ???????????????????????
   ?????????????????
2. Image maps ??? client-side map
   ???????????????????????????????????????
3. ??????????????? ?????????????????????????????????
   ?????????????????????
4. ???????????? ??????????????????????????????
   ?????????????????????? ?????????? ????
   ??????? ??????????????????
5. ??????????????? ???????????? ?????
   ???????????????????????????? ??? CSS
   ?????????????????

30
10 ????????????????????????? - ???

1. ????????????? ?????????????????????????????
   longdesc ??????????? ????????? (ltimg
   srcorgchart.jpg longdeschttp//www.mysite.com
   /desc.html /gt
2. Scripts, applets ??? plug-ins ???????????????????
   ??????????????????????????????????????????????
3. Frames ??????? noframe ??????????????????????????
   ????????????? ?????????? title ???????????????????
   ??????
4. ????? ????????????????????????????
   ?????????????????????????????????????
5. ?????????? ?????????????????? (validation)
   ?????? http//validator.w3.org

31
??????????? ? ??? W3C ???? Accessibility

1. XHTML eXtensible Hypertext Markup Language -
   ?????????????????????????
2. CSS Cascading Style Sheets - ???????????????????
   ???
3. Authoring Tool Accessibility Guidelines (ATAG)
   Overview, ATAG 1.0 - ?????????????????????????????
   ????????????????????????
4. User Agent Accessibility Guidelines (UAAG)
   Overview, UAAG 1.0 - ?????????????????????????????
   ????????????????????????????
5. Accessible Rich Internet Applications (WAI-ARIA)
   Suite Overview ?????????????????????????????????
   ????? ???? AJAX, DHTML ???????????????
6. SVG, SMIL, MathML, ???

32
???? WCAG 2.0/TWCAG 2008

1. ??????????????????????????????????????????????????
   ??? ??????????????????????????????????????
   (Universal Design) ???????????????????????????????
   ?????????? (Human Diversity)
2. ?????????????????????????????????????????
   ?????????????????????? ???????????????????????????
   ????
3. ????????????????? ? ??? W3C ??????????????????????
   ??? ???????????????????????????????? ? ??? W3C
   ???
4. ????????????????????????????? ?????????????
   ??????????????????????????????????????????????????
   ??? ??????????????????????????????????????????????
   ?????????

33
END