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

Feedback - Fix for Accessibility Issue with Informational and Error Content Displayed in Red

    Details

    • Testing Instructions:
      Hide

      Use attached feedback form (exported file) specifically designed for testing WCAG 2.0 compliance (and multilang filter support but we are not concerned with this here).

      The attached Feedback form assumes the site is configured for English (lang="en") and French (lang="fr"). If this is not the case, you will need to modify the XML file before importing it, modify the fields after it has been imported into Moodle.

      There are two places to verify: 1) When editing the list of questions and 2) when completing the form.

      Things to notice include:

      1. The string "There are required fields in this form marked" followed by a graphic of a red asterisk with the ALT/Title text: "Required field". You can verify this in the source code. You can also just hover your mouse over the asterisk and notice that it now says "Required field" instead of just "required" (not supported in all browsers but works in Chrome). For comparison, this is the same ALT/Title text and image which appears in the profile editor.
      2. The string "Saving failed because missing or false values", which appears at the top of the form if a submission fails due to incorrect or missing field data, is the same text formatting and image as #1 above.
      3. The asterisk next to each required fields is now the same graphic mentioned above with the same ALT/Title text. You can verify this in the source code. You can also just hover your mouse over the asterisk and notice that it now says "Required field" instead of just "required" (not supported in all browsers but works in Chrome). For comparison, this is the same ALT/Title text and image which appears in the profile editor.
      4. If a required field is not completed correctly, upon submission a message is now displayed right above the field instead of the field label itself just changing colour. The styles used are the same ones used in other Moodle forms.
      5. Switching to a theme that modifies any of the following classes will result in formatting changes to the above mentioned strings. Sorry, I don't have any examples.

      These changes make the Feedback form in a much more similar way to other Moodle forms.

      Show
      Use attached feedback form (exported file) specifically designed for testing WCAG 2.0 compliance (and multilang filter support but we are not concerned with this here). The attached Feedback form assumes the site is configured for English (lang="en") and French (lang="fr"). If this is not the case, you will need to modify the XML file before importing it, modify the fields after it has been imported into Moodle. There are two places to verify: 1) When editing the list of questions and 2) when completing the form. Things to notice include: The string "There are required fields in this form marked" followed by a graphic of a red asterisk with the ALT/Title text: "Required field". You can verify this in the source code. You can also just hover your mouse over the asterisk and notice that it now says "Required field" instead of just "required" (not supported in all browsers but works in Chrome). For comparison, this is the same ALT/Title text and image which appears in the profile editor. The string "Saving failed because missing or false values", which appears at the top of the form if a submission fails due to incorrect or missing field data, is the same text formatting and image as #1 above. The asterisk next to each required fields is now the same graphic mentioned above with the same ALT/Title text. You can verify this in the source code. You can also just hover your mouse over the asterisk and notice that it now says "Required field" instead of just "required" (not supported in all browsers but works in Chrome). For comparison, this is the same ALT/Title text and image which appears in the profile editor. If a required field is not completed correctly, upon submission a message is now displayed right above the field instead of the field label itself just changing colour. The styles used are the same ones used in other Moodle forms. Switching to a theme that modifies any of the following classes will result in formatting changes to the above mentioned strings. Sorry, I don't have any examples. These changes make the Feedback form in a much more similar way to other Moodle forms.
    • Affected Branches:
      MOODLE_25_STABLE, MOODLE_26_STABLE
    • Fixed Branches:
      MOODLE_25_STABLE, MOODLE_26_STABLE
    • Pull Master Branch:
      MDL-42462-Feedback-Fix-for-WCAG-2-0-issue-with-Informational-and-Error-Content-Displayed-in-red

      Description

      The following Feedback form elements fail to meet WCAG 2.0 requirements 1.4.3, 1.4.1 and 3.3.2:

      • The string "(*)Answers are required to starred questions." at the top of the form.
      • The string "Saving failed because missing or false values" which appears at the top of the form if submission fails due to incorrect or missing field data.
      • The asterisk appearing at the end of each required question.

      Also, the text "Answers are required to starred questions" is not clear.

      The meaning of the asterisk is not clearly explained and there is no space between the text and the asterisk causing the form to fail WCAG 2.0 success criterion 3.2.2 (3:Understandable, 3:Input Assistance, 2:Labels or Instructions).

      The contrast level between text with a red foreground colour (color: #ff0000 over #FFFFFF) fail WCAG 2.0 success criterion 1.4.3 (1:Perceivable, 4:Distinguishable, 3:Contrast Minimum).

      Recommendation:

      1) Replace the " Answers are required to starred questions." string with the same code used in other Moodle forms to display the "There are required fields in this form marked (*/Required field)" message instead

      2) Replace the text based asterisk for required fields with the same graphical asterisk used in other Moodle forms.

      3) Eliminate the Feedback module styles (missingrequire, feeback_required_mark) that are currently used to highlight required and error fields. Apply the common Moodle styles (mform, fdescription, required, req and error) instead which are used throughout the rest of Moodle.

      4) When the submitted form fails to save for any reason, either "Saving failed because missing or false values" or simply "Saving failed" appears at the top of the form. This text will now be formatted using the same dark red on light red style (span.error) used by other error messages throughout the form.

      This will result in a more uniform appearance of the feedback form which will be consistent with other Moodle forms. The colour issues mentioned above will no longer be caused by the Feedback module as colours will be controlled by Moodle's "Moodle forms" related style sheets. These are easily customizable to meet individual themes requirements.

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Votes:
                  0 Vote for this issue
                  Watchers:
                  4 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:
                    Fix Release Date:
                    12/May/14