Могу ли я не отображать альтернативный текст для изображений? Могу ли я стиль alt теги? Или скрыть их для людей с нарушениями зрения?

Question

Вопрос новичка, так что прости меня.

У меня есть alt тэги для изображений для доступности.

Однако, когда изображение недоступно, оно отображает alt, который является названием для mov ie. Ниже это фактическое название для mov ie. Заголовок отображается дважды, что выглядит не очень хорошо.

Так есть ли способ не отображать тег alt? в то же время, конечно, сохраняя его для программ чтения с экрана и т. д. c?

Если это так, то как.

Если нет, то можете ли вы использовать alt?

Вопрос Noob, который я знаю Я просто хочу придерживаться лучших методов доступности, в то же время создавая красивые сайты.

Answer 1

да, вы можете стилизовать alt-теги, и это хорошая практика, особенно в новостных рассылках или платформах, которые могут блокировать загрузку изображений Все, что вам нужно сделать, это либо добавить встроенный стиль в тег img, либо добавить внешние стили внутри img (шрифт, цвет, размер, выравнивание и т. Д. c.)

Следующая лучшая вещь, которую вы можете Для вашего заголовка и alt проблема заключается в том, чтобы по-прежнему использовать тег alt, но оставить его пустым. Это позволит программам чтения с экрана по-прежнему распознавать существование тега alt, сохраняя при этом контекст, так как заголовок mov ie будет по-прежнему отображаться / читаться.

Answer 2

Однако, когда изображение недоступно, отображается альт, который является заголовком для mov ie. Ниже это фактическое название для mov ie. Название отображается дважды, что выглядит не очень хорошо.

Я считаю, что это то, что вы хотите:

.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

<img class="hide-text" src="example.com" alt="some text">

См. Также : Замена хака -9999px (замена нового изображения) .

Конечно, вы можете применить любой другой стиль текста. Читатели текста по-прежнему будут читать альтернативный текст.

---

Так есть ли способ не отображать тег alt? сохраняя его для программ чтения с экрана и т. д. c?

Добавьте текст, описывающий изображение, с атрибутом aria-hidden , это сообщит совместимым программам чтения с экрана: пропустите элемент.

Примечание : в идеале вы бы добавили видимое описание изображения с <figure> и <figcaption>.

См. Также : Некоторые сведения о alt Текст .