1. 1 Introduction to Web Accessibility
    1. What is A11Y?
      1. Abbreviation for Accessibility, 11 represents number of letters between A & Y
      2. Usable by everyone with or without disabilities
    2. WCAG - Web Content Accessibility Guidelines
      1. WCAG 2.0
        1. Perceivable
          1. Users with difficulties in one of their senses should be able to access website, screen reader
        2. Operable
          1. Users with motor difficulties, allow website to use with keyboard
        3. Understandable
          1. Instruction presented and clear error message for any mistakes
        4. Robust
          1. Website must be used by users when user uses advanced assistive technologies by following standards. Ex HTML Structure
      2. WCAG 2.1
        1. Mobile Accessibility
        2. Low Vision
        3. Cognitive and Learning Abilities
      3. WCAG Summary
        1. 4 Principles
          1. Perceivable
          2. Guidelines
          3. Text Alternatives
          4. Time based Media
          5. Adaptable
          6. Distinguishable
          7. Operable
          8. Guideliens
          9. Keyboard Accessible
          10. Enough Time
          11. Seizures and Physical Reactions
          12. Navigable
          13. Input Modalities
          14. Understandable
          15. Guidelines
          16. Readable
          17. Predicatable
          18. Input Assistance
          19. Robust
          20. Guidline
          21. Conformance
        2. Success Criteria & Conformance Level
          1. Success Criteria at Guideline Level
          2. Conformance at Success Criteria Level
          3. Level A
          4. Level AA
          5. Level AAA
  2. 2 Why A11Y important?
    1. Better accessibility means better user experience, widens app reach to other audiences
    2. Accessibility testing often seen afterthought, finding accessibility issues can help deliver high quality product.
    3. A11Y Testing
      1. Automation
        1. Helps catch basic accessibility issues earlier on
        2. Prevent regression issues
        3. Fast feedback loop
        4. More complex testing activities can be planned
        5. 10 best different tools(UK Gov site) covers average of 40% of the issues, proves that test engineer's very much needed to do accessibility testing.
      2. Real Users
        1. May use third party assistive tech to use products, helps us to understand how they use day-to-day basis.
    4. Best Approaches
      1. With real users
      2. Evaluation check list by Automation
      3. Evaluation check list by Test Engineers.
    5. Key Resources
      1. Best Automation Tools
      2. W3C Accessibility Evaluation Report
  3. 3 Web Accessibility Testing Checks
    1. W3C Web accessibility initiative tells how the product can be more accessible.
    2. Automated Checks
      1. Page Title
      2. Image Text Alternatives
      3. Headings
      4. Color Contrast
      5. HTML Structure
      6. ARIA Labels - Label to elements when label is not visible.
    3. Checks that need human intervention, most of the automated checks needs human intervention
      1. Page title makes sense, easy to understand
      2. Image Alternatives makes sense especially when used by screen reader
      3. Heading/HTML structures by using keyboard only
      4. Color Contrast, appealing of color contrast
      5. ARIA label, making sense when elements focused
    4. Additional Checks
      1. Feedback on form submissions
      2. Clarity of subtitles
      3. Turning off animations
      4. Content accessible with keyboard only
      5. Elements focus
      6. Clear fonts
      7. Audio levels modification
      8. Layout Responsiveness?
    5. Tips
      1. What level of W3C guidance to achieve?
      2. Involve and collaborate with Ux team
      3. Start with basic page
      4. Keyboard more try not to use mouse
      5. Play around with screen readers
      6. Turn off speakers, test a way to turn subtitles or captions on
      7. Accessibility testing checklist
      8. Exploratory testing - time box sessions
    6. Resources
      1. Web Accessibility Initiative
      2. Web Accessibility Easy Checks
      3. Automated Accessibility Rules from Deque
  4. 4.1 Tools Requiring Human Assistance
    1. Keyboard - Access application using keyboard with common short cuts.
    2. Screen readers
      1. VoiceOver - Built in already for Mac/iPhone
      2. NVDA - Free tool for Windows
      3. JAWS - Commercial tool for Windows
      4. Talkback - Android
    3. Impact
      1. Missing label or alternative text makes screen reader hard to read ,eventually it does not makes sense to user.
  5. 4.2 Semi Automated Tools
    1. Axe
      1. Browser extension based on axe-core library,supported by Deque Systems
    2. WAVE
      1. Browser extension tool,supported by WebAIM
    3. Google Lighthouse
      1. Browser extension tool built on axe-core library, in addition to accessibility it also measure other metrics performance, best practices, and SEO.
  6. 4.3 Automated Accessibility Testing Tools
    1. Axe-Core
      1. Axe CLI
      2. Jest Axe
      3. Cypress-Axe
      4. Axe Selenium
      5. Axe WebdriverIO
      6. Axe TestCafe
    2. Applitools Contrast Advisor
  7. 5 Axe-CLI ?
    1. Easy to integrate with CI pipeline
    2. Fast
    3. No code needed
    4. Installation & Running
      1. Pre-requisites
        1. Node and NPM
      2. Install Axe-CLI
        1. npm install -g axe-cli
      3. Scripts
        1. axe URL , by default it will run headless Chrome
        2. axe URL --browser chrome, will run in actual browser
        3. axe URL,URL/about , allows us to test multiple pages
        4. axe URL,URL/about --disable link-name, allows us to disable rules
        5. axe URL --browser chrome --save test-results.json, test results saved in Json format
  8. 6 Setting up Cypress
    1. Pre-requisites
      1. Node and NPM
      2. Visual Studio Code
      3. Create Project , mkdir cypresstau-axe-project
    2. Install Cypress
      1. npm i -D cypress@4.8.0 cypress-axe@0.8.1
        1. i - shortcut for install
        2. D - to setup dev dependencies on this project, by doing so this code will run with no issues even with later versions as well.
        3. cypress-axe - adding package
    3. Cypress test runner & default folder structure
      1. npx cypress open , npx stands to run specific command
      2. add import 'cypress-axe', allows us to Cypress extend behavior and additional commands from Cypress-Axe
  9. 7.1 Accessibility Tests with Cypress Axe
    1. Application against we run the tests
    2. Add new test file under integration folder by removing rest of the files.
      1. file name like 'todo-app.spec.js'
      2. add reference '/// <reference types="cypress"/>' to enable IntelliSense for this project
      3. 'describe' block - in Mocha allows us to group tests in structured way.
      4. 'it' block - in Mocha is way to describe tests
      5. Commands
        1. cy.visit - To visit our application
        2. cy.injectAxe - This command injects axe-core run in runtime
        3. cy.checkA11y - This command scans for accessibility failures
      6. Test Run
        1. npx cypress open, run the spec.js file in the test runner
  10. 7.2 Understanding Accessibility failures
    1. Cypress Test Runner -> Inspect->Highlight Error -> Console-Logs
      1. Logs indicates that contrast between foreground and background
      2. Also provides DEQ help page with success criteria.
      3. If we have an array of elements, we can drill down to individual element.
    2. Heading-order
      1. Heading order must be organized because assistive technologies use for navigation.
    3. Landmark
      1. Having main landmark ensures people with disability can access primary content easily
    4. Heading one
      1. Having heading one is best practice as it's allows user to jump directly to the main content
  11. 7.3 Testing Specific Elements with Cypress Axe
    1. Full Page - By default, Cypress Axe will scan the DOM structure of the page
    2. Exclude Element
      1. cy.checkA11y( { exclude: ['.learn']}) , .learn is selector name.
    3. Include Element
      1. cy.checkA11y('.learn'), scans only .learn selector
  12. 7.4 Disabling Axe Rule with Cypress Axe
    1. By Impact
      1. cy.checkA11y(null, {includedImpacts: ['critical' , 'serious']}
    2. No Impact
      1. cy.checkA11y(null, { rules: { 'color-contrast': { enabled : false },},}); - this script will disable color cotrast rule.
  13. 8.1 Applitools - Contrast Advisor Usage
    1. Helps to validate contrast issues with text and non-text elements(Graphics,images)
    2. Viable tool to test contrast images and native mobile application violations
  14. Next Steps
    1. Start doing accessibility testing and advocating it.
  15. Study Notes Prepared By Deviprasad Polavarapu
  16. Accessibility Testing By TAU Created By Marie Drake