Accessibility Issues for Elementor Icon List Widgets

After encountering a challenge with the accessibility of Elementor’s Icon List widget, I found a solution that ensures full accessibility without displaying text visibly on the website. The issue arose when I needed to make the social media links (e.g., phone, Instagram, WhatsApp) accessible to screen readers without showing additional text to users.

To resolve this, I utilized a combination of semantic HTML (<ul>, <li>) and custom CSS to visually hide the text. The hidden text remains accessible to assistive technologies, allowing screen readers to interpret the link content properly while keeping the visual design clean and free of clutter.

This solution provides both a visually appealing and accessible presentation of social media links, and it adheres to web accessibility standards without compromising on design.

For those who might be facing similar challenges, this method offers a straightforward way to enhance the accessibility of icon buttons using CSS.

.elementor-icon-list-text { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; }

The page I need help with: [log in to see the link]