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

Quiz editing page accessibility issues

    XMLWordPrintable

Details

    • MOODLE_400_STABLE, MOODLE_401_STABLE
    • MOODLE_400_STABLE, MOODLE_401_STABLE
    • MDL-76597-401-2
    • MDL-76597-master-2
    • Hide
      Prerequisite
      1. Accessibility checker tool like the axe DevTools browser extension
      2. Moodle site with the Multilanguage content filter enabled for both content and headings.
      Test
      1. Login as a teacher in a course
      2. Create a quiz
      3. Add some questions to it
      4. Ensure you are on the 'Questions' page (mod/quiz/edit.php) and run the accessibility checker.
      5. Confirm that there are no errors related to
        • Empty h3 heading
        • Form elements with empty labels related to the question version.
      6. Inspect the question version select elements. (e.g. on Chrome dev tools, click on "Select an element to inspect it" and hover on a question version select element.)
      7. Confirm that the question version select elements are now labelled as "Question version"
      8. Edit the section heading (Pencil icon right above "Page 1") with the following text

        Section <span class="multilang" lang="en">EN</span><span class="multilang" lang="ja">JA</span>
        

      9. Confirm that the section name is displayed as "Section EN" if your language is set to English, and "Section JA" if it's set to Japanese.
      10. Reload the page.
      11. Confirm that the section name is displayed as "Section EN" if your language is set to English, and "Section JA" if it's set to Japanese.
      12. Run the accessibility checker.
      13. Confirm that you don't see an error about insufficient contrast related to the section heading.
      14. Edit the section heading again. Set it to an empty string.
      15. Without reloading the page, run the accessibility checker.
      16. Confirm that you don't see an error related to an empty h3 heading.
      17. Press "Select multiple items"
      18. Run the accessibility checker
      19. Confirm that you don't see an error about empty form labels related to the checkboxes beside each question item.
      20. Inspect the checkboxes. (e.g. on Chrome dev tools, click on "Select an element to inspect it" and hover on the checkboxes.)
      21. Confirm that it is now labelled as "Select question x" where x is the question number.
      Show
      Prerequisite Accessibility checker tool like the axe DevTools browser extension Moodle site with the Multilanguage content filter enabled for both content and headings. Test Login as a teacher in a course Create a quiz Add some questions to it Ensure you are on the 'Questions' page (mod/quiz/edit.php) and run the accessibility checker. Confirm that there are no errors related to Empty h3 heading Form elements with empty labels related to the question version. Inspect the question version select elements. (e.g. on Chrome dev tools, click on "Select an element to inspect it" and hover on a question version select element.) Confirm that the question version select elements are now labelled as "Question version" Edit the section heading (Pencil icon right above "Page 1") with the following text Section < span class = "multilang" lang = "en" >EN</ span >< span class = "multilang" lang = "ja" >JA</ span > Confirm that the section name is displayed as "Section EN" if your language is set to English, and "Section JA" if it's set to Japanese. Reload the page. Confirm that the section name is displayed as "Section EN" if your language is set to English, and "Section JA" if it's set to Japanese. Run the accessibility checker. Confirm that you don't see an error about insufficient contrast related to the section heading. Edit the section heading again. Set it to an empty string. Without reloading the page, run the accessibility checker. Confirm that you don't see an error related to an empty h3 heading. Press "Select multiple items" Run the accessibility checker Confirm that you don't see an error about empty form labels related to the checkboxes beside each question item. Inspect the checkboxes. (e.g. on Chrome dev tools, click on "Select an element to inspect it" and hover on the checkboxes.) Confirm that it is now labelled as "Select question x" where x is the question number.

    Description

      There are several accessibility issues left on the quiz editing page.

      Running axe DevTools on the quiz editing page, the following errors are returned:

      1. Empty heading h3.
      2. Version select elements don't have an accessible name.

      Attachments

        1. quiz_accessability_serious_issue_detectde.png
          quiz_accessability_serious_issue_detectde.png
          204 kB
        2. question_version_labelled.png
          question_version_labelled.png
          167 kB
        3. nonaccessibleversionselect.png
          nonaccessibleversionselect.png
          51 kB
        4. multilang_EN.png
          multilang_EN.png
          55 kB
        5. multilang_DA.png
          multilang_DA.png
          32 kB
        6. error_stable400.png
          error_stable400.png
          178 kB
        7. emptyh3.png
          emptyh3.png
          51 kB
        8. Edit-quiz-page-section-headings_I-should-see-Are-you-sure-you-want-to-remove-the-Heading-2-section-heading-_classic_140.png
          Edit-quiz-page-section-headings_I-should-see-Are-you-sure-you-want-to-remove-the-Heading-2-section-heading-_classic_140.png
          87 kB
        9. checkbox_labelled.png
          checkbox_labelled.png
          152 kB
        10. accessibility_all_good.png
          accessibility_all_good.png
          179 kB
        11. (I) 9 Passed -- (Master)MDL-76597.png
          (I) 9 Passed -- (Master)MDL-76597.png
          145 kB
        12. (I) 9 Passed -- (401)MDL-76597.png
          (I) 9 Passed -- (401)MDL-76597.png
          83 kB
        13. (I) 9 Passed -- (400)MDL-76597.png
          (I) 9 Passed -- (400)MDL-76597.png
          86 kB
        14. (I) 7 Passed -- (Master)MDL-76597.png
          (I) 7 Passed -- (Master)MDL-76597.png
          232 kB
        15. (I) 7 Passed -- (401)MDL-76597.png
          (I) 7 Passed -- (401)MDL-76597.png
          204 kB
        16. (I) 7 Passed -- (400)MDL-76597.png
          (I) 7 Passed -- (400)MDL-76597.png
          201 kB
        17. (I) 5 Passed -- (Master)MDL-76597.png
          (I) 5 Passed -- (Master)MDL-76597.png
          141 kB
        18. (I) 5 Passed -- (401)MDL-76597.png
          (I) 5 Passed -- (401)MDL-76597.png
          147 kB
        19. (I) 5 Passed -- (400)MDL-76597.png
          (I) 5 Passed -- (400)MDL-76597.png
          147 kB
        20. (I) 21 Passed -- (Master)MDL-76597.png
          (I) 21 Passed -- (Master)MDL-76597.png
          215 kB
        21. (I) 21 Passed -- (401)MDL-76597.png
          (I) 21 Passed -- (401)MDL-76597.png
          230 kB
        22. (I) 21 Passed -- (400)MDL-76597.png
          (I) 21 Passed -- (400)MDL-76597.png
          226 kB
        23. (I) 19 Passed -- (Master)MDL-76597.png
          (I) 19 Passed -- (Master)MDL-76597.png
          137 kB
        24. (I) 19 Passed -- (401)MDL-76597.png
          (I) 19 Passed -- (401)MDL-76597.png
          129 kB
        25. (I) 19 Passed -- (400)MDL-76597.png
          (I) 19 Passed -- (400)MDL-76597.png
          141 kB
        26. (I) 16 Passed -- (Master)MDL-76597.png
          (I) 16 Passed -- (Master)MDL-76597.png
          132 kB
        27. (I) 16 Passed -- (401)MDL-76597.png
          (I) 16 Passed -- (401)MDL-76597.png
          133 kB
        28. (I) 16 Passed -- (400)MDL-76597.png
          (I) 16 Passed -- (400)MDL-76597.png
          138 kB
        29. (I) 13 Passed -- (Master)MDL-76597.png
          (I) 13 Passed -- (Master)MDL-76597.png
          149 kB
        30. (I) 13 Passed -- (401)MDL-76597.png
          (I) 13 Passed -- (401)MDL-76597.png
          136 kB
        31. (I) 13 Passed -- (400)MDL-76597.png
          (I) 13 Passed -- (400)MDL-76597.png
          147 kB
        32. (I) 11 Passed -- (Master)MDL-76597.png
          (I) 11 Passed -- (Master)MDL-76597.png
          200 kB
        33. (I) 11 Passed -- (401)MDL-76597.png
          (I) 11 Passed -- (401)MDL-76597.png
          60 kB
        34. (I) 11 Passed -- (400)MDL-76597.png
          (I) 11 Passed -- (400)MDL-76597.png
          71 kB

        Issue Links

          Activity

            People

              jpataleta Jun Pataleta
              jpataleta Jun Pataleta
              David Woloszyn David Woloszyn
              Jake Dallimore Jake Dallimore
              Kim Jared Lucas Kim Jared Lucas
              Votes:
              0 Vote for this issue
              Watchers:
              6 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 day, 3 hours, 13 minutes
                  1d 3h 13m

                  Clockify

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