Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Text Inputs

Accessible text input fields with proper labeling, helper text, and focus indicators. No placeholder text - all instructions remain visible.

Enter your first and last name

HTML

<label for="full-name" class="ads-label">Full name</label>
<div id="name-helper" class="ads-helper-text">
    Enter your first and last name
</div>
<input 
    type="text" 
    id="full-name" 
    class="ads-input"
    aria-describedby="name-helper"
>

CSS

.ads-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 16px;
}

.ads-helper-text {
    font-size: 0.875rem;
    color: var(--ads-text-secondary);
    margin-bottom: 0.5rem;
}

.ads-input {
    width: 100%;
    padding: 0.75rem;
    font-size: 16px;
    border: 2px solid var(--ads-border-color);
    border-radius: 4px;
    font-family: var(--ads-font-family);
}

.ads-input:focus {
    outline: 3px solid var(--ads-focus-outline);
    outline-offset: 2px;
    border-color: var(--ads-primary-color);
}

Accessibility Guidelines

Key Requirements

  • Always use labels: Every input must have an associated label with proper for/id relationship
  • No placeholder text: Use helper text instead - it remains visible and doesn't disappear on focus
  • Persistent instructions: Helper text stays visible, helping users with memory issues
  • 16px minimum: Prevents mobile zoom on focus for better user experience
  • aria-describedby: Links helper text to input for screen reader announcement
  • Clear focus indicator: 3px blue outline with 2px offset meets WCAG requirements

Custom Implementation Notes

Why no placeholders? Placeholder text has several accessibility issues: it disappears when users start typing (problematic for users with memory issues), usually has insufficient contrast, and is often mistaken for pre-filled values. Helper text solves all these problems by remaining visible and accessible.

Required fields: When marking required fields, use the required attribute AND visible text like "Required" or an asterisk with explanation. Never rely on color alone to indicate required fields.

How to Test for Accessibility

  1. Screen Reader Test:
    • Enable NVDA, JAWS, or VoiceOver
    • Navigate to the input with Tab
    • Verify it announces: "Full name, edit text, Enter your first and last name"
  2. Keyboard Navigation:
    • Tab to the input - verify visible focus indicator
    • Type text - verify helper text remains visible
  3. Mobile Test:
    • Tap input on mobile device
    • Verify page doesn't zoom in automatically

References