a11y: va-input

[m0ksem]

Accessible Input Element Checklist:

Labeling and Instructions:

Use a element to associate a clear and concise label with the input.
Provide additional instructions if needed using appropriate elements like

.
Input Type and ARIA Roles:

Use the appropriate type attribute for the input field (e.g., text, email, number).
Utilize ARIA roles when necessary (e.g., aria-autocomplete, aria-required) to convey input characteristics.
Placeholder Text:

Use the placeholder attribute for brief hints about the input's expected format.
Avoid relying solely on placeholder text for labeling.
Focus Indicator:

Ensure the input has a visible focus indicator (e.g., border or background color change).
Text Contrast and Readability:

Maintain sufficient contrast between text color and input background.
Avoid conveying information solely through color.
Validation and Error Handling:

Provide validation feedback for incorrect input (e.g., invalid format).
Utilize aria-invalid and aria-describedby for error associations.
Use role="alert" or aria-live for dynamic error messages.
Keyboard Accessibility:

Ensure keyboard navigation and interaction are possible.
Set appropriate tabindex to define the input's position in the tab sequence.
Implement keyboard shortcuts and behavior (e.g., Enter key submits).
Autocomplete and Suggestions:

Use the autocomplete attribute for efficient input completion.
Ensure accessible and keyboard-navigable autocomplete suggestions.
Resizeable Inputs:

If the input can be resized (e.g., text area), allow keyboard resizing.
Clear Input Button:

If included, ensure the clear input button is accessible and focusable.