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

Improve accessibility of profile images

XMLWordPrintable

    • MOODLE_310_STABLE, MOODLE_311_STABLE, MOODLE_39_STABLE, MOODLE_400_STABLE
    • MOODLE_311_STABLE
    • MDL-69474-master
    • Hide
      1. Log in as any user.
      2. If necessary, edit your profile to set the 'Picture description' field to blank.
      3. Go to your profile page.
      4. Verify that clicking on the user picture image does nothing (it is not a link).
      5. Open the developer console then inspect user picture image.
      6.  Verify that the alt attribute is included, but empty.
      7. Edit your profile to set some text for the 'Picture description' field, and save changes.
      8. Verify that the alt attribute now includes the provided description (same as previous behaviour).
      Show
      Log in as any user. If necessary, edit your profile to set the 'Picture description' field to blank. Go to your profile page. Verify that clicking on the user picture image does nothing (it is not a link). Open the developer console then inspect user picture image.   Verify that the alt attribute is included, but empty. Edit your profile to set some text for the 'Picture description' field, and save changes. Verify that the alt attribute now includes the provided description (same as previous behaviour).

      Some recent accessibility testing found some improvements we could make to profile:
       
      1) When viewing a profile page, the image of that particular profile should no longer be a link. Clicking on the link takes you to the same page and is unnecessary so should be removed. This creates an extra tabstop for keyboard users to get past.
       
      2) The default alt text used for profile images, unless changed by the user, is "Picture of Profile Name". This should be changed so that unless a description is set by the user, profile pictures have a blank alt tag. This will stop name duplication for screenreader users. See this W3C link: https://www.w3.org/WAI/tutorials/images/decorative/#decorative-image-as-part-of-a-text-link
       

        1. image-2021-03-16-17-37-14-885.png
          image-2021-03-16-17-37-14-885.png
          100 kB
        2. image-2021-03-17-10-50-17-465.png
          image-2021-03-17-10-50-17-465.png
          88 kB

            dinhhien0307 DinhPhamVinhHien
            dinhhien0307 DinhPhamVinhHien
            Sam Marshall Sam Marshall
            Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
            Janelle Barcega Janelle Barcega
            Votes:
            2 Vote for this issue
            Watchers:
            9 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 hours, 35 minutes
                4h 35m

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