0

I am using icons from boxicons but the documentation says that to use it in html, I have to declare it like this :

<i class='bx bx-user'></i>

Isn't it an accessibility problem to use the i tag? And if it is, what should I change to make my page more accessible?

klaus
  • 754
  • 8
  • 28
  • Ironically I just answered a very similar question on font awesome where all the same principles should apply, doe it answer your question on how to make icons accessible? https://stackoverflow.com/a/62340579/2702894. Ignore the first paragraph as that was specific to the question, the fiddle and advice is all relevant though. – GrahamTheDev Jun 12 '20 at 11:03
  • Thank you. So, I add aria-hidden="true" attribute to the icon and I had a hidden span (with your visually-hidden class) that describes the icon ? – klaus Jun 12 '20 at 12:37
  • yeah that is exactly it. Just bear in mind that you should describe the state the icon represents if it is a check, cross etc. (e.g. selected, cancel etc.) If that answers your question I will mark this question for closing as duplicate if that is ok? – GrahamTheDev Jun 12 '20 at 12:40
  • 1
    Ok, thank you ! You can close this question ! – klaus Jun 12 '20 at 12:42

0 Answers0