@@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
Tabellenkalk
klawischnigg
Gunnar Bittersmann
MudGuard
Auge
Henry
Matthias Apsel