# ARIA Input Field Name

Checks form fields and custom inputs have accessible names.

- Repository: https://github.com/thedaviddias/Front-End-Checklist (74621 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add thedaviddias/Front-End-Checklist --skill aria-input-field-name -g -a claude-code -y`
Codex: `npx skills add thedaviddias/Front-End-Checklist --skill aria-input-field-name -g -a codex -y`
Cursor: `npx skills add thedaviddias/Front-End-Checklist --skill aria-input-field-name -g -a cursor -y`
Gemini CLI: `npx skills add thedaviddias/Front-End-Checklist --skill aria-input-field-name -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add thedaviddias/Front-End-Checklist`

## Description

Use when applies to all `<input>` (except type=hidden), `<textarea>`, `<select>`, and custom form widgets using role=textbox, role=combobox, role=spinbutton, role=searchbox, or role=listbox.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Ensure all input fields have accessible names

Screen readers announce the accessible name of a focused input before the user types. Without a name, VoiceOver reads 'text field' and NVDA reads 'edit' with no context, making it impossible for blind users to fill out forms correctly. Voice control users (Dragon NaturallySpeaking) also need the visible label text to match the accessible name so they can say 'click Email Address' to move focus to the field.

## Quick Reference

- Every `<input>`, `<textarea>`, and `<select>` must have a programmatically associated accessible name
- Preferred: associate a `<label>` via matching `for`/`id` attributes
- Alternatives: `aria-label` (inline string) or `aria-labelledby` (references another element's `id`)
- Placeholder text is not an accessible name, it disappears on input and is not reliably announced
- Applies to WCAG 2.1 SC 1.3.1 (Info and Relationships) and SC 4.1.2 (Name, Role, Value)

## Check

Find all `<input>` (excluding type='hidden'), `<textarea>`, and `<select>` elements. For each, check that one of these is true: (1) a `<label>` element with a `for` attribute matching the input's `id` exists, (2) the input has a non-empty `aria-label` attribute, or (3) the input has an `aria-labelledby` attribute pointing to a visible element. Flag any that use only `placeholder` as their label. Also check custom widgets using role=textbox, role=combobox, etc.

## Fix

For each unlabeled input: (1) Add a `<label for='input-id'>Label text</label>` and matching `id` on the input, this is the most robust method. (2) If a visible label is impractical (e.g., search bar), add `aria-label='Search'` directly on the input. (3) If the label text already exists elsewhere in the DOM, add `aria-labelledby='label-element-id'` to the input. Remove `placeholder` as a substitute for a label; keep placeholder only as a hint for expected format.

## Explain

The rest: https://github.com/thedaviddias/Front-End-Checklist/blob/HEAD/skills/aria-input-field-name/SKILL.md