WordPress.org

Make WordPress Core

Opened 4 months ago

Last modified 5 days ago

#47138 accepted defect (bug)

Visible labelling only done via placeholder attribute

Reported by: anevins Owned by: audrasjb
Milestone: 5.3 Priority: normal
Severity: minor Version:
Component: Media Keywords: has-screenshots needs-patch wpcampus-report form-controls
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 (4)

57185908-ef8bc400-6e89-11e9-8c12-de9e78994d6e.png (219.5 KB) - added by anevins 4 months ago.
modal-search-label.png (55.5 KB) - added by audrasjb 2 months ago.
Modal search
library-search-label.png (55.2 KB) - added by audrasjb 2 months ago.
Library search
library-search-label-mobile.png (43.1 KB) - added by audrasjb 2 months ago.
Library search on mobile

Download all attachments as: .zip

Change History (18)

#1 @afercia
4 months ago

  • Keywords form-controls added

#2 @audrasjb
4 months ago

  • Keywords needs-design added

#3 @afercia
4 months ago

  • Milestone changed from Awaiting Review to 5.3

#4 @audrasjb
3 months 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
3 months 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.


3 months ago

#7 @afercia
3 months ago

  • Keywords good-first-bug removed

#8 @karmatosed
3 months ago

  • Keywords needs-design-feedback added

@audrasjb
2 months ago

Modal search

@audrasjb
2 months ago

Library search

@audrasjb
2 months ago

Library search on mobile

#9 @audrasjb
2 months ago

Hi there, the 3 screenshots above are a first workaround for this issue.

#10 @karmatosed
4 weeks ago

Would it be possible to shorten this to 'search' or would it be preferable to have the context? I suggest this as you are in media so expecting it to search for media feels the right choice.

#11 @audrasjb
4 weeks ago

  • Owner set to audrasjb
  • Status changed from new to accepted

@karmatosed good point.
I see no objection on my side :)

#12 @afercia
4 weeks ago

No strong objections either, especially now that the modal dialog is correctly announced and it's the only perceivable content within the page.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


5 days ago

#14 @karmatosed
5 days ago

  • Keywords needs-design-feedback removed

As this has design feedback, going to remove the keyword.

Note: See TracTickets for help on using tickets.