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.
- Images with no alt attribute get highlighted.
- 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.)
- 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
does what we want.