Faced the following problem: According to W3C, all non-textual content should have alternate text. I understand that for <img> attribute atl='...' sucks, but I use in HTML <span [ngClass]="link === 'rainbow' ? 'icon-chart' : 'icon-graph-bar'"></span> , and in CSS respectively .icon-graph-bar:before {content: "\EA83";} and .icon-graph-bar:before {content: "\E93F";} . So when you add the attribute atl='...' to the <span> compiler swears that the attribute atl='...' cannot be in the <span> . Tell me how to solve the problem?

  • angular cannot swear at this, firstly, secondly, only img has an alt tag, for other elements use title - overthesanity

1 answer 1

The span tag does not have an alt attribute, so this is not valid. The span tag itself is a text element, and does not need an alternative text, your icons are added through pseudo-elements and do not appear in the tree house, and besides, most likely they themselves are an icon font. Of course, you can pervert and check for the display or upload of these icons, and if they are not displayed, display the corresponding text in the span tags or even write it right away, and when displaying icons, hide it, but for my taste it is unnecessary.

UPD

can still do like this

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

At least Yandex considers it valid and reads the attribute attribute as alternative text for the block

  • In this case, it will be a tooltip, and alternative text appears when, for some reason, the content could not be displayed (for example, the img tag could not load the image). - user218976
  • Yes, this attribute is in principle for this purpose and was invented, but search engines consider it additional to non-textual content. Well, if you strictly adhere to the W3C, then you need to do as I wrote at the beginning, and return with a check for loading, otherwise nothing. although I will note that the icon fonts are not considered pictures, but rather special characters - Broouzer King