Concise guide to native HTML input element types with WCAG and ARIA best practices.

html-input-elements.md

This guide explores HTML <input> element types with accessibility best practices. Each type includes WCAG enhancements like proper labeling and error handling, along with ARIA attributes to improve compatibility with assistive technologies. Following these practices helps create a more inclusive and accessible user experience for everyone.

Type	WCAG Enhancement	ARIA Enhancement
<input type="text">	Ensure appropriate label or aria-label/aria-labelledby. Provide placeholder for context if no label.	aria-required="true" if input is mandatory. Use role="textbox" explicitly for custom stylized inputs. aria-invalid="true" for errors.
<input type="password">	Always associate with a label.	aria-describedby to link to helper/error text. aria-invalid when input fails validation.
<input type="email">	Use a visible label with clear instructions (e.g., "Enter your email address").	aria-invalid when incorrect format is entered. aria-required if necessary.
<input type="number">	Use min, max, and step to provide boundaries.	aria-valuemin, aria-valuemax, and aria-valuenow for custom widgets.
<input type="url">	Provide clear instructions for URL format.	aria-invalid for error messaging.
<input type="tel">	Indicate phone number formatting requirements via helper text.	Link helper text using aria-describedby.
<input type="search">	Provide a clear label or placeholder.	aria-label for contextual search inputs (e.g., "Search this site").
<input type="checkbox">	Use a descriptive label.	aria-checked="true/false" for custom components. Use aria-controls if toggling visibility of other elements.
<input type="radio">	Group radios with fieldset and legend.	aria-checked="true/false" for stylized radios. Use aria-labelledby for dynamic labels.
<input type="range">	Provide visual feedback for the selected value.	aria-valuemin, aria-valuemax, and aria-valuenow. Use aria-labelledby for instructions.
<input type="file">	Ensure the label is descriptive and clear (e.g., "Upload your profile picture").	aria-describedby for helper or error text.
<input type="date">	Ensure compatibility with assistive technologies (use polyfills if necessary).	aria-haspopup="dialog" if custom date pickers are used.
<input type="datetime-local">	Use helper text for expected format.	Include aria-describedby for additional instructions.
<input type="month">	Provide clear instructions for required format.	Use aria-describedby for additional context.
<input type="week">	Include a visible label indicating the expected input.	aria-describedby for helper text.
<input type="time">	Use a label to describe the expected time format.	aria-labelledby for associating with labels.
<input type="color">	Provide a clear label for the input (e.g., "Choose a background color").	aria-labelledby to connect a custom color picker.
<input type="image">	Use alt text for the image input.	Use aria-label for additional descriptions if the image is decorative.
<input type="button"> <input type="submit"> <input type="reset">	Provide a clear value or associate with a descriptive label.	aria-pressed="true/false" for toggle buttons. Use aria-labelledby for buttons with dynamic labels.

---

General Accessibility Practices for All Input Types

• Labels: Every input should have a corresponding label, or use aria-label/aria-labelledby if no visible label is appropriate.
• Errors: Use aria-invalid="true" and link to error messages with aria-describedby.
• Required Fields: Indicate with aria-required="true" or visually mark with an asterisk.
• Instructions: Provide context using aria-describedby linked to helper text or hints.
• Focus Management: Ensure inputs are keyboard-accessible with logical focus order.