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

Online status in messaging toolbar has no alt text. Plus incorrect use of ARIA label

XMLWordPrintable

    • MOODLE_401_STABLE, MOODLE_402_STABLE
    • MOODLE_402_STABLE, MOODLE_403_STABLE
    • MDL-80183-403
    • Hide
      1. Log in as admin
      2. Open messaging drawer
      3. Under Starred (1) inspect the green "Online" icon next to your user avatar
      4. Confirm the icon contains appropriate title="..." and aria-label="..." attributes (which come for free when using pixicon/fontawesome)
      5. Create a new user
      6. View profile of new user
      7. Press Message and send them a message
      8. Log out
      9. Log in as new user
      10. Open messaging drawer
      11. Expand the Private (1) section
      12. Inspect the (1) element (next to Private)
      13. Confirm it's container has aria-labelledby="..." attribute that points to "sr-only" element within the same container
      14. Confirm the latter element contains the content "1 total conversations"
      15. Inspect the blue (1) element to the far right of Private (1)
      16. Confirm it's container has aria-labelledby="..." attribute that points to "sr-only" element within the same container
      17. Confirm the latter element contains the content "There are 1 unread conversations"
      Show
      Log in as admin Open messaging drawer Under Starred (1) inspect the green "Online" icon next to your user avatar Confirm the icon contains appropriate title="..." and aria-label="..." attributes (which come for free when using pixicon/fontawesome) Create a new user View profile of new user Press Message and send them a message Log out Log in as new user Open messaging drawer Expand the Private (1) section Inspect the (1) element (next to Private ) Confirm it's container has aria-labelledby="..." attribute that points to "sr-only" element within the same container Confirm the latter element contains the content " 1 total conversations " Inspect the blue (1) element to the far right of Private (1) Confirm it's container has aria-labelledby="..." attribute that points to "sr-only" element within the same container Confirm the latter element contains the content " There are 1 unread conversations "
    • WP Sprint 2024-I1.2 (Clones)

      This issue was detected during accessibility audit on learner-facing pages in Workplace performed in August-September 2023 by AbleDocs.

      There are two issues here actually but since they are both very small and in the same piece of code, I joined them in one issue.

      Problem 1: Icon with no alt text

      There is no alternative text for the green dot that indicates online status in the messages sidebar.
      Informative images require descriptive alt text.
      See Fig.0.01

      People with difficulty perceiving visual content use assistive technology to read text aloud or convert it to braille. Text alternatives help people who use these technologies.
      The purpose of the icon is missed by those users of assistive technology.

      Recommendation:
      Interface elements such as icons require alt text to give meaning to that interface.

      1.1.1 Text Alternative (A) https://www.w3.org/TR/WCAG21/#non-text-content
      1.3.6 Identify Purpose (AAA) https://www.w3.org/TR/WCAG21/#identify-purpose

      Problem 2: Incorrect use of ARIA label

      aria-label has been applied to an element that is not interactive, or is a child element within an interactive code block.
      Specifically, the quantity indicator in each accordion within the messages sidebar
      See Fig. 0.01

      Content within the aria-label is not read out by assistive technology and subsequently missed by users who rely on this technology to navigate web pages.

      Recommendation:
      Avoid using ARIA unnecessarily. Semantic HTML should be the first solution.
      Use ARIA-LABEL only on interactive elements, or elements that have been made interactive using ARIA roles.
      Use ARIA-LABELLEDBY or ARIA-DESCRIBEDBY for non-interactive elements.

      NOTE:
      Removing the "aria-label" from the "section-total-count-container" data region, and "aria-hidden" from the "section-total-count" data region immediately below appears to resolve this issue.

            pholden Paul Holden
            marina Marina Glancy
            Carlos Castillo Carlos Castillo
            Andrew Lyons Andrew Lyons
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            14 Start watching this issue

              Created:
              Updated:
              Resolved:

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

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