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


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.

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

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



Sign In or Register to comment.