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

Accessibility: Required form fields should indicate required status

XMLWordPrintable

    • MOODLE_404_STABLE
    • MOODLE_402_STABLE, MOODLE_403_STABLE
    • MDL-80805-m402
    • MDL-80805-m403
    • MDL-80805-main
    • Hide

      To do a realistic test you will need to install a screenreader such as NVDA (free, open source) that supports aria-required.

      The test is simple, just repeat for each supported field type (below):

      1. Go to a form that has a required field of that type.
      2. Use the tab key to navigate to the field.
        • EXPECTED: When NVDA reads the field detalis, it should include the word 'required'. For example, a text field labelled 'Course full name' and marked required should be read as: 'Course full name required edit blank'.

      Component library test page

      Most supported field types are included on a component library test page.

      • To make this work, you first need a developer setup and to run the command: grunt componentlibrary
      • Then you can access the page by going to this URL within your Moodle: /admin/tool/componentlibrary/docspage.php/moodle/components/form-elements/
      • The actual form appears within an iframe. To mark most of the fields required, you need to click the 'Show with required' link.

      Supported field types (on component library test page)

      This list includes all the supported field types on that test page, with the label of the field in brackets.

      • text (Text)
      • passwordunmask (Passwordunmask) - will only indicate required after unmasking it
      • radio (Radio)
      • checkbox (Checkbox)
      • select (Select)
      • selectyesno (Selectyesno)
      • float (Floating number)
      • textarea (Text area)
      • tags (Tags)
      • advcheckbox (Advanced checkbox)
      • autocomplete (Search area)

      Some details to be aware of:

      • Other required fields on this page (not listed above) are not supported and will not say 'required', for example the text editor and the groups at the end.
      • There are also some other details that are questionable for accessibility, for example the autocomplete boxes all say 'Selected items. List required' when you tab to that point - the 'required' bit I've added is fine, but it probably should also include the label at that point otherwise it is a bit meaningless. I think that is out of scope for this issue.

      Supported field types (on other pages)

      These descriptions (copied from a comment below) describe how to get to a form containing each of the other supported field types that aren't already covered on the above page.

      I have not included all the ones which are the same as autocomplete, since the code isn't different so doesn't need testing separately.

      password

      • From the user dropdown (top right), choose Preferences.
      • Choose 'Change password'.
      • The three required fields 'Current password', 'New password', and 'New password (again)' all have the password type.

      selectgroups

      • Go to Site administration / Reports / Event monitoring rules.
      • If it shows disabled, click Enable to enable event monitoring.
      • Click Add a new rule.
      • The required field 'Area to monitor' has selectgroups type.

      selectwithlink

      • If not already enabled, go to Site administration / General / Advanced features and turn on 'Enable outcomes'.
      • Go to any course and click into the Grades tab.
      • Click the 'Grader report' dropdown and choose 'Outcomes' under 'More'.
      • Click 'Manage outcomes'.
      • Click 'Add a new outcome'
      • The required field 'Scale' has selectwithlink type.

      url

      • Go to any course and turn editing on.
      • Add an activity and choose URL (resource).
      • The required field 'External URL' has url type.
      Show
      To do a realistic test you will need to install a screenreader such as NVDA (free, open source) that supports aria-required. The test is simple, just repeat for each supported field type (below): Go to a form that has a required field of that type. Use the tab key to navigate to the field. EXPECTED: When NVDA reads the field detalis, it should include the word 'required'. For example, a text field labelled 'Course full name' and marked required should be read as: 'Course full name required edit blank'. Component library test page Most supported field types are included on a component library test page. To make this work, you first need a developer setup and to run the command: grunt componentlibrary Then you can access the page by going to this URL within your Moodle: /admin/tool/componentlibrary/docspage.php/moodle/components/form-elements/ The actual form appears within an iframe. To mark most of the fields required, you need to click the 'Show with required' link. Supported field types (on component library test page) This list includes all the supported field types on that test page, with the label of the field in brackets. text (Text) passwordunmask (Passwordunmask) - will only indicate required after unmasking it radio (Radio) checkbox (Checkbox) select (Select) selectyesno (Selectyesno) float (Floating number) textarea (Text area) tags (Tags) advcheckbox (Advanced checkbox) autocomplete (Search area) Some details to be aware of: Other required fields on this page (not listed above) are not supported and will not say 'required', for example the text editor and the groups at the end. There are also some other details that are questionable for accessibility, for example the autocomplete boxes all say 'Selected items. List required' when you tab to that point - the 'required' bit I've added is fine, but it probably should also include the label at that point otherwise it is a bit meaningless. I think that is out of scope for this issue. Supported field types (on other pages) These descriptions (copied from a comment below) describe how to get to a form containing each of the other supported field types that aren't already covered on the above page. I have not included all the ones which are the same as autocomplete, since the code isn't different so doesn't need testing separately. password From the user dropdown (top right), choose Preferences. Choose 'Change password'. The three required fields 'Current password', 'New password', and 'New password (again)' all have the password type. selectgroups Go to Site administration / Reports / Event monitoring rules. If it shows disabled, click Enable to enable event monitoring. Click Add a new rule. The required field 'Area to monitor' has selectgroups type. selectwithlink If not already enabled, go to Site administration / General / Advanced features and turn on 'Enable outcomes'. Go to any course and click into the Grades tab. Click the 'Grader report' dropdown and choose 'Outcomes' under 'More'. Click 'Manage outcomes'. Click 'Add a new outcome' The required field 'Scale' has selectwithlink type. url Go to any course and turn editing on. Add an activity and choose URL (resource). The required field 'External URL' has url type.

      (Note: This is the first in a possible series of bugs that have been raised by our accessibility testing team.)

      In Moodle, form fields that are required show a red ! icon with ARIA label and title 'required', but this is not part of the form label and will not be read out by a screenreader while navigating form fields. When they go to the form field, screenreader users do not know it is required.

      To reproduce, using NVDA (open source):

      1. Go to Site administration / Courses / Add a new course
      2. Tab through the controls on the page until you get to the course full name box
        EXPECTED: At some point it should tell you that the box is required.
        ACTUAL: When you get to the box it just says "Course full name edit blank"

      Note that if you instead read all page content using arrow keys, you would get to the required icon, but it ought to work in forms mode (tab key).

      There are two ways to solve this problem:

      1 Move the required icon within the <label> tag. This way it would be read as part of the label; 'Course full name required edit blank'.

      2 Add the aria:required attribute to the input field (and, where possible, other types of field). This way it would be read (in NVDA, other screen readers might put it somewhere different) after the field type 'Course full name edit required blank'.

      Either of these would be acceptable according to our accessibility team.

      Because of the way the styling works in Moodle I think it will be a safer change to add aria:required attribute, so I'm going to implement that approach for most field types.

      NOTE: When you tab off the field, there is additional notification of the required state in a line below, which results in another accessibility bug that I might work on once I get this one done! But it should be possible to get the information when you arrive at the field, not only after you leave it, so this bug is still valid.

        1. findrequired.php
          2 kB
        2. MDL-80805-component library.mp4
          8.72 MB
        3. MDL-80805-component library.png
          MDL-80805-component library.png
          112 kB
        4. MDL-80805-supported fields.mp4
          11.98 MB
        5. required-fields-in-moodle.xlsx
          24 kB

            quen Sam Marshall
            quen Sam Marshall
            Katie Ransom Katie Ransom
            Jun Pataleta Jun Pataleta
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 hours, 55 minutes
                2h 55m

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