Details

    • Rank:
      44874

      Description

      Issue
      Alt text - the alt text for each user's picture in the online user's block is picture of user's full name then a link next to it is the user's full name. The image is there for a visual representation that has no context to a non sighted user. The alt text for these images should be empty so a screen read just reads who is online by the link in the name.

      Standard Level
      WCAG 2 1.1.1 (A) http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html

      Impact
      Moderate

      Example Link
      http://demo.moodle.net/

      Test Steps

      1. Add the online user's block
      2. Have a screen reader read the block.

        Activity

        Hide
        Michael de Raadt added a comment -

        Would it not be preferable to have a description of the image in the alt attribute?

        Show
        Michael de Raadt added a comment - Would it not be preferable to have a description of the image in the alt attribute?
        Hide
        Jason Hardin added a comment - - edited

        Alt text is supposed to contribute to the intelligibility of the page as an auditory or tactile reading experience.

        When the screen reader reads the online users block it will read as follows:

        Link image picture of sam student link sam student

        That doesn't seem intelligible to me and when the purpose of the link is for the user to view Sam student's profile page the alt text for the image and the link to the image get in the way of a auditory or tactile understanding of the block. I would even go so far as to recommend a title on the link that is more descriptive as to the purpose of the link.

        This occurs in other places in the Moodle interface like the gradebook where the picture of the student is right next to the student's name or in forum where the picture of the user is in the forum.

        Someone with more accessibility knowledge than I should weigh in here as this was not reported by Deque because the block was not enabled on the test site.

        Show
        Jason Hardin added a comment - - edited Alt text is supposed to contribute to the intelligibility of the page as an auditory or tactile reading experience. When the screen reader reads the online users block it will read as follows: Link image picture of sam student link sam student That doesn't seem intelligible to me and when the purpose of the link is for the user to view Sam student's profile page the alt text for the image and the link to the image get in the way of a auditory or tactile understanding of the block. I would even go so far as to recommend a title on the link that is more descriptive as to the purpose of the link. This occurs in other places in the Moodle interface like the gradebook where the picture of the student is right next to the student's name or in forum where the picture of the user is in the forum. Someone with more accessibility knowledge than I should weigh in here as this was not reported by Deque because the block was not enabled on the test site.
        Hide
        Rajesh Taneja added a comment -

        Patch works great Jason. I agree in this case alt and title should not go on image, as it is just for decoration and link is actually solving the purpose.

        [y] Syntax
        [y] Output
        [y] Whitespace
        [-] Language
        [-] Databases
        [y] Testing
        [-] Security
        [-] Documentation
        [y] Git
        [y] Sanity check

        Show
        Rajesh Taneja added a comment - Patch works great Jason. I agree in this case alt and title should not go on image, as it is just for decoration and link is actually solving the purpose. [y] Syntax [y] Output [y] Whitespace [-] Language [-] Databases [y] Testing [-] Security [-] Documentation [y] Git [y] Sanity check
        Hide
        Dan Poltawski added a comment -

        Hi Jason,

        I was discussing this with Sam and I think that this may not be the complete solution, i'll give the example of my online user profile on moodle.org:

        <div class="user">
          <a href="https://moodle.org/user/view.php?id=104159&amp;course=5">
             <img src="https://moodle.org/pluginfile.php/3288/user/icon/moodleofficial/f2?rev=461357" alt="Dan" title="Dan" class="userpicture" width="16" height="16">
          </a>
          <a href="https://moodle.org/user/view.php?id=104159&amp;course=5" title="2 secs">
             Dan Poltawski
          </a>
        </div>
        

        As you can see, there is an anchor element wrapping the profile picture and removing the alt text would then leave an anchor on the image without anything conveying what its doing. It looks like the full solution would be to wrap both the the profile image and the users name in the same anchor.

        Show
        Dan Poltawski added a comment - Hi Jason, I was discussing this with Sam and I think that this may not be the complete solution, i'll give the example of my online user profile on moodle.org: <div class= "user" > <a href= "https: //moodle.org/user/view.php?id=104159&amp;course=5" > <img src= "https: //moodle.org/pluginfile.php/3288/user/icon/moodleofficial/f2?rev=461357" alt= "Dan" title= "Dan" class= "userpicture" width= "16" height= "16" > </a> <a href= "https: //moodle.org/user/view.php?id=104159&amp;course=5" title= "2 secs" > Dan Poltawski </a> </div> As you can see, there is an anchor element wrapping the profile picture and removing the alt text would then leave an anchor on the image without anything conveying what its doing. It looks like the full solution would be to wrap both the the profile image and the users name in the same anchor.
        Hide
        Jason Fowler added a comment -

        Good point Dan, will get that sorted ASAP. Thanks

        Show
        Jason Fowler added a comment - Good point Dan, will get that sorted ASAP. Thanks
        Hide
        Jason Fowler added a comment -

        Thanks for pointing that out Dan, all fixed now, and pushing for integration again.

        Show
        Jason Fowler added a comment - Thanks for pointing that out Dan, all fixed now, and pushing for integration again.
        Hide
        Dan Poltawski added a comment -

        Hi Jason,

        That line is getting really long now, is there any chance you could break it up a bit?

        Show
        Dan Poltawski added a comment - Hi Jason, That line is getting really long now, is there any chance you could break it up a bit?
        Hide
        Jason Fowler added a comment -

        Sorry bout that Dan,

        Hopefully thats the last of it.

        Show
        Jason Fowler added a comment - Sorry bout that Dan, Hopefully thats the last of it.
        Hide
        Dan Poltawski added a comment -

        Looks great. Integrated to master, 24, 23 and 22. Thanks Jason.

        Show
        Dan Poltawski added a comment - Looks great. Integrated to master, 24, 23 and 22. Thanks Jason.
        Hide
        Mark Nelson added a comment -

        Works as expected. Passing.

        Show
        Mark Nelson added a comment - Works as expected. Passing.
        Hide
        Eloy Lafuente (stronk7) added a comment -

        Many thanks for your effort, the whole Moodle Community will be enjoying your great solutions starting now!

        Closing, ciao

        Show
        Eloy Lafuente (stronk7) added a comment - Many thanks for your effort, the whole Moodle Community will be enjoying your great solutions starting now! Closing, ciao

          People

          • Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: