Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web Accessibility Testing for AIR AIR Austin February 2012 Jim Thatcher Accessibility Consulting Austin, Texas.

Similar presentations


Presentation on theme: "Web Accessibility Testing for AIR AIR Austin February 2012 Jim Thatcher Accessibility Consulting Austin, Texas."— Presentation transcript:

1 Web Accessibility Testing for AIR AIR Austin February 2012 Jim Thatcher http://jimthatcher.com jim@jimthatcher.com Accessibility Consulting Austin, Texas Jim Allan http://tsbvi.edu jimallan@tsbvu.edu TSBVI Austin, Texas

2 Resources Resources and Slides at Resources list http://jimthatcher.com/testinghttp://jimthatcher.com/testing PowerPoint testingForAIR.ppttestingForAIR.ppt Most important for us and testing are Web Accessibility Toolbar http://tinyurl.com/wattoolbar http://tinyurl.com/wattoolbar Jims Favelets http://jimthatcher.com/faveletshttp://jimthatcher.com/favelets Testing for accessibility 2

3 Testing for Web Accessibility Web Accessibility: Web resources are accessible if people with disabilities can use them as effectively as non- disabled people (UT Accessibility Institute)UT Accessibility Institute So testing means user testing with disabled and non-disabled people? Instead there are standards and guidelines against which we can test Testing for accessibility 3

4 Testability – an example Contrast – 1990 (WCAG 1) Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. Contrast – 2010 (WCAG 2) Text and images of text have a contrast ratio of at least 4.5:1 … 3:1 for larger text (18pt or 14pt bold) (Level AA) A simple tool to measure contrast ratio Colour Contrast Analyser Tool Testing for accessibility 4

5 The Colour Contrast Analyser Tool Testing for accessibility 5

6 Testing Tools Colour Contrast Analyser http://tinyurl.com/colourcontrast http://tinyurl.com/colourcontrast Web Accessibility Toolbar http://tinyurl.com/wattoolbarhttp://tinyurl.com/wattoolbar Jim Ts Favelets http://jimthatcher.com/favelets/http://jimthatcher.com/favelets/ Toolbar for Firefox http://tinyurl.com/cptoolbarhttp://tinyurl.com/cptoolbar WAVE http://wave.webaim.orghttp://wave.webaim.org FireEyes http://tinyurl.com/jfireeyeshttp://tinyurl.com/jfireeyes Lists of tools http://www.w3.org/WAI/ER/tools/complete http://www.colostate.edu/Dept/ATRC/tools.htm http://www.webaim.org/articles/tools/ Testing for accessibility 6

7 Computer tests vs. Human Review Testable by a computer vs. requiring human judgment Only ~25% of accessibility errors can be detected by computers Many claim compliant/accessible because no errors reported by testing tool Testing all for Section 508 Standards discussed http://jimthatcher.com/testing1.htm Testing for accessibility 7

8 Computer tests ( about 12 of them ) (3) Missing alt on,, or with type=image (3) Empty alt on in without text, same for or with type=image (1) Form control with no title or label (or empty) (2) No title on frame or iframe (1) Sever-side image map (image link with ismap ) (1) Missing lang attribute for page (1) No HTML headings ( h1, h2, …) on page Testing for accessibility 8

9 The Issues from AIR Judging Form Judging form: http://www.knowbility.org/v/air- dev-resources/AIR-Austin/34/http://www.knowbility.org/v/air- dev-resources/AIR-Austin/34/ Core Accessibility 240 points (Basic Accessibility 70 points) Advanced Accessibility 120 Points Testing for accessibility 9

10 Core Accessibility – Inactive images 1. Inactive images (20 points). Use the alt attribute to provide a text alternative for non-linked (inactive) images. If the image is decorative or redundant, use alt= ; if the image conveys information the alt-text should convey the same information. … If the image consists of text, the alt-text should be the same. Each image without appropriate alt-text is an error. Testing – Use WAT (images show images) or a little simpler, Jims Favelets (Formatting images and larger images). Testing for accessibility 10

11 Core Accessibility – Active images 2. Active images (20 points). Use the alt attribute to provide a text alternative for every active image, including image links, image map hot spots, or input elements of type image. The text alternative must convey the function of the active element, the target of the link. If the image consists of text, the alt-text should be the same. Each active image without appropriate alt-text is an error. Testing – Use WAT (images show images mouse over for whether active) or the Favelets (Active images). Testing for accessibility 11

12 Core Accessibility - Links 3. Hypertext Links (20 points). Use descriptive link text to ensure that each link makes sense when it is read out of context. Make sure that links with same text on the same page go to same place. Each anchor with inadequate link text is an error. Testing – Use WAT (Doc Info List links) or inspection. Watch out for More Click Here, etc. Testing for accessibility 12

13 Core Accessibility – Semantic markup 4. Correct Markup/Parsing (20 points). Use semantic markup (block quotes, headings, lists, etc.) to properly represent the structure of the document. … Each instance of a structural tag used for formatting or content that should use semantic markup or that is not structured to specifications is an error. Testing – Use WAT (Structure Headings) and (Structure List Items) and (Structure Q/Blockquote). Testing for accessibility 13

14 Core Accessibility - Skip links 5. Skip links (10 points). Provide at least 1 and no more than 3 links at the top of the page which are either visible all the time or become visible on focus. These should jump to the main content or main navigation sections of the page. Intended for keyboard users, be sure to test them with the keyboard. Each page that does not meet these requirements is an error. Testing – Use the keyboard to test, simply: 1. Tab to skip link 2. Press enter to follow 3. Tab again; should be at first link after target of skip Or Jims Favelet – Skip links Testing for accessibility 14

15 Core Accessibility - Headings 6. Headings for navigation (10 points). There should be a heading at the top of each major section of a page; use only one h1 and heading levels should not skip ( h2 then h4 ). Each page that does not meet these requirements is an error. Testing – Use WAT (Structure Headings) and (Structure Headings Structure) or Jims Favelet, Headings Watch out for skipping levels (like h2 to h4 ) – Dont do it. Testing for accessibility 15

16 Core Accessibility - Landmarks 7. Landmark roles (10 points). Use ARIA landmark roles to label key sections that dont easily accommodate headings, like role="main", role=content info, role=navigation (use aria-Label if more than one navigation area) and role=search. Dont overdo it; time is taken announcing these. Each page that does not meet these requirements is an error. Testing – Use JAWS (; or Ctrl+Ins+; to list) Watch for correct labeling aria-labelledby for id of an on-screen element aria-label for text Or Jims favelet aria to display ARIA markup Testing for accessibility 16

17 Core Accessibility – Info in presentation 8. Information in presentation layer (20 points). Ensure that information conveyed through presentation (font, color) is also available in text. Any instance of information only available through presentation is an error. Testing – Inspection! Testing for accessibility 17

18 Core Accessibility - Contrast 9. Contrast (20 Points). The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text (14 pt bold or 18 point or larger): have a contrast ratio of at least 3:1. Each instance that does not follow these guidelines is an error Testing –Use the Colour Contrast Analyser tool WAT (Colour Contrast Analyser application) Testing for accessibility 18

19 Core Accessibility - Contrast 10. Keyboard (20 Points). All functionality must be accessible with the keyboard. Keyboard functionality should not require the use of mouse keys, the JAWS cursor, or anything similar. Any instance of an operation or a control that requires the mouse, unless a keyboard equivalent is readily available, the score is 0. Testing – Use the keyboard to be sure everything is available without a mouse. Combine with testing for #14 – focus indication. Testing for accessibility 19

20 Core Accessibility - Language 11. Language (20 Points). Identify the natural language of each page. Any failure is score of 0.is readily available, the score is 0. Testing: Use WAT – (Doc Info Show lang attributes) Testing for accessibility 20

21 Core Accessibility - Forms 12. Forms (20 points). Label all form controls. For example, use the label element when on-screen text prompt is adequate. Use the title attribute when on-screen text prompt is not adequate or is dispersed. Use fieldset/legend to group radio buttons and check boxes. Use aria-required for required fields. Use ARIA markup for error handling including aria-invalid on fields which have errors and use alerts or alert dialogs for announcing the errors. Each form control with inadequate labeling is an error. Testing: use WAT – (Structure Fieldset/Labels) and or use Jims Forms favelet and ARIA favelet Testing for accessibility 21

22 Core Accessibility – Data Tables 13. Data Tables (10 points). For tabular data, use the caption element and/or the summary attribute. Use the th element or use either th or td elements with the scope attribute to unambiguously identify all row and column headers. For complex data tables associate data cells with the appropriate headers using either headers/id or scope. Each instance of missing or incorrect table markup is an error. Testing: Use WAT – (Tables Show Data Tables) and or use Jims Data tables favelet Testing for accessibility 22

23 Core Accessibility – Focus Indication 14. Focus Indication (20 points). There must be a clear visual indication (highlight, dotted rectangle, change in color) when an object receives keyboard focus. Each instance of an object with no focus indication is an error. Testing: Use the keyboard and tab through every active object on each page. Testing for accessibility 23

24 Advanced Accessibility Flash 32. Flash (20 points). If Flash content is non-essential to the meaning of the page then assistive technology must be able to either tab through, or bypass the Flash object. If the content conveys information or responds to user input, assistive technology must be able to access the information and functionality. Each instance of missing information or function is an error. There must be a clear visual indication (highlight, dotted rectangle, change in color) when an object receives keyboard focus. Each instance of an object with no focus indication is an error. Testing: Inspection: Use the keyboard and test with JAWS Testing for accessibility 24

25 Advanced Accessibility Flash 33. Video (20 points). For video with soundtrack, provide synchronized captions. Provide an html text description for video without sound. In addition, provide synchronized audio description if the video cannot by understood from the soundtrack alone. If not synchronized, audio description must be provided as text with the video link. Each instance of inadequate accommodation is an error. Testing: Inspection. Testing for accessibility 25

26 Advanced Accessibility Flash 34. Audio (10 Points) Provide html text transcripts for audio files. Speakers must be identified. Each place where the text transcript substantially differs from the audio is an error. Testing: Inspection. Testing for accessibility 26

27 Advanced Accessibility Style Sheets 35. Alternative Style Sheets (10 Points) Provide at least two style sheets in addition to the default that can be conveniently selected by users, for example, to change font size, contrast, color schemes, printing, or displaying on small devices. Any page where the layout fails with any alternate style sheet or where the selection process fails is an error. Testing: Inspection. Testing for accessibility 27

28 Advanced Accessibility Scripting 36. Client Side Scripting (20 Points) All scripted functionality is available from the keyboard or there is a readily available keyboard accessible alternative. Scripted controls must identify themselves (name, role, state, value and properties) to assistive technology. Make sure that screen readers are aware of important content exposed with scripting. Each instance violating these requirements is an error. No points awarded if scripting is for switching style sheets, or scripting is peripheral to the purpose of the site. Testing: Inspection, keyboard. JAWS. Testing for accessibility 28

29 Advanced Accessibility ARIA Widgets 37. ARIA Widgets (20 Points) Use ARIA Best Practices to code special widgets including tab panels, accordion menus and modal windows. Testing: Jims ARIA favelet, inspection, keyboard, JAWS. Testing for accessibility 29

30 Advanced Accessibility Fluid layout 38. Fluid Layout (20 Points) Using browser magnification in at least two browsers, increase the magnification level to 200%. If content reflows to prevent the necessity of using a left-right scroll bar to access content and all content is available, 20 points. If screen does not reflow 0 points. Testing: inspection. Testing for accessibility 30


Download ppt "Web Accessibility Testing for AIR AIR Austin February 2012 Jim Thatcher Accessibility Consulting Austin, Texas."

Similar presentations


Ads by Google