0

Столкнулся со следующей проблемой: Согласно W3C весь не текстовый контент должен иметь альтернативный текст. Я понимаю что для <img> сужествует атрибут atl='...', но я использую в HTML <span [ngClass]="link === 'rainbow' ? 'icon-chart' : 'icon-graph-bar'"></span>, а в CSS соответственно .icon-graph-bar:before {content: "\EA83";} и .icon-graph-bar:before {content: "\E93F";}. Так вот при добавлении атрибут atl='...' к тегу <span> компилятор ругается что атрибут atl='...' не может быть у тега <span>. Подскажите как решить проблему?

1
  • angular не может на такое ругаться, это во-первых, во-вторых тег alt есть только у img, для других элементов используйте title
    – arturovt
    6 авг 2018 в 11:07

1 ответ 1

2

У тега span нету атрибута alt , поэтому это и не валидно. Тег span сам по себе является текстовым элементом, и не нуждается в альтернативном тексте, ваши иконки добавляются через псевдоэлементы и в дом дереве как бы не фигурируют, да и к тому же скорее всего сами по себя являются иконочным шрифтом. Вы конечно можете извратиться и проверять на отображение или подгрузку этих иконок и если они не отображаются выводить соответствующий текст в тегах span или даже сразу его писать а при отображении иконок скрывать его, но на мой вкус это излишне.

UPD

еще можете сделать вот так

<span title="альтернативный текст"></span>

по крайней мере яндекс считает это допустимым и читает атрибут тайтл как альтернативный текст для блока

2
  • В данном случае это будет являться всплывающей подсказкой, а альтернативный текст появляется когда по какой-то причине не удалось отобразить содержимое (пример- у тега img не удалось загрузить картинку).
    – user218976
    6 авг 2018 в 10:22
  • да, этот атрибут в принципе для этого и был придуман, но поисковики считают его дополнительным к не текстовому контенту. ну и если совсем строго придерживаться W3C то нужно делать как я писал в начале, ивзращаться с проверкой на подгрузку иначе никак. хотя замечу что иконочные шрифты не считаються картинками, скорее спец символами 6 авг 2018 в 10:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.