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/
Hands-on Web Accessibility Evaluation Jon Whiting webaim.org
Accessibility > Compliance
Accessibility is about the human experience
Only humans can adequately evaluate true accessibility
3 levels of Evaluation Beginning/Anyone Keyboard, WAVE errors, zoom, visual scan Intermediate WCAG 2.0, screen reader testing, forms and errors, contrast Advanced
Beginning Evaluation
Beginning concepts Basic HTML accessibility Missing alternative text, no headings, no labels Keyboard accessibility Scannable issues Click here, no page title, no captions, etc.
wave.webaim.org
WAVE for beginners 1. Look for red icons 2. For details, Click Icon > More information 3. Maybe try No Styles?
+ (and sometimes spacebar and arrow keys)
Some tweaking required on Mac Control + F7 to toggle keyboard settings
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)?
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
Accessibility cheatsheet http://ncdae.org/resources/cheatsheets/accessibility.php
Intermediate Evaluation
Intermediate concepts WCAG 2.0 HTML accessibility Alternative text, tables, headings, labels, etc. Screen reader Some ARIA concepts landmarks, labeling, tabindex
Intermediate WAVE features Features Alerts Semantic/Structural elements
Intermediate WAVE features No Styles Heading outline Contrast Chrome extension Code panel?
Use a checklist
Use a checklist WCAG 1.0 Section 508 webaim.org/standards/508/checklist/ WCAG 2.0 - webaim.org/standards/wcag/checklist/ Customized
WCAG 2.0 Principles (POUR) > Guidelines > Success Criteria Supporting materials Understanding... How to Meet... Sufficient Techniques, Advisory Techniques, and Failures
Normative Required for conformance Principles, Guidelines, and Success Criteria are normative Conformance (and levels) based on Success Criteria
Non-normative For information purposes and not required for conformance AKA informative Supporting materials are non-normative
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.
Check skip link Is a "skip navigation" link available? Does it function correctly? Is it visible on focus? Tab to link > Enter > Tab again
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
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
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
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?
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
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
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
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
Windows High Contrast??
Windows High Contrast??
Advanced Evaluators
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
Advanced WAVE features HTML5 and ARIA Code panel
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!
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
Other evaluation tools Browser inspector Inspect and edit aviewer Accessibility APIs Others??
Personal methodology In Chrome WAVE extension Keyboard testing better focus outline, tabindex=0 Visual scan In Firefox NVDA JAWS as needed Inspect
Evaluation/report steps Purpose Scope Sample Standard Do not limit yourself to WCAG 2.0 Format We recommend Severity ratings See also: WCAG-EM
Thank You! webaim.org Web based forums E-mail discussion list Tutorials, articles, and resources Blog