@@Gunnar Bittersmann
Für den Submit-Button solltest du besser das für Buttons vorgesehene
button
-Element verwenden.Darf man nach dem Grund fragen?
Einen hab ich noch:
Bei button
kann man Pseudoelemente button::before
, button::after
verwenden, bei input
nicht.
<button> <strong>Gehe in das Gefängnis.</strong> Begib Dich direkt dorthin. Gehe nicht über Los. Ziehe nicht 4000 Euro ein. </button>
Dafür könnte besser sein:
<div class="clickable-area">
<button>Gehe in das Gefängnis.</button>
<p>Begib Dich direkt dorthin. Gehe nicht über Los. Ziehe nicht 4000 Euro ein.</p>
</div>
Dann bekommen Screenreader-Nutzer nicht jedesmal beim Fokussieren des Buttons den gesamten Text vorgelesen, sondern nur die Buttonbeschriftung „Gehe in das Gefängnis.“
Mit Stil:
.clickable-area
{
position: relative;
border: thin solid;
border-radius: 0.5em;
padding: 1em;
background: hsl(200, 80%, 80%);
}
.clickable-area button
{
border: none;
background: transparent;
padding: 0;
font: inherit;
font-weight: bold;
}
.clickable-area button::after
{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.clickable-area p
{
margin: 0;
}
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann