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

Feedback - Incorrect use of fieldset tags and implementation of label for dropdown controls

XMLWordPrintable

    • MOODLE_25_STABLE
    • MOODLE_25_STABLE, MOODLE_26_STABLE
    • MDL-42505-Feedback-Inappropriate-use-of-fieldset-tags-around-cancel-button
    • Hide

      As a logged-in Site Administrator:

      1. Enable the feedback module by clicking Home > Site Administration > Plugins -> Activity modules -> Manage activities
      2. Go to a course, add a Feedback activity
      3. View the activity
      4. Add a "Multiple choice - single answer" type question.
      5. Insert Radio Buttons in the label and the following values (1 per line): Red, Yellow, Green, Blue.
      6. Add a "Multiple choice - multiple answers" type question.
      7. Insert Checkboxes in the label and the following values (1 per line): Red, Yellow, Green, Blue.
      8. Add a "Multiple choice - single answer allowed (dropdownlist)" question.
      9. Insert Dropdown List in the label and the following values (1 per line): Red, Yellow, Green, Blue.
      10. Add a "Multiple choice (rated) - single answer" type question.
      11. Insert Rated Radio Buttons in the label and the following values (1 per line): 10/Red, 20/Yellow, 30/Green, 40/Blue
      12. Add a "Multiple choice (rated) - single answer allowed (dropdownlist)" question.
      13. Insert Rated Dropdown List in the label and the following values (1 per line): 10/Red, 20/Yellow, 30/Green, 40/Blue
      14. Click the Overview tab and then the "Answer the question..." link to begin the feedback. This will now test the Complete version of the code changes.
      15. View the page source code.
      16. Test for A: Locate the form. Notice that it is no longer wrapped in a <fieldset> tag.
      17. Test for A: Locate the Cancel button. Notice that there is no longer any <fieldset> tags around it.
      18. Test for B: Locate the Checkboxes input fields and notice that they are now grouped in a fieldset tag.
      19. Test for B: Locate the Radio Buttons input fields and notice that they are grouped in a fieldset tag.
      20. Test for B: Locate the Rated Radio Buttons input fields and notice that they are now grouped in a fieldset tag.
      21. Test for C: Locate the Dropdown List select field and notice that it is now in a DIV instead of a UL and LI tag.
      22. Test for D: Notice that Dropdown List no longer appear in duplicate in the source code. You can also see this in the rendered page if you disable all CSS styles.
      23. Test for C: Locate the Rated Dropdown List select field and notice that it is now in a DIV instead of a UL and LI tag.
      24. Test for D: Notice that Rated Dropdown List no longer appear in duplicate in the source code. You can also see this in the rendered page if you disable all CSS styles.
      25. Click your browsers back button and then the Edit questions tab at the top of the page. This will now test the Preview version of the code changes.
      26. Go back to step 15 and repeat above.
      Show
      As a logged-in Site Administrator: Enable the feedback module by clicking Home > Site Administration > Plugins -> Activity modules -> Manage activities Go to a course, add a Feedback activity View the activity Add a "Multiple choice - single answer" type question. Insert Radio Buttons in the label and the following values (1 per line): Red, Yellow, Green, Blue. Add a "Multiple choice - multiple answers" type question. Insert Checkboxes in the label and the following values (1 per line): Red, Yellow, Green, Blue. Add a "Multiple choice - single answer allowed (dropdownlist)" question. Insert Dropdown List in the label and the following values (1 per line): Red, Yellow, Green, Blue. Add a "Multiple choice (rated) - single answer" type question. Insert Rated Radio Buttons in the label and the following values (1 per line): 10/Red, 20/Yellow, 30/Green, 40/Blue Add a "Multiple choice (rated) - single answer allowed (dropdownlist)" question. Insert Rated Dropdown List in the label and the following values (1 per line): 10/Red, 20/Yellow, 30/Green, 40/Blue Click the Overview tab and then the "Answer the question..." link to begin the feedback. This will now test the Complete version of the code changes. View the page source code. Test for A: Locate the form. Notice that it is no longer wrapped in a <fieldset> tag. Test for A: Locate the Cancel button. Notice that there is no longer any <fieldset> tags around it. Test for B: Locate the Checkboxes input fields and notice that they are now grouped in a fieldset tag. Test for B: Locate the Radio Buttons input fields and notice that they are grouped in a fieldset tag. Test for B: Locate the Rated Radio Buttons input fields and notice that they are now grouped in a fieldset tag. Test for C: Locate the Dropdown List select field and notice that it is now in a DIV instead of a UL and LI tag. Test for D: Notice that Dropdown List no longer appear in duplicate in the source code. You can also see this in the rendered page if you disable all CSS styles. Test for C: Locate the Rated Dropdown List select field and notice that it is now in a DIV instead of a UL and LI tag. Test for D: Notice that Rated Dropdown List no longer appear in duplicate in the source code. You can also see this in the rendered page if you disable all CSS styles. Click your browsers back button and then the Edit questions tab at the top of the page. This will now test the Preview version of the code changes. Go back to step 15 and repeat above.

      A. Inappropriate usage of fieldset tags

      Affects: Whole form and Cancel button

      Issue: When displaying a feedback form (both preview and complete view), the whole form as well as the Cancel button are wrapped in a fieldset tag. While all the fields in a form are related in that it one whole form, the intent of the fieldset tag is to group sets of related fields. For example, the a set of radio buttons or checkboxes, or the input fields which make up an address.

      The current implementation results in failure of WCAG 2.0 Criterion 1.3.1 (1:Perceivable, 3:Adaptable, 1:Info and Relationships) as tested using the following technique: H71: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content. For more information, see http://www.w3.org/TR/WCAG20-TECHS/H71.html#H71-tests.

      Recommendation: Remove the <fieldset>/</fieldset> tags around the form and Cancel button.

      Files that would need to be modified:

      • /mod/feedback/complete.php
      • /mod/feedback/complete_guest.php

      B. Missing fieldset tags

      Affected question types:

      • Multiple choice, multiple answers (checkboxes)
      • Multiple choice (rated), multiple answers (checkboxes)
      • Multiple choice, single answer allowed (Radio Buttons)
      • Multiple choice (rated), single answer allowed (Radio Buttons)

      Issue: Related groups of controls are not grouped in a fieldset tags

      The current implementation results in failure of WCAG 2.0 Criterion 1.3.1 (1:Perceivable, 3:Adaptable, 1:Info and Relationships) as tested using the following technique: H71: Providing a description for groups of form controls using fieldset and legend elements. For more information, see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H71#H71-tests.

      Recommendation: Wrap groups of related radio buttons and groups of related fieldset controls in fieldset tags.

      Files that would need to be modified:

      • /mod/feedback/item.multichoce/lib.php
      • /mod/feedback/item.multichocerated/lib.php

      C. Inappropriate use of unordered list

      The following files would need to be modified:

      • Multiple choice, single answer allowed (dropdownlist)
      • Multiple choice (rated), single answer allowed (dropdownlist)

      Issue: When displaying a dropdown list in a form, each set of label/dropdown list control are wrapped in a single item unordered list. This is inappropriate use of unordered lists because you will never have multiple dropdown lists in a single question.

      This implementation results in failure of WCAG 2.0 Criterion 1.3.1 (1:Perceivable, 3:Adaptable, 1:Info and Relationships) as tested using the following technique: F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content. For more information, see Failure Technique #4 at http://www.w3.org/TR/WCAG-TECHS/F43.html#F43-tests.

      Recommendation: Remove the <ul> tags and replace the <li> tags with div tags so as to maintain the developers ability to apply CSS styles.

      Files that would need to be modified:

      • /mod/feedback/item.multichoce/lib.php
      • /mod/feedback/item.multichocerated/lib.php

      D. Duplicate hidden label field

      Affected questions types:

      • Multiple choice, single answer allowed (dropdownlist)
      • Multiple choice (rated), single answer allowed (dropdownlist)

      Issue: There is a hidden label for dropdown lists. This is an issue for users who turn off styles and may affect users of screen readers.

      This implementation results in failure of WCAG 2.0 Criterion 1.3.1 (1:Perceivable, 3:Adaptable, 1:Info and Relationships) as tested using the following technique: F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content. For more information, see Failure Technique #4 at http://www.w3.org/TR/WCAG-TECHS/F43.html#F43-tests.

      Recommendation: Remove the hidden copy of the label as it doesn't appear to serve any purpose.

      Files that would need to be modified:

      • /mod/feedback/item.multichoce/lib.php
      • /mod/feedback/item.multichocerated/lib.php

        1. WCAG20-Test-Form.xml
          23 kB
          Michael Milette

            michael-milette Michael Milette
            michael-milette Michael Milette
            Rossiani Wijaya Rossiani Wijaya
            Marina Glancy Marina Glancy
            Dan Poltawski Dan Poltawski
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

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