РЕДАКТИРОВАТЬ - это решение работает только в браузерах chrome / webkit, поскольку комментарий указывает на то, что это взлом. См. Мой другой ответ для кросс-браузерного решения.
Хотя это невозможно с текстом , возможно заменить изображение другим, заставив вашего пользователя заполнить альтернативный текст (что вы можете объяснить в другом месте в редакторе).
Это даст визуальную подсказку, что изображение не имеет атрибута alt.
Соедините это с рамкой, и вы получите победитель.
В приведенном ниже примере я настроил его так, чтобы изображение, не содержащее атрибута alt, было заменено и имело 5-ти пиксельный «бордюр» (я использую offset, чтобы он не испортил документооборот).
Я установил пустой атрибут alt для пунктирной рамки (и заменил изображение, но это может или не может быть правильным для ваших обстоятельств, если изображение может быть декоративным).
Очевидно, что это не поможет пользователям программ чтения с экрана, которые используют ваше программное обеспечение, но это все равно потребует JavaScript, так как поддержка чтения псевдотекста в лучшем случае ненадежна.
Создайте изображение с надписью 'отсутствует Alt text ', и вы настроены.
очевидно, используйте это CSS только в своем бэк-энде
img{
width:200px;
height: 200px;
}
img:not([alt]) {
outline: solid 5px red;
outline-offset: -5px;
content:url("https://www.publicdomainpictures.net/pictures/250000/nahled/erorr.jpg");
}
img[alt=""] {
outline: dashed 5px red;
outline-offset: -5px;
content:url("https://freesvg.org/img/molumen_red_square_error_warning_icon.png");
}
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150" alt="Great alternative text">