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

Accessibility issue: decorative icons should be hidden from the screen reader (WCAG 2.1 - 1.1.1 Non-text Content)

XMLWordPrintable

    • MOODLE_400_STABLE, MOODLE_401_STABLE
    • MOODLE_401_STABLE, MOODLE_402_STABLE, MOODLE_403_STABLE
    • MDL-77651-401
    • MDL-77651-403
    • MDL-77651-master
    • Hide

      Note: Easier to test on Firefox.

      Calendar
      1. Log in as a user
      2. Go to the dashboard. The calendar block should be there.
      3. See the links indicating the previous and next months.
      4. Right-click on the link to the previous month and select "Inspect accessibility properties"
      5. Confirm that the accessible name of the link only includes the month's name. No arrow character is included.
      6. Repeat the same steps for the link for the next month.
      Testing link_arrow_right() and link_arrow_left()
      1. Download caltest.php to your Moodle instance's root folder.
      2.  Open caltest.php on your browser ([your_moodle_url]/caltest.php)
      3. Inspect the accessibility properties of the Next and Previous links.
      4. Confirm that the accessible names only indicate "Next" and "Previous". No arrow characters are included.
      Show
      Note: Easier to test on Firefox. Calendar Log in as a user Go to the dashboard. The calendar block should be there. See the links indicating the previous and next months. Right-click on the link to the previous month and select "Inspect accessibility properties" Confirm that the accessible name of the link only includes the month's name. No arrow character is included. Repeat the same steps for the link for the next month. Testing link_arrow_right() and link_arrow_left() Download  caltest.php to your Moodle instance's root folder.  Open caltest.php on your browser ( [your_moodle_url] /caltest.php) Inspect the accessibility properties of the Next and Previous links. Confirm that the accessible names only indicate "Next" and "Previous". No arrow characters are included.
    • 1
    • Team Hedgehog 2023 Review 3

      Accessibility issue:

      Special characters like the left arrow "◄" should be hidden from the screen readers and other assistive technologies, since these are only there for decoration and only cause confusion for screen reader users (especially since they are read out in English even if another language is set).

      Example for this issue:

      The arrows in the calendar, such as the left arrow "◄" when switching to the last month in the calendar, are read out by the screen reader as a "left pointing pointer". Only the function of the control should be described and not its appearance.

      How to fix the issue:

      These special characters should be placed in an additional <span> element and hidden from the screen reader with aria-hidden="true" or given a meaningful aria-label as alternative text, but describing only the function and not the appearance.

      Success Criterion:

       * WCAG 2.1 - 1.1.1 Non-text Content 
       * EN 301 549 v.3.2.1 (PDF) - 9.1.1.1 Non-text content

            jpataleta Jun Pataleta
            aburkard Andreas Burkard
            Huong Nguyen Huong Nguyen
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            2 Vote for this issue
            Watchers:
            12 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, 21 minutes
                2h 21m

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