Google PageSpeed - Accessibility Failure - [aria-*] for Side_slide Icons

Hello,

Google PageSpeed reports that the HTML code of icons with accessibility labels are incorrect, causing a drop in PageSpeed score for the Accessibility category.

It seems, in this scenario, the <i> tag on which the aria-label parameter is not allowed here.

  1. <ul class="contact_details" aria-label="contact details">
  2.  <li class="phone phone-1"><i class="icon-phone" aria-label="phone"></i><a href="tel:XXX">XXX</a></li>
  3. <li class="phone phone-2"><i class="icon-phone" aria-label="phone"></i><a href="tel:YYY">YYY</a></li>
  4. <li class="mail"><i class="icon-mail-line" aria-label="mail"></i><a href="mailto:ZZZ">ZZZ</a></li>
  5. </ul>
  6. 

Could you take a look at how this could be implemented preserving the accessibility functionality and conforming to Google's best-practice requirements?


Thanks

Comments

Sign In or Register to comment.