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

    • Affected Branches:
      MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE

      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

              Assignee:
              Unassigned
              Reporter:
              timhunt Tim Hunt
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              5 Vote for this issue
              Watchers:
              11 Start watching this issue

                Dates

                Created:
                Updated: