Add input labels to input forms
Part of #1106 (closed) (read this issue for access to the full audit and recommendations).
Forms in the application (e.g. search field, login form) use placeholder text but do not have labels associated with them.
Audit section (Section 1.3.1):
Some input fields don’t have a label, often because the label hasn’t been programmatically connected to the input field. Connection can be made using
<label for=>
and<input id=>
, where the for-value is equal to the id-value. See for instance theinput field ‘Username or email’ and ‘Change language’ on page https://open.audio/. The Search field on every page also misses a label; placeholder text is not sufficient as it disappears when the user starts typing. The issue with missing labels happens on multiple pages, also behind the log in.
When clicking on ‘Add new’ on page https://open.audio/@accessibilitytest/ a lightbox ‘Create channel’ appears in view. The radio buttons are not programmatically connected to the question. Use a
<fieldset>
and<legend>
(see https://www.w3.org/WAI/WCAG21/Techniques/html/H71 for how to do this.)