Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-67687

Add Behat step to verify WCAG A and WCAG AA compliance

XMLWordPrintable

    • MOODLE_39_STABLE
    • MOODLE_310_STABLE
    • MDL-67687-master-2
    • Hide
      1. Initialise behat without the new --axe flag:

        php admin/tool/behat/cli/init.php
        

      2. Note the command given to execute Behat
      3. Run behat on the new tests, using the correct tag:

        php admin/tool/behat/cli/run.php --tags=@accessibility
        

        1. Confirm that you see the following output at the top:

          Run optional tests:
          - Accessibility: No
          

        2. Confirm that all steps pass
      4. Re-initialise behat with the --axe flag:

        php admin/tool/behat/cli/init.php --axe
        

      5. Run behat on the new tests, using the correct tag:

        php admin/tool/behat/cli/run.php --tags=@accessibility
        

        1. Confirm that you see the following output at the top:

          Run optional tests:
          - Accessibility: Yes
          

        2. Confirm that all steps pass
      6. Open "auth/tests/behat/login.feature" in your preferred editor
      7. Find the @_accessibility feature at the bottom of the file and add a new line:

            Then the page should meet accessibility standards with "cat.semantics" extra tests
        

      8. Run behat on the new tests, using the correct tag:

        php admin/tool/behat/cli/run.php --tags=@accessibility
        

        1. Confirm that the final step fails with some useful information
          For example:

          001 Scenario: Login page must be accessible                                                              # /Users/nicols/Sites/moodles/sm/moodle/auth/tests/behat/login.feature:59
                Then the page should meet accessibility standards with "best-practices, cat.semantics" extra tests # /Users/nicols/Sites/moodles/sm/moodle/auth/tests/behat/login.feature:64
                  Accessibility violations found:
                    1 violations of 'Ensures the main landmark is at top level' (severity: moderate)
                      - The main landmark is contained in another landmark.:
                        div[role="main"]
           
           
                    1 violations of 'Ensure that the page, or at least one of its frames contains a level-one heading' (severity: moderate)
                      - Page must have a level-one heading:
                        html
           
           
                   (Behat\Mink\Exception\ExpectationException)
           
          1 scenario (1 failed)
          5 steps (4 passed, 1 failed)
          0m7.71s (48.52Mb)
          

      Show
      Initialise behat without the new --axe flag: php admin/tool/behat/cli/init.php Note the command given to execute Behat Run behat on the new tests, using the correct tag: php admin/tool/behat/cli/run.php --tags=@accessibility Confirm that you see the following output at the top : Run optional tests: - Accessibility: No Confirm that all steps pass Re-initialise behat with the --axe flag: php admin/tool/behat/cli/init.php --axe Run behat on the new tests, using the correct tag: php admin/tool/behat/cli/run.php --tags=@accessibility Confirm that you see the following output at the top : Run optional tests: - Accessibility: Yes Confirm that all steps pass Open " auth/tests/behat/login.feature " in your preferred editor Find the @_accessibility feature at the bottom of the file and add a new line: Then the page should meet accessibility standards with "cat.semantics" extra tests Run behat on the new tests, using the correct tag: php admin/tool/behat/cli/run.php --tags=@accessibility Confirm that the final step fails with some useful information For example: 001 Scenario: Login page must be accessible # /Users/nicols/Sites/moodles/sm/moodle/auth/tests/behat/login.feature:59 Then the page should meet accessibility standards with "best-practices, cat.semantics" extra tests # /Users/nicols/Sites/moodles/sm/moodle/auth/tests/behat/login.feature:64 Accessibility violations found: 1 violations of 'Ensures the main landmark is at top level' (severity: moderate) - The main landmark is contained in another landmark.: div[role="main"]     1 violations of 'Ensure that the page, or at least one of its frames contains a level-one heading' (severity: moderate) - Page must have a level-one heading: html     (Behat\Mink\Exception\ExpectationException)   1 scenario (1 failed) 5 steps (4 passed, 1 failed) 0m7.71s (48.52Mb)

      The Axe tool has a JS API which lets us verify the WCAG compliance of pages at various points.

      We can use this to verify compliance once we've fixed our key WCAG issues.

      Docs: https://github.com/dequelabs/axe-core/blob/develop/doc/developer-guide.md#rules

            dobedobedoh Andrew Lyons
            dobedobedoh Andrew Lyons
            Jun Pataleta Jun Pataleta
            Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
            Anna Carissa Sadia Anna Carissa Sadia
            Votes:
            2 Vote for this issue
            Watchers:
            9 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 4 hours, 35 minutes
                1d 4h 35m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.