@@Achot
Durch die Mediaquery blendest du das label nur auf Bildschirmen aus. Nutzer von Screenreadern bekommen die entsprechenden (und für sie notwendigen) Beschriftungen dennoch vorgelesen.
damit kann ich leben. Und die Infos habe ich noch nie bekommen ;)
Das wäre auch besser so geblieben; die Information ist nämlich falsch.
Du kannst aber sicher auch damit leben:
.visually-hidden
{
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
Was nicht auf dem Bildschirm zu sehen sein soll, aber von Screenreadern vorgelesen werden soll, bekommt die Klasse visually-hidden
verpasst.
Man könnte die Styles auch den entsprechenden Elementen direkt verpassen, aber die Information, dass etwas nicht visuell, aber doch von AT (assisive technology) wiedergegeben wird, darf durchaus im Markup verankert sein.
Label visuell zu verstecken und die Beschriftung mit placeholder
zu machen ist dennoch unsinnig. Vielleicht kannst du auch damit leben, Label wie Placeholder aussehen zu lassen.
LLAP 🖖
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory