Zur Übersicht

Barrierefreie Elementor Icon-List auf Handy ohne Text

Voraussetzung

Eine Elementor Icon-List mit Icon, Text und Link (z. B. Telefon, E-Mail) im Header oder Footer. Ergebnis: Am Handy sind nur die Icons sichtbar, für Assistenzssysteme bleiben die Link-Ziele korrekt lesbar.

Schritt 1: JavaScript (Header)


<script>
document.addEventListener('DOMContentLoaded', function () {
  var skipLink = document.querySelector('a.skip-link[href="#content"]');
  var target = document.getElementById('content');

  if (skipLink && target) {
    skipLink.addEventListener('click', function () {
      target.setAttribute('tabindex', '-1');
      target.focus({ preventScroll: true });
    });
  }
});
</script>

Schritt 2: CSS


@media (max-width: 991px) {
  .elementor-icon-list-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
}