首页 无障碍网页开发规范

无障碍网页开发规范

举报
开通vip

无障碍网页开发规范 ????????? ???????????? ?????????? 1 ???? ???? 1 ??????????? 2 ?????????????? 2 ??????????? 3 ?????? 6 ?????? 6 ??????? 7 ??????? 14 ??????? 14 ??????? 15 ????????? 21 ???? 24 ...

无障碍网页开发规范
????????? ???????????? ?????????? 1 ???? ???? 1 ??????????? 2 ?????????????? 2 ??????????? 3 ?????? 6 ?????? 6 ??????? 7 ??????? 14 ??????? 14 ??????? 15 ????????? 21 ???? 24 1 ???????????????? ????????????????? ???? ?????????????? W3C(World Wide Web Consortium)? ?? WAI(Web Accessibility Initiative)?????????????? ????????????????????????????????? ????????????????????????????????? ???????????????? ??????????????????????????????? ??? (visual disabilities)????? (hearing disabilities)?? ??? (physical disabilities)??????????? (cognitive or neurological disabilities)??????????????????? ???????????????????????????????? ???????(????????????????????????? ???????????????????)????????????? ????????????????????? ??????????????????????????????? ???????????????????????????????? ???????????????????????????????? ??????????????????????????????? ???????????????????????????????? ????????????????????????? ??????????????????????????????? ???????????????????????????????? ???????????????????????????????? ??????????????????????????????? 2 ??????????? ??????????????????????????????? ?????????????? ??????????????????????????? ?????????????????????????????? ????????? ??????????????? ????????????(???????????? ?????)????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ????????????????????????? ???????????????????????? ?? ????????????????? ???????????????????????? ??????????????????????????? ??????????????????????????? ?????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? 3 ?????????????????????? ??????????????????????? ???????????????????????? ????????????????????????? ????????????????Script??????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????? ?????????????????????????? ?????????????? ????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??? ????????????????????? ??????????? 4 ???????????????????????????? ?????????????????????????????? ????????????? ?????????? ???????????????????????? ??????????????????????????? ?????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????? ?????????? ????????????????????????? ????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ????????????????? W3C ??? SMIL ?? ?????????????????????????? ????????W3C ??? SVG ???????????? ??? Flash???????????????????? ?? ?????????? ????????????????????????? ??????????????????????????? 5 ?????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ?????????????????????????? ??????????????????????????? ??????????????????????????? ?????????????????????? ?????????? ????????????????????????? ?????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????? ?????????? ?????????????? ???: ?????? ?????????? ?????? ?????? ?????????? ???? ???: ?????? ??????????? ???? ?????? ?????? ?????????? ???? ???? ????????????? ????? ????? 6 ?????????????????????????? ?????? ????????????????????????????? ??????????????????? WAI??????????? ???????????????????????????????? ???????????????????????????????? ????????????????????? ???????? ???????????????????????????? ?????????????????????????????? ??????????????????????? ???????? ???????????????????????????? ????????????????????????????? ???????????????? ???????? ??????????????????????????? ?????????????????????????????? ????????????????????? ?????? ????????????????????????????? ???????????????????????????????? ??????????????????????????????? ???????????????????????????????? 7 ?????????????????? ??????????????(A?Double-A?Triple-A)?????? ???????????????????? 0?1? 2??????? ???????????????????????????????? ??????? ????????????????????????????? ??????????? WAI??????????????????? ???????????????????????????????? ?????????????????????????? ?????????????????????????? ???????????????????????????? ????????????????? ?????????????????????????? ???????????????????????????? ???????????????????????????? ????????????????????????????? ???????????????????????????? ??? ????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ??????????? 8 ?????????????????? ?????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ??????????????????? ?????????????????? ????????????????????? ?structural markup???????presentation markup?? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????? ????????????? ?????????????????????????? ???????????????????????????? ??????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? 9 ??????????????????????????? ???????????????????????????? ???????????????????? ????????????? ?????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ??????????????????????????? ??????????????????????????? ???????????????????????? ?????????????????????????? ???????????????????????????? ???????????????????????????? ?????? ??????????????????? ?????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ????????????????? ????????????????????? ?????????????????????????? 10 ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ????????????? ????????????????????? ?????????????????????????? ???????????????????????????? ???????????????????????????? ?????????????????????????? ?????????????????????????? ???????????????????????????? ????????????????????? ???????????? ?????????????????????????? ???????????—???????????????? ???????─???????????????????? ?????????????????????????? ???????????????????????????? ???????????????????????????? ??? ?????????????????????????? 11 ???????????????????????????? ????????????????????? 1? ????????????? ??????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????????????????????????? ???????(empty edit boxes)???????????? ???????????????????????????? ???????????????????????????? ??????????????????????????? ???????????????????????????? ???? ?????????????????????????? ???????????????????????????? ???????????????????????????? ?????????????????????????? ?????????????????????? ????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ?? W3C ?????????????????????? ??????????????????????????? ??????????????????????????? 12 ??????????? W3C ??????????PDF? Shockwave?????????????????????? ?????????????????????????? ?????????????? W3C ??????????? ??????????????????????????? ??????????????????????????? ?????????????????????????? ????????????????????????? ? PDF?PostScript?RTF ??????? W3C ??????? ? HTML?XML ?????????????????????? ??????????????????????????? ??????????????????????????? ???????????????? HTML ???????? ??? ????????????? ????????????????????(context) ???(orientation)????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ???????????? ???????????????? ???????????????????????? ??????????????????????????? ??????????????????????????? 13 ??????????????????????????? ??????????????????????????? ??????????? ???????????????? ????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????????????????????????? ??????? ????????????????????????? ?????????????????????????? ??????????????????????????? ?????????????????????????? ??????????????????????????? ??? ??????? ?????????????????????????????? ???????????????????? HTML ??????????? ???????????????????????????????? ????????????????? ????????? ????????????????? X999999 ??????? ?????????? ????????? ????????????????????????? 14 ? HTML ??????????? H????? ??? H ??????? XML ? SVG ????????????? ????????X? S? ?????????? ??????????????????? ????? 1|2|3 ?????????????(Guideline) ??????????????????? ????? 01|02|03|04|05|06|07|08|09|10|11|12| 13|14 ??????????(Status) ????????????????????????? ???????????????????????? ????????????????????????? ????????????????????????? ???(Machine Identifiable)??????????? ???????????????????????? ????????????????????(Machine Checkable)???????????????????? ????????????????????????? ????????????????????????? ?????????? 0?????/????(Machine Identify/Machine Check) 1?????/????(Machine Identify/Human Check) 2?????/????(Human Identify/Human Check) ????? 0|1|2 15 ???????????????????? / ???? (Human Identify/Machine Check)????????????????????? ?????????????? ???????????????? ????????????????????????????? ????????????????? 00 ??? ????? 00|01|02|03| . . . ??????? ?????????????????????????? 1.1 H101000 -???????????? 1.2 H101001 -??applet???????? 1.3 H101002 -??object???????? 1.4 H101003 -?????????????????? 1.5 H101004 -???????????????? 1.6 H101105 -?????????????????????? ????????? 1.7 H101106 -?ALT ????????? 150 ???????? ????????? 1.8 H101007 -?? LONGDESC ?????????(???? D ???????)???? LONGDESC ??? 1.9 H101108 -?????????????????????? ?(???longdesc??) 1.10 H101109 -????????????? 1.11 H101210 -??????????ASCII ???? 1.12 H101111 -??????????????????? 1.13 H101112 -????????????????????? ????????? 1.14 H101213 -??????????????????? 1.15 H101214 -????????????????????? 16 ????? 1.16 H301015 -????????????????????? ????????? ?????????????????? 2.1 H102100 -?????????????????????? ????????? 2.2 H202101 -???????????????????? ?????????????????? 3.1 H203200 -??????????(? MathML)?????? (??????)??????????? 3.2 H203001 -???????????????? HTML ?? 3.3 H203002 -? DOCTYPE ???????????????? HTML ???? 3.4 H203203 -????????????????????? 3.5 H203004 -???????(?%)??????(???) 3.6 H203005 -?????????????? 3.7 H203106 -????header?????????? 3.8 H203107 -??????????(?li?ul)?????? ??????????????????? 3.9 H203108 -?? Q? BLOCKQUOTE ???????????? ????? 3.10 H203209 -? Q ? BLOCKQUOTE ???????? ????????????? 4.1 H104200 -??????????????? 4.2 H304201 -??ABBR ?ACRONYM ???????????? ????? 4.3 H304002 -???????????????? 17 ????????????? 5.1 H105100 -?????????????????????? ???????? 5.2 H105101 -???????/?????????????? ???????????? 5.3 H205102 -?????????????????????? ?? 5.4 H205103 -?????????????????????? (?th??)?????????? 5.5 H305004 -???????????(?summary??) 5.6 H305105 -??????????? 5.7 H305106 -?????????????????? ??????????????????? 6.1 H106100 -?? CSS ????????????????? ??????? 6.2 H106001 -??????? HTML ?? 6.3 H106102 -?? Script???????? Script???? 6.4 H106103 -?????????????????????? ????? 6.5 H206104 -?????????????????????? ? 6.6 H206005 -????????????????? ????????????????????? 7.1 H107200 -???????????????? 7.2 H207001 -????blink?????? 7.3 H207002 -????marquee?????? 7.4 H207103 -??????gif?? 7.5 H207004 -??????????????? 18 7.6 H207005 -??????????? ????????????????????? 8.1 H208100 -??scripts?applets?objects??????? ????????? ???????????? 9.1 H109000 -????????????????????? ?? 9.2 H209201 -?????????????????????? 9.3 H209002 -????????????????? 9.4 H309103 -?????? Tab?????????????? ?????? 9.5 H309204 -?????????????????? 9.6 H309105 -?????????????????? ????????????? 10.1 H210100 -????????????????????? ??????? 10.2 H210101 -????script?????????????? ?????????????? 10.3 H210102 -????????????????????? ? 10.4 H310103 -????????????????????? ??????? 10.5 H310004 -?????????????? 10.6 H310005 -??????????????? ?????????????????????? 11.1 H111200 -????????????????????? ??????? 11.2 H211201 -???????????????? 19 11.3 H211202 -??????? HTML ?? 11.4 H311203 -????????????????????? ? ????????????? 12.1 H112000 -??????????? 12.2 H212101 -????????????????????? ????? 12.3 H212102 -???????????? 12.4 H212103 -?????????? FIELDSET ? LEGEND ?? ??????? 12.5 H212204 -??????????????????? 12.6 H212105 -????????? LABEL ?????? ???????????????? 13.1 H213200 -????????????????????? ??? 13.2 H213101 -??????????????????? 13.3 H213202 -????????????????????? ?? 13.4 H213203 -??metadata??????????????? ??? 13.5 H213004 -??????? 13.6 H213205 -???????????????? 13.7 H213206 -???????????????? 13.8 H313207 -????????????????????? ? 13.9 H313208 -???????????????? 13.10 H313209 -????????????????????? ????? 13.11 H313210 -????????????????????? 20 ???????????????????? 13.12 H313211 -????????????????????? ???? 13.13 H313212 -?metadata??????????????? ??????? 13.14 H313213 -????????ASCII ???? ???????????????? 14.1 H114200 -?????????????? 14.2 H314201 -????????????????? 14.3 H314202 -??????????????? 21 ????????? A Accessible ??? ACSII art ACSII ???? Assistive technology ???? Authoring tool ???? B Backward compatible ???? Braille ?? braille display, ????? C Cascading Style Sheet (CSS) ?????? cognitive disability ???? Content developer ????? Context ??? D Device independent ????? Document Content, Structure, and Presentation ???????? ??? structural element???? presentation element???? Dynamic HTML (DHTML) ?? HTML E Equivalent ?? H 22 hearing disabilities ???? Human Check ???? Human Checkable ????? Human Identify ???? Human Identifiable ????? Hypertext Markup Language (HTML) ??????? I Image ?? Image map???? L Linearized table ????? Link text ???? M Machine Check ???? Machine Checkable ????? Machine Identify???? Machine Identifiable ????? N Natural Language ???? Navigation Mechanism ???? navigation bars ??? neurological disability ???? O orientation ?? P 23 physical disability ???? presentation markup???? S SMIL (Synchronized Multimedia Integration Language) ?????????? site maps ???? Screen magnifier ????? Screen reader ????? Structural markup ???? Style sheets ???? SVG (Scalable Vector Graphics) ???????? T Tabular information ???? U User agent ?????? V visual disability ???? W WAI(Web Accessibility Initiative) ?????????? W3C(World Wide Web Consortium) ??????? X Extensible Markup Language (XML) ??????? 24 ??????? ??????????????W3C(World Wide Web Consortium)????????? ??WAI(Web Accessibility Initiative)???????????????????????? ????? ??(Guidelines) 1.????????? 1.0 (Web Content Accessibility Guidelines 1.0) http://www.w3.org/TR/WCAG10/ (5-May-1999) 2.?????????1.0(Authoring Tool Accessibility Guidelines 1.0) http://www.w3.org/WAI/AU/ (3 February 2000) 3.???????????1.0(User Agent Accessibility Guidelines 1.0) http://www.w3.org/WAI/UA/ (16 Oct 2002) 4.????????????(XML Accessibility Guidelines) http://www.w3.org/TR/xag (3 October 2002) ???(Checklists) 1.?????????? 1.0 (Checklist for Web Content Accessibility Guidelines 1.0) http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html (5 May 1999) 2.??????????1.0(Checklist for Authoring Tool Accessibility Guidelines 1.0) http://www.w3.org/TR/ATAG10/atag10-chktable.html (3 February 2000) 3.???????????? 1.0(Checkpoints for User Agent Accessibility Guidelines 1.0) http://www.w3.org/TR/2002/PR-UAAG10-20021016/uaag10-chktable.ht ml (16 October 2002) ????(Techniques) 1.???????????? 1.0 (Techniques for Web Content Accessibility Guidelines 1.0) http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/ (6 November 2000) 25 2.?????????????? 1.0 (Core Techniques for Web Content Accessibility Guidelines 1.0) http://www.w3.org/TR/WCAG10-CORE-TECHS/ (6 November 2000) 3.???????????? 1.0(Techniques for Authoring Tool Accessibility Guidelines 1.0) http://www.w3.org/TR/2002/NOTE-ATAG10-TECHS-20021029/ (29 October 2002) 4.?????????????? 1.0(Techniques for User Agent Accessibility Guidelines 1.0) http://www.w3.org/TR/UAAG10-TECHS/ (16 October 2002) 5.???????????(Techniques for Accessibility Evaluation and Repair) http://www.w3.org/TR/AERT (26 April 2000) 6.???????????????(Accessibility Features of SMIL) http://www.w3.org/TR/SMIL-access/ (21 September 1999) 7.????????????(Accessibility Features of CSS) http://www.w3.org/TR/CSS-access (4 August 1999) 8.???????????????(Accessibility Features of SVG) http://www.w3.org/TR/SVG-access/ (7 August 2000) 9. ?????????????(Accessibility improvements in HTML 4.0) http://www.w3.org/WAI/References/HTML4-access (8 November 2000) 26 ?????????????? ??????????????? ?? ???????????????????????????????? ??? ???????????????????????????????? ???????? ??? ????H101000 ???????????? ????1.1 H101000 ???????????? ?? ?? Bobby???????????????? HTML ???????? ?????????????????????? ? ? ?????? ????? ?? ???? ?? 1 H101107 ??longdesc?? ???????(? D?? ?)????longdesc??? H101007 ? 1?? 0????????? ?/?????????? longdesc?????????? ??????????? ????? 2 H101212 ???????? ???????????? ?????????? H101112 ? 2?? 1????????? ?/?????????? ??ismap???????? ????????? ????? 3 H301215 ???????? ???????????? ?????????? H301015 ? 2?? 0????????? ?/?????????? ??usemap????????? ?????? ????? 4 H202201 ???????? ???????????? H202101 ? 2?? 1????????? ?/????????????? ??bgcolor?color?? ????????????? ?? ????? 5 H203102 ?doctype?? ????????????? ? HTML ???? H203002 ? 1?? 0????????? ?/????????????? ???????? (Bobby??)? ????? 6 H203105 ?????????????? H203005 ? 1?? 0????????? ?/????????

?

????? 27 ??????????

?? ??

??

???

? ???? 7 H304202 ???????? ???????? H304002 ? 2?? 0????????? ?/?????????? ?????lang??????? ????????????? (Bobby??)? ????? 8 H305104 ???????? ???(?summary??) H305004 ? 1?? 0????????? ?/???????????? ????summary?? ??(bobby??)? ????? 9 H106002 ?? Script??? ????? Script???? H106102 ? 0?? 1????????? ?/????????????? ?