While you re waiting, you can set up your computer by installing these programs

Size: px

Start display at page:

Download "While you re waiting, you can set up your computer by installing these programs"

Cornelia Miller
6 years ago
Views:

1 Windows Chrome While you re waiting, you can set up your computer by installing these programs WAVE extension NVDA (screen reader) nvda-project.org/ webaim.org/articles/nvda/ NVDA works best with Firefox aviewer (optional) Mac Chrome WAVE extension Keyboard settings Control + F7 > Check Press Tab to highlight each item on a webpage VoiceOver (screen reader) webaim.org/articles/ voiceover/

2 Hands-on Web Accessibility Evaluation Jon Whiting webaim.org

3 Accessibility > Compliance

4 Accessibility is about the human experience

5 Only humans can adequately evaluate true accessibility

6 3 levels of Evaluation Beginning/Anyone Keyboard, WAVE errors, zoom, visual scan Intermediate WCAG 2.0, screen reader testing, forms and errors, contrast Advanced

7 Beginning Evaluation

8 Beginning concepts Basic HTML accessibility Missing alternative text, no headings, no labels Keyboard accessibility Scannable issues Click here, no page title, no captions, etc.

9 wave.webaim.org

10 WAVE for beginners 1. Look for red icons 2. For details, Click Icon > More information 3. Maybe try No Styles?

11 + (and sometimes spacebar and arrow keys)

12 Some tweaking required on Mac Control + F7 to toggle keyboard settings

13 Keyboard navigation Navigate the site using only the keyboard (Tab, Shift + Tab, Enter, etc.). Is all functionality available? Make sure the navigation order is logical. Is a visible keyboard focus indicator/ outline present? Are there things that only work with a mouse (e.g., rollover menus)?

14 Scan the page Unique and descriptive page <title> Generic link text (e.g., click here ) Captioned multimedia Contrast/color reliance?? Lower impact Potential for confusion

15 Accessibility cheatsheet

16 Intermediate Evaluation

17 Intermediate concepts WCAG 2.0 HTML accessibility Alternative text, tables, headings, labels, etc. Screen reader Some ARIA concepts landmarks, labeling, tabindex

18 Intermediate WAVE features Features Alerts Semantic/Structural elements

19 Intermediate WAVE features No Styles Heading outline Contrast Chrome extension Code panel?

20 Use a checklist

21 Use a checklist WCAG 1.0 Section 508 webaim.org/standards/508/checklist/ WCAG webaim.org/standards/wcag/checklist/ Customized

25 WCAG 2.0 Principles (POUR) > Guidelines > Success Criteria Supporting materials Understanding... How to Meet... Sufficient Techniques, Advisory Techniques, and Failures

26 Normative Required for conformance Principles, Guidelines, and Success Criteria are normative Conformance (and levels) based on Success Criteria

27 Non-normative For information purposes and not required for conformance AKA informative Supporting materials are non-normative

30 Intermediate keyboard navigation Be careful when default form control behavior is modified (auto-tabbing, jump select menus, etc.). Check dialog boxes. Modal dialogs should wrap to the top when they reach the end. Non-modal dialogs should auto-close. Esc should usually close menus, dialogs, etc.

31 Check skip link Is a "skip navigation" link available? Does it function correctly? Is it visible on focus? Tab to link > Enter > Tab again

32 Form error feedback Submit the form empty and look for error messages. Are they accessible? Errors at the top Alerts receive focus Errors are inline

33 Visual scan Page language (e.g., <html lang="en">) Shape, size, location Animating or updating content Strobing content Responsive design Page zoom Page width Images as text Underlined links Text in images

34 Contrast and color reliance webaim.org/resources/contrastchecker/ Use Colorzilla or Firebug (or both) to find color values Contrast ratios are not perfect Contrast color reliance Non-underlined links: 3:1 contrast and underline on focus/hover

35 Enlarge text Enlarge the text size in your web browser to ~150%. Note that WCAG 2.0 requires 200%. Zoom passes WCAG requirement. Is the page readable and usable? Is horizontal scrolling minimized?

36 Zoom page/enlarge text Windows Ctrl and + or Enlarge text only (Firefox) View > Zoom > Zoom Text Only Enlarge Text (IE)- View > Text size Mac Command ( ) and + or - Enlarge text only - View > Zoom Text Only

37 Screen reader Focus on navigation, forms, document structure, and dynamic content WebAIM tutorials for JAWS, NVDA, and VoiceOver Try testing without the mouse or monitor Don t worry about pronunciation Sometimes it's the screen reader's fault

38 Basic screen reader shortcuts Command NVDA/JAWS VoiceOver Special key Insert control + option = VO Read one line Down arrow VO + Arrow Read all Insert + down arrow VO + A Stop reading Ctrl Control Links/Form fields Tab tab Headings H VO + command + H Rotor VO + U + Arrow keys Landmarks/Regions? D (NVDA), R (JAWS) Rotor

39 Common combinations NVDA + Firefox (My favorite) Focus Highlight Addon JAWS + IE (Most typical experience) VoiceOver + Safari (No application mode) Chrome/ChromeVox is not recommended Open the screen reader, then the browser

40 Windows High Contrast??

41 Windows High Contrast??

42 Advanced Evaluators

43 Advanced concepts Accessibility APIs DOM Advanced ARIA concepts Live regions, errors (aria-invalid role=alert, etc.), widget design patterns, etc. Screen reader application/reading modes Multiple screen readers/browsers Mobile

44 Advanced WAVE features HTML5 and ARIA Code panel

45 Advanced screen reader shortcuts Command NVDA/JAWS VoiceOver Special key Insert (Caps Lock) control + option = VO Heading levels 1-6 Rotor Buttons B VO + Arrow Forms F Control Table Cells Ctrl + Alt + arrows tab Toggle Application Mode NVDA + Spacebar JAWS + Z Landmarks/Regions D (NVDA), R (JAWS) Rotor No Application Mode!

46 Advanced screen reader testing Application/reading mode NVDA + Spacebar JAWS + Z Tables? Ctrl + Arrow keys Use buttons and links appropriately Enter vs. Spacebar Aria-expanded and aria-haspopup

47 Other evaluation tools Browser inspector Inspect and edit aviewer Accessibility APIs Others??

48 Personal methodology In Chrome WAVE extension Keyboard testing better focus outline, tabindex=0 Visual scan In Firefox NVDA JAWS as needed Inspect

49 Evaluation/report steps Purpose Scope Sample Standard Do not limit yourself to WCAG 2.0 Format We recommend Severity ratings See also: WCAG-EM

50 Thank You! webaim.org Web based forums discussion list Tutorials, articles, and resources Blog

Web Accessibility Evaluation Methodologies and Tools

Web Accessibility Evaluation Methodologies and Tools Jared Smith & Jonathan Whiting webaim.org Accessibility vs. Compliance Accessibility > Compliance Technical Accessibility vs. Functional Accessibility