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

Details

    • MOODLE_400_STABLE, MOODLE_401_STABLE
    • MOODLE_401_STABLE, MOODLE_402_STABLE, MOODLE_403_STABLE
    • MDL-77651-401
    • MDL-77651-402
    • 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

    Description

      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

      Attachments

        Issue Links

          Activity

            People

              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

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

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

                  Clockify

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