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

Add Behat step to verify WCAG A and WCAG AA compliance

    XMLWordPrintable

    Details

    • Testing Instructions:
      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)
    • Affected Branches:
      MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_310_STABLE
    • Pull Master Branch:
      MDL-67687-master-2

      Description

      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

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              dobedobedoh Andrew Nicols
              Reporter:
              dobedobedoh Andrew Nicols
              Peer reviewer:
              Jun Pataleta
              Integrator:
              Eloy Lafuente (stronk7)
              Tester:
              Anna Carissa Sadia
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              2 Vote for this issue
              Watchers:
              10 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                9/Nov/20

                  Time Tracking

                  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