Mobile Forms

title: "Mobile Form Accessibility" weight: 17 description: "Learn how to design accessible mobile forms: proper input types and inputmode, large touch targets for form controls, accessible error messages, and forms that work with mobile screen readers and autofill." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, mobile]

Mobile form accessibility requires input elements with correct types and inputmode, labels that work with screen readers, large touch targets for checkboxes and radio buttons, clear error messages, and support for mobile autofill and autocorrect.

## What You'll Learn

You will design mobile-friendly forms, use proper input types and inputmode, style form controls for touch, implement accessible error handling, and optimize forms for mobile screen readers.

## Why It Matters

Forms are the most common way users interact with mobile sites. A form that is hard to fill out on mobile -- small inputs, wrong keyboard type, unclear errors -- causes abandonment and lost conversions.

## Real-World Use

A travel booking site's mobile form uses type="text" for email, showing the standard keyboard instead of the email keyboard. The date field does not trigger the date picker. Error messages appear at the top of the page, not near the fields. Users struggle and abandon booking.

## Mobile Form Guidelines

```mermaid
flowchart TD
  A[Form Field] --> B[Choose input type]
  B --> C[Set inputmode]
  C --> D[Add label]
  D --> E[Style for touch]
  E --> F[Error handling]
  F --> G[Test with SR]

Implementing Mobile Forms

Use the correct input types to trigger the right keyboard on mobile devices.

<!-- Mobile-optimized form inputs -->
<form novalidate>
  <div class="form-group">
    <label for="name">Full name</label>
    <input type="text" id="name" name="name" autocomplete="name" inputmode="text">
  </div>

  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" id="email" name="email" autocomplete="email" inputmode="email">
  </div>

  <div class="form-group">
    <label for="phone">Phone number</label>
    <input type="tel" id="phone" name="phone" autocomplete="tel" inputmode="tel">
  </div>

  <div class="form-group">
    <label for="age">Age</label>
    <input type="number" id="age" name="age" inputmode="numeric" min="0" max="150">
  </div>

  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="4"></textarea>
  </div>

  <!-- Custom styled checkbox -->
  <label class="checkbox-label">
    <input type="checkbox" name="agree">
    <span class="checkbox-custom"></span>
    I agree to the terms
  </label>

  <button type="submit" class="submit-btn">Submit</button>
</form>

/* Mobile form styling */
.form-group {
  margin-bottom: 24px;
}

input, textarea, select {
  font-size: 16px; /* Prevents iOS zoom on focus */
  padding: 12px;
  min-height: 44px;
  border: 2px solid #ccc;
  border-radius: 8px;
  width: 100%;
}

/* Large checkboxes for touch */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 44px;
  min-height: 44px;
}

/* Error styles */
.form-error {
  color: #cc0000;
  font-size: 14px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

input[aria-invalid="true"] {
  border-color: #cc0000;
}

// Mobile form validation with accessible errors
function validateMobileForm() {
  const email = document.getElementById('email');

  if (!email.validity.valid) {
    const error = document.getElementById('email-error');
    error.textContent = 'Please enter a valid email address';
    email.setAttribute('aria-invalid', 'true');
    email.setAttribute('aria-describedby', 'email-error');
    email.focus();
    return false;
  }
  return true;
}

Common Mistakes

• Using type="text" for all inputs
• Not setting inputmode for the correct keyboard
• Making form controls smaller than 44px
• Relying on placeholder instead of labels
• Showings errors only in a summary at the top
• Not testing forms with mobile screen readers
• Forgetting autocomplete attributes for mobile autofill

Practice and Challenge

Practice 1: Check input types on your mobile form. Practice 2: Verify inputmode is set for each field type. Practice 3: Test form touch targets at 44px minimum. Practice 4: Test form with VoiceOver and TalkBack. Practice 5: Verify error messages are announced.

Challenge: Create a mobile-optimized registration form with 8 fields (name, email, phone, password, date of birth, country, newsletter checkbox, submit button). Ensure each field has: correct input type and inputmode, autocomplete attribute, visible label, error handling with aria-invalid and aria-describedby, and 44px minimum touch targets.

FAQ

Mini Project

Create a mobile form accessibility checklist and test it against 3 different mobile forms (newsletter signup, contact form, checkout form). Document which forms pass and fail each checklist item. Propose fixes for failing items.

What's Next

Mobile Navigation covers accessible navigation patterns for mobile.