Skip to content

Search inputs: avoid unnecessary mismatch between visible label and accessible name #65235

Closed

Description

@afercia

Description

Similar to #65112

See the above issue for more context.

When possible, the visual labeling of controls should match the actual accessible name (provided for example by a visually hidden <label> element, or an aria-label or aria-labelledby attributes).

All the search inputs in the editor should be audited and any mismatch avoided.

As an example, the Search input in the Styles panel > Blocks is visually labeled via its placeholder attribute. This is already arguable, as placeholders should not be used as replacement for labels.

  • The placeholder value is Search.
  • The actual accessible name is Search for blocks.

While the added context may help blind screen reader users, it doesn't help other users and may even be an accessibility barrier, for example for sighted screen reader users and speech recognition / voice control users.

Step-by-step reproduction instructions

  • Go to Site Editor > Styles > Blocks.
  • Observe the search input placeholder is the only visible 'label' of the input and it's Search.
  • Observe the actual accessible name provided by a visually hidden <label> element is Search for blocks.

Screenshots, screen recording, code snippet

Screenshot 2024-09-10 at 14 40 52

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Activity

  1. added
    [Type] BugAn existing feature does not function as intended
    [Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).
    on Sep 11, 2024
  2. afercia commented on Sep 18, 2024

    @afercia
    ContributorAuthor

    There's plenty of cases of this kind of mismatch. For example, the main Inserter search input:

    • Placeholder: Search.
    • Actual label: Search for blocks and patterns. Notice that it is also inaccurate, as the Inserter now contains blocks, patterns, and media.

    Screenshot revealing the visually hidden label:

    Screenshot 2024-09-18 at 13 43 15

    Same for the link control, etc.:

    Screenshot 2024-09-18 at 13 53 18

  3. self-assigned this
    on Sep 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions