@@Rolf b
Der Span mit dem Sternchen ist für Assistenzsysteme eher störend, weil sie es mit vorlesen. Man müsste ihn dann mit einem aria-Attribut ausblenden. Sollte ich mich da irren, wird Gunnar mich bestimmt gern korrigieren 😂.
Soweit richtig.
Es dürfte besser sein, ihn per :after hinzuzufügen.
Hier ist Korrektur angesagt: (Einige/die meisten?) Screenreader lesen auch generierten Inhalt vor.
In Heydon Pickerings „Inclusive Design Patterns“, Seite 275:
<label for="email">Your email address <strong class="red" aria-hidden="true">*</strong></label>
<input type="text" id="email" name="email" aria-required="true">
(Wobei class="red"
ebenso fragwürdig ist wie die Verwendung des strong
-Elements. Den falschen type
hab ich schon angemeckert.)
aria-required
statt HTML5 required
(noch) wegen besserer Untestützung in AT.
LLAP 🖖
EDIT: Ich schieb dann mal noch hinterher:
<label for="email">Your email address <span class="marker" aria-hidden="true">*</span></label>
<input type="email" id="email" name="email" aria-required="true">
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory