Bonjour,
Cette discussion fait suite à cette discussion.
Quelle est la meilleure stratégie pour rendre accessible un code de ce genre qui est très fréquent ?
Raphaël conseille :
Agrémenté d'un CSS trouvé sur ce site.
}
Peut-on alléger avec un simple aria-label dans le bouton ?
Je sais que ce dernier code ne crée pas d'alerte dans PageSpeed Insights, rubrique Accessibilité.
Modifié par boteha_2 (03 Mar 2024 - 14:57)
Cette discussion fait suite à cette discussion.
Quelle est la meilleure stratégie pour rendre accessible un code de ce genre qui est très fréquent ?
<form>
<p><input type="text" id="fab" /><button type="submit"><svg><!-- contenu du SVG --></svg></button></p>
<p>Recherche par référence fabricant</p>
</form>
Raphaël conseille :
<button>
<svg aria-hidden="true">
<!-- contenu du SVG -->
</svg>
<span class="visually-hidden">Nom accessible masqué à l'écran</span>
</button>
Agrémenté d'un CSS trouvé sur ce site.
.visually-hidden:not(:focus):not(:active) {
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
Peut-on alléger avec un simple aria-label dans le bouton ?
<form>
<p><input type="text" id="fab" /><button type="submit" aria-label="Recherche par référence fabricant"><svg><!-- contenu du SVG --></svg></button></p>
<p>Recherche par référence fabricant</p>
</form>
Je sais que ce dernier code ne crée pas d'alerte dans PageSpeed Insights, rubrique Accessibilité.
Modifié par boteha_2 (03 Mar 2024 - 14:57)