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

Too easy to forget to add alt to images dropped or pasted into Atto HTML editor

    XMLWordPrintable

Details

    • MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE, MOODLE_400_STABLE
    • MDL-68604-master
    • Hide

      Step 1 : Go to your profile page

      Step 2 : Go to Edit Profile page

      Step 3 : Add a sample image without alt property in Description field

      Example :

      <img src="imagesourceurl" width="1920" height="1080">

      Expected result :

      We should see an warning message:

      "Some images in this content(highlighted) are lacking proper alt text. Please edit the image properties to fix this." and the error image is highlighted.

      Step 5: Add the alt tags to the image

      Expected result :

       We should not see the warning message.

       

      Show
      Step 1 : Go to your profile page Step 2 : Go to Edit Profile page Step 3 : Add a sample image without alt property in Description field Example : <img src="imagesourceurl" width="1920" height="1080"> Expected result : We should see an warning message: "Some images in this content(highlighted) are lacking proper alt text. Please edit the image properties to fix this." and the error image is highlighted. Step 5: Add the alt tags to the image Expected result :  We should not see the warning message.  

    Description

      For accessibility, significant images should have a meaningful alt="..." attribute, and decorative images should have alt="".

      If you drag and drop an image into Atto (or, use MDL-47750 to paste an image) then it is created with no alt, but it is not clear to the casual editor that something is missing.

      I suggest:

      1. Images with no alt attribute get highlighted.
      2. There is client-side validation, which shows a validation message under the editor if any images are missing alt-text (in exactly the same way that a Required atto field gets client-side validation - see Question text field when creating a new true-false field for an example.)
      3. The client-side validation should be backed-up by server-side validation.

      That could look like this - the three images in the editor are 1) a decorative pattern with alt="", 2) a real photo with proper alt text, and 3) a photo (of inaccessible pinnacle ) with no alt attribute at all.

      (Perhaps the error should also contain more of a call to action. Perhaps add "Please edit the image properties to fix this.)

      Note, I was playing, for 1. CSS like

      .editor_atto_content img:not([alt]) {
      	box-shadow: 0 0 10px 3px #800;
      }
      

      does what we want.

      Attachments

        Issue Links

          Activity

            People

              vuvanhieu143 Hieu Vu
              timhunt Tim Hunt
              Tim Hunt Tim Hunt
              Andrew Lyons Andrew Lyons
              Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Stevani Andolo, Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Stevani Andolo
              Votes:
              6 Vote for this issue
              Watchers:
              21 Start watching this issue

              Dates

                Created:
                Updated:

                Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 hour, 31 minutes
                  1h 31m