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

Add Behat step to verify WCAG A and WCAG AA compliance

    XMLWordPrintable

Details

    • 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)

    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

              dobedobedoh Andrew Lyons
              dobedobedoh Andrew Lyons
              Jun Pataleta Jun Pataleta
              Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
              Anna Carissa Sadia Anna Carissa Sadia
              Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Stevani Andolo, Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Stevani Andolo
              Votes:
              2 Vote for this issue
              Watchers:
              10 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                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