Practical Accessibility for Web Developers: Form Controls

Explore how accessibility extends beyond blind users, covering screen readers, keyboard navigation, cognitive and dyslexia needs, dexterity and visual impairments, and even mobile and slow networks for all form controls.

Get forms right to let users interact with your application smoothly and reach their goals, whether creating an account or making a purchase. We cover basic guidelines for forms.

Place radio and checkbox labels to the right in left-to-right languages; position text inputs, textareas, and selects left or above, and consider mobile-friendly labeling to expand clickable areas.

Avoid placeholders as labels due to low contrast and disappearance after input; use explicit labels for each control. Use one unique label per control.

Learn to label form controls using aria-labelledby by combining header IDs. Optionally use aria-label for individual cases and apply negative tabindex to labels to address Internet Explorer and NVDA quirks.

Avoid using the title attribute as a control label, since assistive technologies may not read it; use it as a tooltip for sighted users with verbose values.

Fieldsets group controls logically and visually, with the legend labeling the group. Style the default border and top legend with css, and use fieldsets for radio buttons.

Learn fieldset guidelines to build accessible forms: avoid nesting, don't use fieldsets as labels, place a unique legend first, and ensure radio button groups share the same name for accessibility.

Learn to craft accessible form instructions that indicate required fields, inform users when context will change due to actions, warn to submit once, and use aria-labelledby or aria-describedby.

Discover inline instructions for form controls, including three accessible methods: embedding in the label, nearby text with aria-describedby, and hidden labels, with placeholders debated for WCAG color contrast.

Ensure accessible focus cues and keyboard navigability by maintaining proper tabindex, clear labels, and fieldsets. Verify color contrast, consistent styling, native controls, and real time validation to prevent invalid data.