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

Details

    • MOODLE_401_STABLE, MOODLE_402_STABLE
    • MOODLE_402_STABLE, MOODLE_403_STABLE
    • MDL-80183-402
    • 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)

    Description

      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.

      Attachments

        Issue Links

          Activity

            People

              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

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

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

                  Clockify

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