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. (I) 11 Passed -- (400)MDL-76597.png
          71 kB
          Kim Jared Lucas
        2. (I) 11 Passed -- (401)MDL-76597.png
          60 kB
          Kim Jared Lucas
        3. (I) 11 Passed -- (Master)MDL-76597.png
          200 kB
          Kim Jared Lucas
        4. (I) 13 Passed -- (400)MDL-76597.png
          147 kB
          Kim Jared Lucas
        5. (I) 13 Passed -- (401)MDL-76597.png
          136 kB
          Kim Jared Lucas
        6. (I) 13 Passed -- (Master)MDL-76597.png
          149 kB
          Kim Jared Lucas
        7. (I) 16 Passed -- (400)MDL-76597.png
          138 kB
          Kim Jared Lucas
        8. (I) 16 Passed -- (401)MDL-76597.png
          133 kB
          Kim Jared Lucas
        9. (I) 16 Passed -- (Master)MDL-76597.png
          132 kB
          Kim Jared Lucas
        10. (I) 19 Passed -- (400)MDL-76597.png
          141 kB
          Kim Jared Lucas
        11. (I) 19 Passed -- (401)MDL-76597.png
          129 kB
          Kim Jared Lucas
        12. (I) 19 Passed -- (Master)MDL-76597.png
          137 kB
          Kim Jared Lucas
        13. (I) 21 Passed -- (400)MDL-76597.png
          226 kB
          Kim Jared Lucas
        14. (I) 21 Passed -- (401)MDL-76597.png
          230 kB
          Kim Jared Lucas
        15. (I) 21 Passed -- (Master)MDL-76597.png
          215 kB
          Kim Jared Lucas
        16. (I) 5 Passed -- (400)MDL-76597.png
          147 kB
          Kim Jared Lucas
        17. (I) 5 Passed -- (401)MDL-76597.png
          147 kB
          Kim Jared Lucas
        18. (I) 5 Passed -- (Master)MDL-76597.png
          141 kB
          Kim Jared Lucas
        19. (I) 7 Passed -- (400)MDL-76597.png
          201 kB
          Kim Jared Lucas
        20. (I) 7 Passed -- (401)MDL-76597.png
          204 kB
          Kim Jared Lucas
        21. (I) 7 Passed -- (Master)MDL-76597.png
          232 kB
          Kim Jared Lucas
        22. (I) 9 Passed -- (400)MDL-76597.png
          86 kB
          Kim Jared Lucas
        23. (I) 9 Passed -- (401)MDL-76597.png
          83 kB
          Kim Jared Lucas
        24. (I) 9 Passed -- (Master)MDL-76597.png
          145 kB
          Kim Jared Lucas
        25. accessibility_all_good.png
          179 kB
          David Woloszyn
        26. checkbox_labelled.png
          152 kB
          David Woloszyn
        27. 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
          Paul Holden
        28. emptyh3.png
          51 kB
          Jun Pataleta
        29. error_stable400.png
          178 kB
          David Woloszyn
        30. multilang_DA.png
          32 kB
          David Woloszyn
        31. multilang_EN.png
          55 kB
          David Woloszyn
        32. nonaccessibleversionselect.png
          51 kB
          Jun Pataleta
        33. question_version_labelled.png
          167 kB
          David Woloszyn
        34. quiz_accessability_serious_issue_detectde.png
          204 kB
          David Woloszyn

        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.