[WAVE Accessibility] Search - Missing Form Label

Created on 11 October 2023, 12 months ago
Updated 12 October 2023, 12 months ago

Problem/Motivation

WAVE reported: Missing form label

What It Means: A form control does not have a corresponding label.

Why It Matters: If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls.

How to Fix It: If a text label for a form control is visible, use the element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls.

Code:

<input type="search" name="q" class="search-input" placeholder="Search">

Steps to reproduce

View any page

Proposed resolution

Add a label as per https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html

πŸ› Bug report
Status

Fixed

Version

3.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States froboy Chicago, IL

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024