janeway icon indicating copy to clipboard operation
janeway copied to clipboard

form field missing a label

Open StephDriver opened this issue 1 year ago • 1 comments

A11y issue because form field appears to be missing a label. This is due to the structure in the HTML where the input tag is included within the label tag:

Example found:

src/themes/OLH/templates/elements/journal/article_filter_form.html:
            <label for="section-{{ section.id }}"><input id="section-{{ section.id }}"
                                                         value="{{ section.id }}" type="checkbox"
                                                         name="filter[]"
                                                         {% if section.id in filters %}checked="checked"{% endif %}>{{ section.name }}
            </label>

The label tag should be closed before the input tag opens.

StephDriver avatar Jan 23 '24 12:01 StephDriver

nb nesting input inside label tag is valid HTML, but can cause problems for screenreaders, hence coming up as an A11y issue rather than causing the page not to display properly.

StephDriver avatar Jan 23 '24 13:01 StephDriver