508 Compliance Testing for Example Site

download 508 Compliance Testing for Example Site

of 12

  • date post

    23-Jan-2018
  • Category

    Documents

  • view

    67
  • download

    0

Embed Size (px)

Transcript of 508 Compliance Testing for Example Site

  1. 1. 508 Compliance Testing for Example Site
  2. 2. 1 Contents 1 Contents.................................................................................................................................2 2 Tasks by Page ......................................................................................................................4 2.1 Code Set Management............................................Error! Bookmark not defined. 3 Required Fields.....................................................................................................................4 4 Color.......................................................................................................................................4 5 No CSS (disabled) ...............................................................................................................4 6 Headers .................................................................................................................................5 7 Links .......................................................................................................................................5 8 Messages ..............................................................................................................................5 9 Forms .....................................................................................................................................5 9.1 Input Fields .....................................................................................................................6 9.2 Checkboxes and Radio Buttons ..................................................................................6 9.3 Form Validation..............................................................................................................6 10 Tabbing ...............................................................................................................................6 11 Description and Help Text................................................................................................6 11.1 Aria-labelledby............................................................................................................7 11.1.1 Example: ..............................................................................................................7 11.1.2 CODE SNIPPET:................................................................................................7 12 Navigation...........................................................................................................................7 12.1 Main Navigation..........................................................................................................7 12.2 Skip Navigation...........................................................................................................7 13 Frames................................................................................................................................8 14 Tables..................................................................................................................................8 14.1 Layout Tables .............................................................................................................8 14.2 Data Tables.................................................................................................................8 14.3 Complex Tables .........................................................................................................9 15 Docs.....................................................................................................................................9 16 Plugins and Scripts ...........................................................................................................9 17 Dynamic Media..................................................................................................................9 17.1 Audio..........................................................................................................................10 17.2 Video..........................................................................................................................10 17.3 Moving Images .........................................................................................................10 18 Images...............................................................................................................................10 18.1 Icons...........................................................................................................................10 18.2 Image Maps ..............................................................................................................10 19 User Guide .......................................................................................................................11 19.1 Tour ............................................................................................................................11 19.2 Keyboard Shortcuts .................................................................................................11 20..................................................................................................................................................11 21 Resources ........................................................................................................................12 21.1 Rationale and Glossary...........................................................................................12 21.2 Index...........................................................................................................................12
  3. 3. 2 Tasks by Page 2.1 Page Sample 1. Add a close button to comment dropdowns that is keyboard useable 3 Required Fields 1. Are all cues for filling out the form available to users of assistive technology, e.g. mandatory fields, help boxes, error messages? 14.2 2. Required fields a. Check that any required fields have (*) next to the label b. At the top right of any form page with required fields is (*) indicates required fields 4 Color 1. Test color to font ratio 4.5:1 ratio (also test removing images to make sure alt text still passes) a. Logo fails without image the text is unreadable b. Use high color contrast for images of text. If images of text are used, a text equivalent of the image must also be provided. 2. Distinguish links from surrounding text with sufficient color contrast. 3. Are links distinguished from surrounding text with sufficient color contrast and is additional differentiation provided when the link receives focus, e.g. it becomes underlined? 3.5 5 No CSS (disabled) 1. Ensure that the color to font color ratio is maintained. 2. Color and font information should be rendered in the browsers default CSS. 3. Headings, Paragraphs and Lists should be obvious and sensible. 4. Page content order should make sense. 5. Text other than logos and banners should be rendered as text rather than images. 6. Content that was not visible with CSS should continue to be invisible without CSS. 7. Any content or functionality that was provided by CSS via mouse actions must also be provided through keyboard-triggered event handlers. 8. With CSS disabled, is color and font information rendered in the browser's default CSS? -4.1 9. With CSS disabled, are headings, paragraphs, and lists obvious and sensible? 4.2 10.With CSS disabled, does the order of the page content make sense as read? 4.3 11.With CSS disabled, is most text, other than logos and banners, rendered in text rather than images? 4.4 12.With CSS disabled, does any content that was invisible before stay invisible? -4.5
  4. 4. 13.With CSS disabled, is any content or functionality provided by the CSS through mouse action also provided through keyboard-triggered event handlers? - 4.6 14.If a skip link is provided, does the anchor element contain text content that is visible with CSS disabled? 15.2 15.If a skip link is provided and it is hidden with CSS, is it available to users of assistive technology, e.g. not using the display:nonemethod? 15.3 6 Headers 1. Are heading elements used to convey logical hierarchy and denote the beginning of each section of content? 7 Links 1. Tab to links make sure on focus they are underlined unless navigation links or images 8 Messages 1. Check all messages to make sure they make sense 2. Check that all messages are above titles but after user guide/breadcrumbs 3. All messages of the same type (e.g. error) should be in one box. 4. If more than one error they should be in a bulleted or numbered list. 5. Before messages (but after icons) add example: (message type) Error 6. Add system timeout message when time remaining is 1min 7. See 16.4 and 16.8 8. Use descriptive error messages. Do form error messages identify the error(s) to the user and describe them to the user in text? 9. Are all cues for filling out the form available to users of assistive technology, e.g. mandatory fields, help boxes, error messages? 14.2 10.Do form error messages identify the error(s) to the user and describe them to the user in text?14.6 11.Is enough time provided to allow users to read and interact with content? 15.5 9 Forms 1. Is placeholder text, if used, NOT redundant or distracting to users of assistive technology? - 14.5
  5. 5. 9.1 Input Fields 1) All input fields should have a focus area around them when tabbed to 2) Does each appropriate input element or form control have an associated and visible label element or title attribute? 14.1 3) Are all cues for filling out the form available to users of assistive technology, e.g. mandatory fields, help boxes, error messages? 14.2 9.2 Checkboxesand Radio Buttons 1. Are logically-related groups of form elements identified with appropriate fieldset and legend elements? 9.3 Form Validation 1. All fields marked as required 2. Dates typed in format (dd/mm/yyyy or mm/dd/yyyy as in 21/02/2015) 3. P