1. 1 Making an Accessible Web Site Sec 508 Standards – How Tos Evelyn Li University of Wisconsin-Fox Valley

2. 2 Why Do We Want to Do It? The goal is to create accessible web pages that can be useable by anyone, even if they are using assistive technology, such as screen readers, voice recognition software, alternative keyboards, and Braille displays. The goal is to create accessible web pages that can be useable by anyone, even if they are using assistive technology, such as screen readers, voice recognition software, alternative keyboards, and Braille displays. It is required by UWC and campus policies - www.uwc.edu/cio/Web Page Guidelines.htm & www.fox.uwc.edu/iit/publications/itwebpol.html It is required by UWC and campus policies - www.uwc.edu/cio/Web Page Guidelines.htm & www.fox.uwc.edu/iit/publications/itwebpol.html www.uwc.edu/cio/Web Page Guidelines.htm www.fox.uwc.edu/iit/publications/itwebpol.html www.uwc.edu/cio/Web Page Guidelines.htm www.fox.uwc.edu/iit/publications/itwebpol.html

3. 3 What Are the Disabilities That We Need to Address They may not be able to see, hear, move, or may not be able to process some types of information easily or at all. They may not be able to see, hear, move, or may not be able to process some types of information easily or at all. They may have difficulty reading or comprehending text. They may have difficulty reading or comprehending text. They may not have or be able to use a keyboard or mouse. They may not have or be able to use a keyboard or mouse. They may have a text-only screen, a small screen, or a slow Internet connection. They may have a text-only screen, a small screen, or a slow Internet connection.

4. 4 They may not speak or understand fluently the language in which the document is written. They may not speak or understand fluently the language in which the document is written. They may be in a situation where their eyes, ears, or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.). They may be in a situation where their eyes, ears, or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.). They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system. They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.(http://www.w3.org/TR/WAI-WEBCONTENT/#Introduction)

5. 5 Sec. 508 Standards Sec. 508 refers specifically to Federal Rehabilitation Act’s Sec. 508. Sec. 508 refers specifically to Federal Rehabilitation Act’s Sec. 508. It is an amendment to the Workforce Rehabilitation Act of 1973. It is an amendment to the Workforce Rehabilitation Act of 1973. It requires that electronic and information technology that is developed or purchased by the Federal Government, like UW- Colleges, is accessible by people with disabilities. It requires that electronic and information technology that is developed or purchased by the Federal Government, like UW- Colleges, is accessible by people with disabilities. (http://www.section508.gov/index.cfm?FuseAction=Content&ID=3) http://www.section508.gov/index.cfm?FuseAction=Content&ID=3

6. 6 Sec. 508 Standards that Affect Web Developers § 1194.22 Web-based intranet and Internet information and applications. Read the handouts – Web Accessibility How-to for detailed Information.

7. 7 (a) A text equivalent for every non- text element shall be provided (e.g., via "alt", "longdesc", or in element content). (a) A text equivalent for every non- text element shall be provided (e.g., via "alt", "longdesc", or in element content). (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

8. 8 (d) Documents shall be organized so they are readable without requiring an associated style sheet. (d) Documents shall be organized so they are readable without requiring an associated style sheet. (e) Redundant text links shall be provided for each active region of a server-side image map. (e) Redundant text links shall be provided for each active region of a server-side image map. (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

9. 9 (g) Row and column headers shall be identified for data tables. (g) Row and column headers shall be identified for data tables. (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. (i) Frames shall be titled with text that facilitates frame identification and navigation. (i) Frames shall be titled with text that facilitates frame identification and navigation.

10. 10 (j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. (j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text- only page shall be updated whenever the primary page changes. (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text- only page shall be updated whenever the primary page changes.

11. 11 (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

12. 12 (g) Row and column headers shall be identified for data tables. (g) Row and column headers shall be identified for data tables. (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. (i) Frames shall be titled with text that facilitates frame identification and navigation. (i) Frames shall be titled with text that facilitates frame identification and navigation.

13. 13 (j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. (j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text- only page shall be updated whenever the primary page changes. (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text- only page shall be updated whenever the primary page changes.

14. 14 (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

15. 15 (m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). (m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).

16. 16 (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

17. 17 (o) A method shall be provided that permits users to skip repetitive navigation links. (o) A method shall be provided that permits users to skip repetitive navigation links. (p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. (p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

18. 18 10 Web Accessibility Guidelines to Comply Guideline 1 Creating accessible images http://wwwtest.doit.wisc.edu/accessibility/training/class/standards /images.htm Creating accessible images http://wwwtest.doit.wisc.edu/accessibility/training/class/standards /images.htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standards /images.htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standards /images.htm Alt-text and D-link Alt-text and D-link Alt-text D-link Alt-text D-link Sec 508 Standard (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

19. 19 10 Web Accessibility Guidelines Guideline 2 Provide equivalent alternatives to auditory and visual content http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/multi media.htm Provide equivalent alternatives to auditory and visual content http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/multi media.htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/multi media.htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/multi media.htm Sec 508 Standard (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. (m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). (m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).

20. 20 10 Web Accessibility Guidelines Sec 508 Standard (e) Redundant text links shall be provided for each active region of a server-side image map. (e) Redundant text links shall be provided for each active region of a server-side image map.text linkstext links (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. (o) A method shall be provided that permits users to skip repetitive navigation links. (o) A method shall be provided that permits users to skip repetitive navigation links.skip repetitive navigation linksskip repetitive navigation links Guideline 3 Provide an easy-to-navigate and consistent layout Provide an easy-to-navigate and consistent layout Use appropriate heading styles http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/navigation.htm Use appropriate heading styles http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/navigation.htmheading styles http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/navigation.htmheading styles http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/navigation.htm

21. 21 10 Web Accessibility Guidelines Guideline 4 Use standard colors and format for text http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/fo rmatting.htm Use standard colors and format for text http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/fo rmatting.htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/fo rmatting.htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/fo rmatting.htm Sec 508 Standard (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. (d) Documents shall be organized so they are readable without requiring an associated style sheet. (d) Documents shall be organized so they are readable without requiring an associated style sheet.

22. 22 10 Web Accessibility Guidelines Guideline 5 Provide equivalents for scripts and applets http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/script s.htm Provide equivalents for scripts and applets http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/script s.htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/script s.htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/script s.htm Sec 508 Standard  (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

23. 23 10 Web Accessibility Guidelines Guideline 6 Accessible data forms http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/forms. htm Accessible data forms http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/forms. htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/forms. htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/forms. htm Sec 508 Standard  (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.  (p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

24. 24 10 Web Accessibility Guidelines Guideline 7 Accessible data tables http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/tables.htm Accessible data tables http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/tables.htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/tables.htm Lynx Text Viewer Lynx Text Viewer Lynx Text Viewer Lynx Text Viewer Sec 508 Standard (g) Row and column headers shall be identified for data tables. (g) Row and column headers shall be identified for data tables. (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

25. 25 10 Web Accessibility Guidelines Guideline 8 Accessible Frames http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/ frames.htm Accessible Frames http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/ frames.htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/ frames.htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/ frames.htm Sec 508 Standard  (i) Frames shall be titled with text that facilitates frame identification and navigation.

26. 26 10 Web Accessibility Guidelines Guideline 9 Do not use flicking or scrolling text http://wwwtest.doit.wisc.edu/accessibility/training/class/standard s/flicker.htm Do not use flicking or scrolling text http://wwwtest.doit.wisc.edu/accessibility/training/class/standard s/flicker.htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standard s/flicker.htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standard s/flicker.htm Sec 508 Standard  (j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

27. 27 10 Web Accessibility Guidelines Guideline 10 Provide text-only or PDF format for a graphical page http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/te xtonly.htm Provide text-only or PDF format for a graphical page http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/te xtonly.htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/te xtonly.htm http://wwwtest.doit.wisc.edu/accessibility/training/class/standards/te xtonly.htm Sec 508 Standard (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

28. 28 Basic Rules to Follow If you can't make a page accessible, construct an alternate accessible version. If you can't make a page accessible, construct an alternate accessible version. Do not use color text to convey your information. Do not use color text to convey your information. Use ALT tag to provide equivalent alternatives for images. Use ALT tag to provide equivalent alternatives for images. Use a client-side image map rather then a server side image map. Use a client-side image map rather then a server side image map. Use appropriate paragraph styles for headings and lists. Use appropriate paragraph styles for headings and lists.

29. 29 Basic Rules to Follow Continued… Use longdesc attribute or short description to summarize the graphs and charts. Use longdesc attribute or short description to summarize the graphs and charts. Use meaningful text for hyperlinks, rather than “click here”. Use meaningful text for hyperlinks, rather than “click here”. Provide alternative content for video and audio contents. Provide alternative content for video and audio contents. Avoid using table for column layout. If you must do so, make sure the contents are organized in a liner order. Avoid using table for column layout. If you must do so, make sure the contents are organized in a liner order.

30. 30 Basic Rules to Follow Continued… Use of frames is discouraged. Use of frames is discouraged. Identify human language used in the Web page. Identify human language used in the Web page. Avoid using absolute unit, but relative unit in the HTML tags. Avoid using absolute unit, but relative unit in the HTML tags. Use validation tool to check your site. Use validation tool to check your site. Date the page and provide contact info. Date the page and provide contact info.

31. 31 Manual Check List Disable the multimedia features on your browser Disable the multimedia features on your browser View the pages by disabling the style sheet View the pages by disabling the style sheet Navigate your page with the Tab key Navigate your page with the Tab key Test the page by printing it in black and white Test the page by printing it in black and white

32. 32 Validation Tools Bobby http://bobby.watchfire.com/bobby/html/en/index.jsp Bobby http://bobby.watchfire.com/bobby/html/en/index.jsp http://bobby.watchfire.com/bobby/html/en/index.jsp LIFT http://www.usablenet.com/ LIFT http://www.usablenet.com/ http://www.usablenet.com/ Lynx Viewer - Lynx text Viewer http://www.delorie.com/web/lynxview.html Lynx Viewer - Lynx text Viewer http://www.delorie.com/web/lynxview.html http://www.delorie.com/web/lynxview.html JAWS - Screen Reader http://www.freedomscientific.com/fs_products/softw are.asp JAWS - Screen Reader http://www.freedomscientific.com/fs_products/softw are.asp http://www.freedomscientific.com/fs_products/softw are.asp http://www.freedomscientific.com/fs_products/softw are.asp Table Builder http://www.accessify.com/tools-and- wizards/accessible-table-builder_step1.asp Table Builder http://www.accessify.com/tools-and- wizards/accessible-table-builder_step1.asp http://www.accessify.com/tools-and- wizards/accessible-table-builder_step1.asp http://www.accessify.com/tools-and- wizards/accessible-table-builder_step1.asp

33. 33 Making Accessible Tables Using table to layout the page is discouraged. Using table to layout the page is discouraged. Table should be used for presenting data information. Table should be used for presenting data information. Table cells are read in lineal direction Table cells are read in lineal direction 123 456 789

34. 34 Screen Reader & Tables "Table with 3 columns, 3 rows. Heading1. Heading 2. Heading 3. R1C1. R1C2. R1C3. R2C1. R2C2. R2C3." "Table with 3 columns, 3 rows. Heading1. Heading 2. Heading 3. R1C1. R1C2. R1C3. R2C1. R2C2. R2C3." “Heading 1 R1C1. Heading2 R1C2. Heading 3 R1C3. Heading 1 R2C1. Heading2 R2C2. Heading 3 R2C3.” “Heading 1 R1C1. Heading2 R1C2. Heading 3 R1C3. Heading 1 R2C1. Heading2 R2C2. Heading 3 R2C3.” Heading 1 Heading 2 Heading 3 R1C1R1C2R1C3 R2C1R2C2R2C3

35. 35 Accessible Data Table There is a caption for the table There is a caption for the table First rows are headers First rows are headers If accessible, the table should read: “Table with 3 columns, 3 rows. Caption: Men’s Tennis. Heading Name, heading grade, heading school. Name Johnny, Grade 9, School North High. Name Eric, Grade 8, School West High.” If accessible, the table should read: “Table with 3 columns, 3 rows. Caption: Men’s Tennis. Heading Name, heading grade, heading school. Name Johnny, Grade 9, School North High. Name Eric, Grade 8, School West High.” NameGradeSchool Johnny9 North High Eric8 West High Men’s Tennis