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

Improve accessibility of profile images

    XMLWordPrintable

Details

    • MOODLE_310_STABLE, MOODLE_311_STABLE, MOODLE_39_STABLE, MOODLE_400_STABLE
    • MOODLE_311_STABLE
    • MDL-69474-311
    • 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).

    Description

      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
       

      Attachments

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

        Issue Links

          Activity

            People

              dinhhien0307 DinhPhamVinhHien
              dinhhien0307 DinhPhamVinhHien
              Sam Marshall Sam Marshall
              Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
              Janelle Barcega Janelle Barcega
              Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              2 Vote for this issue
              Watchers:
              10 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                17/May/21

                Time Tracking

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