with the skill
## Violations
**1. Inputs have no accessible name (critical)**
```html
<input type="email" placeholder="Email *">
<input type="password" placeholder="Password *">
```
- **Why:** Placeholders aren't reliable labels. They vanish on input, often have poor contrast, and aren't consistently announced.
- **Fix:** Add a visible `<label>` tied to each input with `for`/`id`.
**2. Required state is conveyed only by "*" in the placeholder (high)**
- **Why:** Screen readers won't reliably announce it, and it disappears once the user types.
- **Fix:** Add `required` and put the marker in the label. Hide a decorative asterisk with `aria-hidden`.
**3. Error message isn't linked to the field (high)**
```html
<span class="error" style="color:red">Enter a valid email</span>
```
- **Why:** Screen reader users won't know the error belongs to the email field or that the field is invalid.
- **Fix:** Give the error an `id`, add `aria-describedby` and `aria-invalid="true"` on the input. Render the error only when it applies, and use `role="alert"` (or an `aria-live` region) so it's announced when it appears.
Show the rest (57 more lines)
**4. Error relies on color alone, and red may fail contrast (medium)**
- **Why:** Users who can't distinguish red won't notice it, and pure `red` (#f00) on white is about 4:1, below the 4.5:1 minimum.
- **Fix:** Add non-color cues such as an icon or "Error:" prefix text, and use a darker red like `#b00020`. Move the styling into the `.error` class instead of inline.
**5. Hint text isn't associated with the password input (high)**
```html
<span class="hint">At least 12 characters</span>
```
- **Why:** The password requirement isn't announced when the field is focused.
- **Fix:** Give the hint an `id` and reference it in `aria-describedby`.
**6. Submit button is disabled with no explanation (high)**
```html
<button type="submit" disabled>Create account</button>
```
- **Why:** Disabled buttons are skipped by Tab, so keyboard and screen reader users can't discover them or learn why the form can't be submitted.
- **Fix:** Keep the button enabled. Validate on submit, show errors linked to the fields, and move focus to the first invalid field. If it must stay disabled, use `aria-disabled="true"` (still focusable, block the submit in JS) and add visible text explaining what's missing.
**7. Missing autocomplete (medium)**
- **Why:** Without `autocomplete`, password managers and autofill can't identify the fields (WCAG 1.3.5).
- **Fix:** Use `autocomplete="email"` and `autocomplete="new-password"`, and add `name` attributes.
## Minimal fixed version
```html
<form novalidate>
<div>
<label for="email">Email <span aria-hidden="true">*</span></label>
<input id="email" name="email" type="email" required
autocomplete="email"
aria-invalid="true"
aria-describedby="email-err">
<span id="email-err" class="error" role="alert">
<svg aria-hidden="true">…</svg> Error: Enter a valid email
</span>
</div>
<div>
<label for="password">Password <span aria-hidden="true">*</span></label>
<input id="password" name="password" type="password" required
autocomplete="new-password"
aria-describedby="password-hint">
<span id="password-hint" class="hint">At least 12 characters</span>
</div>
<button type="submit">Create account</button>
</form>
```
```css
.error { color: #b00020; } /* ≥4.5:1 on white */
```
**Notes:**
- Only render the email error and `aria-invalid="true"` after validation fails. Set them dynamically rather than showing them on load.
- If the error appears after submit, move focus to the first invalid field.
- Verify focus outlines on the inputs and button are visible. Nothing here removes them, but check your CSS.