Loading...
Loading content...
Loading content...
Every form field needs a clear label or instruction explaining what to enter.
Why it matters: Users need to understand what information is required in each field.
Labels or instructions are provided when content requires user input.
What This Means: This success criterion requires that when content requires user input (like form fields), labels or instructions must be provided to help users understand what information is required. Labels should be clear, descriptive, and associated with their input fields.
Why It's Important: Users need to understand what information is required in each field to complete forms successfully. Without clear labels or instructions, users may not know what to enter, leading to errors, frustration, and form abandonment. This is especially important for users with cognitive disabilities who may need clear guidance, and for screen reader users who rely on labels to understand form fields.
Provide clear, descriptive labels for all form fields using <label> elements or aria-label attributes. Associate labels with their input fields using the 'for' attribute or by nesting inputs within labels. Provide instructions when input format is required (e.g., 'Date format: MM/DD/YYYY'). Use placeholder text as a supplement to labels, not a replacement. Ensure labels are visible and accessible to all users.
This criterion ensures that all users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with cognitive disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that screen reader users can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 3.3.2 Labels or Instructions are met. Check off items as you complete them.
Note: These are official W3C resources for 3.3.2. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 3.3.2 Labels or Instructions correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Understandable PrincipleGuideline
3.3 Input Assistance