Das ist mir auch schon untergekommen: button- und a-href-Tag vertragen sich nicht. Lösung: Das a-href-Tag mit CSS als Button stylen.
Das ist mir auch schon untergekommen: button- und a-href-Tag vertragen sich nicht. Lösung: Das a-href-Tag mit CSS als Button stylen.
Und warum nicht einfach dem Button ein Formular außenrum spendieren?
Eine Klasse ist nicht notwendig. Dafür gibt es bereits seit Jahrzehnten Selektoren. Zum Beispiel:
a[href^="tel"] {
Anweisungen
}
a[href^="tel"]::before {
Anweisungen
}
Oder mit Beispielinhalt:
a[href^="tel"] {
display: inline-block;
padding: 1rem 1rem 1rem 1rem;
border: 1px solid grey;
border-radius: 0.5rem;
margin: 1rem 0rem 1rem 0rem;
}
a[href^="tel"]::before {
content: "📞";
font-size: 0.8rem;
margin-right: 0.5rem;
}
Das hat den Vorteil das nicht bei jeder Telefonnummer eine Klasse eingefügt werden muss. Oder das die CSS-Anweisungen einfach in den CSS-Teil einer anderen Webseite eingefügt werden kann.
Moin! Das ist der klassische Fehler mit dem "Button im Button". Der W3C-Validator meckert, weil du zwei interaktive Elemente ineinander verschachtelst: Der Browser weiß dann nicht genau, ob er den Klick für den <button> oder den <a>-Tag verarbeiten soll. Um das sauber zu lösen, hast du zwei Möglichkeiten: Entweder du wirfst den <button>-Tag raus und gestaltest den Link <a> einfach per CSS so, dass er wie ein Button aussieht, oder du nutzt nur den Button und erledigst den Aufruf über ein kurzes JavaScript. Die erste Variante ist aber deutlich besser für die Barrierefreiheit. Kleiner Tipp am Rande: Achte darauf, keine Leerzeichen im href="tel:..." zu haben. Manche älteren mobilen Browser kommen ins Straucheln, wenn die Nummer dort nicht in einem Block steht, auch wenn der angezeigte Text schön formatiert ist.
Re-Moin! Ich habe nochmal über unser Gespräch neulich nachgedacht und tiefer in der Dokumentation gestöbert, um sicherzugehen. Eine spannende Sache, die ich bei der Interaktionssteuerung entdeckt habe: Die Verwendung eines gestylten <a>-Links anstelle eines verschachtelten Buttons hilft enorm bei den "Touch Targets" auf Mobilgeräten. Google empfiehlt mittlerweile eine klickbare Fläche von mindestens 48px, damit man nicht daneben klickt, besonders wenn man es eilig hat.
Dieser Gedanke von Komfort und Einfachheit im Alltag hat mich auch an diese Seite erinnert. Als ich nach Inspirationen für ein Projekt suchte, bin ich auf diesen Shop für koordinierte Schmuckstücke und Accessoires für Familien und Paare gestoßen. Deren mobile Ergonomie ist echt flüssig, ohne unnötigen Schnickschnack. Das zeigt mal wieder, dass sauberer Code die gesamte Nutzererfahrung verbessert. Sag Bescheid, ob du deinen W3C-Check jetzt bestanden hast!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
