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

Accessibility issue: voice control problems because visible (visual) and accessible texts differ. (WCAG 2.1 - 2.5.3 Label in Name)

XMLWordPrintable

    • MOODLE_400_STABLE, MOODLE_401_STABLE

      Accessibility issue:

      Voice control users can activate controls such as links, buttons, or input fields by saying the visible name, even in conjunction with commands (e.g., click "Submit"). If the visible label does not appear in the stored accessible name of the control (i.e., the text that is programmatically determined as the label), the control may not be able to be activated by speech input, or only in a roundabout way. What you can see visually should at least also be included in the aria-label, so that the speech control works.

      Examples for this issue:
      • Instead of the displayed profile name (or the initials), the aria-label in the upper right corner is aria-label="User menu", which means that the visible label and the accessible name do not match. The problem is that aria-labels overwrite what is written in the visual text for the accessible text. So screen reader users do not get read out what is visible to others, therefore they cannot operate the control element by voice control.
      • In tables, e.g. in the forum, the names of the column headers or sort functions differ from the accessible names. E.G.: Column header "sort by topic starter in descending order" (accessible name) instead of "started by" (visible label). Screen reader users are read something other than what is displayed visually, therefore they cannot operate the control element by voice control.
      How to fix the issue:
      • For the user menu, instead of aria-label="User menu" it should also contain the initials (and if desired also the account name). For example something like aria-label="MM - Max Mustermann - User menu" would be correct.
      • For the forum headers, instead of aria-label="sort by topic starter in descending order". For example something like aria-label="started by - sort by topic starter in descending order" would be correct.
      Success Criterion:

            Unassigned Unassigned
            aburkard Andreas Burkard
            Votes:
            1 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:

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