WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 9 days ago

#47138 new defect (bug)

Visible labelling only done via placeholder attribute

Reported by: anevins Owned by:
Milestone: 5.3 Priority: normal
Severity: minor Version:
Component: Media Keywords: has-screenshots needs-patch wpcampus-report form-controls needs-design-feedback
Focuses: ui, accessibility Cc:

Description

Moved from the WPCampus accessibility report issues on GitHub, see https://github.com/WordPress/gutenberg/issues/15301

  • Severity:
    • Low
  • Affected Populations:
    • Low-Vision
    • Motor Impaired
    • Cognitively Impaired
  • Platform(s):
    • All / Universal
  • Components affected:
    • Media Dialog

Issue description
In the "Media Library" panel of the "Featured Image" modal dialog, a
live search field is available to filter uploaded images and narrow
results.

While there is a label element present, it is rendered visually-hidden,
while a placeholder with similar text is visually present in the input.

Users who've entered any values must empty the field to see the
placeholder text, or otherwise memorise it. Users with cognitive
disabilities may have trouble remembering what the filled field does,
while speech recognition users cannot see the name they can speak to set
focus on the field. Low-vision users with high text-size may not be able
to see the whole placeholder even when it's visible, if its value is
clipped by the edge of the input.

Issue Code

    <div class="media-toolbar-primary search-form">


        <label for="media-search-input" class="screen-reader-text">Search Media</label>


        <input type="search" placeholder="Search media items..." id="media-search-input" class="search">


    </div>


    ...


    .screen-reader-text  {


        border: 0;


        clip: rect(1px,1px,1px,1px);


        -webkit-clip-path: inset(50%);


        clip-path: inset(50%);


        height: 1px;


        margin: -1px;


        overflow: hidden;


        padding: 0;


        position: absolute;


        width: 1px;


        word-wrap: normal!important;


    }

Remediation Guidance
Make labels visible instead of using placeholders, as much as possible.

Relevant standards
N/A

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-64 in Tenon's report

See also https://core.trac.wordpress.org/ticket/40331

Attachments (1)

57185908-ef8bc400-6e89-11e9-8c12-de9e78994d6e.png (219.5 KB) - added by anevins 6 weeks ago.

Download all attachments as: .zip

Change History (9)

#1 @afercia
6 weeks ago

  • Keywords form-controls added

#2 @audrasjb
6 weeks ago

  • Keywords needs-design added

#3 @afercia
6 weeks ago

  • Milestone changed from Awaiting Review to 5.3

#4 @audrasjb
4 weeks ago

  • Keywords good-first-bug added; needs-design removed

I'd suggest to remove the screen-reader-text class to the label and to display it on the left of the field (do not forget to handle RTL languages).

Adding good- first-bug keyword as the issue looks like a nice one for new contributors.

#5 @afercia
4 weeks ago

Worth reminding the WPCampus accessibility report focused on user interface parts directly visible from the block editor. However, this is a broader issue across the whole WordPress admin pages, see #40331.

This ticket was mentioned in Slack in #core by sergey. View the logs.


4 weeks ago

#7 @afercia
4 weeks ago

  • Keywords good-first-bug removed

#8 @karmatosed
9 days ago

  • Keywords needs-design-feedback added
Note: See TracTickets for help on using tickets.