Icons sind toll und alles, aber wie uns immer wieder gezeigt wurde, erledigen sie oft nicht allein ihren Job. Selbst wenn Sie die Barrierefreiheit gut im Griff haben und sicherstellen, dass begleitender Text für assistive Technologien vorhanden ist, könnten Sie ironischerweise Menschen verwirren, die visuell browsen, wie in der Situation, die Matt Wilcox in diesem verlinkten Artikel mit seiner Mutter beschreibt.
Ich bin ein Fan von diesem Markup-Muster, einschließlich des Inline-SVGs als bevorzugtes Icon-System
<button>
<svg class="icon icon-cart" viewBox="0 0 100 100" aria-hidden="true">
<!-- all your hot svg action, like: -->
<path d=" ... " />
</svg>
Add to Cart
</button>Oder, wenn der Button wirklich ein Link und keine JavaScript-gesteuerte Aktion ist, verwende ich einen <a href=""> anstelle eines <button>-Wrappers.