Skip to content

Homepage password field has no accessible name: placeholder is its only label #195

Description

@EazyHood

markdown

Summary

The login form on https://apn.tech/ has a single visible field, and it has no accessible
name. There is no <label>, no id that a label could reference, and no aria-label:

<form action="/auth" method="post">
  <input autofocus maxlength="9" name="uid" placeholder="Your Password" required size="13" type="password">
  <button type="submit">Login</button>
</form>

Its only text is the placeholder, which disappears as soon as the user types and is not a
substitute for an accessible name.

The site already does this correctly elsewhere. /bug labels every field:

<label for="where">Where the bug was found:</label>
<label for="what">What happened:</label>
<label for="screenshot">Screenshots or videos (optional):</label>

Steps to reproduce

  1. Open https://apn.tech/ in a browser.
  2. Inspect the login form, or run any accessibility checker on the page.
  3. Observe that the <input name="uid"> element has no <label>, no id, and no
    aria-label.
  4. Compare with https://apn.tech/bug, where each input has a <label for=...>.

Why it matters

A screen reader announces the field by its accessible name. With none, users hear only the
control type and must infer what to enter. The placeholder also vanishes on input, so a user
who pauses mid-entry loses the only cue available. This is the same class of defect as #95,
on the other public form.

Not a duplicate of #43

#43 reported that this field was type="text", exposing the password as it was typed. That
is fixed — the field is type="password" today. This report is about the missing accessible
name, which is unchanged.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions