Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#21458 closed defect (bug) (fixed)

Label field post_title in edit-form-advanced.php missed by some screen readers

Reported by: rianrietveld Owned by: azaozz
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Accessibility Keywords: needs-patch
Focuses: Cc:


In wp-admin/edit-form-advanced.php a label is added to the title field post_title like:

<label class="hide-if-no-js" style="visibility:hidden" id="title-prompt-text" for="title"><?php echo apply_filters( 'enter_title_here', __( 'Enter title here' ), $post ); ?></label>

Some screen readers omit visibility: hidden.

Maybe a solution: remove the hardcoded style="visibility:hidden" in the PHP
and add it to the css id="title-prompt-text";

Kind regards,

Attachments (3)

21458.patch (1.9 KB) - added by SergeyBiryukov 3 years ago.
21458.2.patch (2.1 KB) - added by SergeyBiryukov 3 years ago.
21458.3.patch (1.6 KB) - added by SergeyBiryukov 3 years ago.

Download all attachments as: .zip

Change History (8)

@SergeyBiryukov3 years ago

comment:1 @SergeyBiryukov3 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 3.5

comment:2 @helenyhou3 years ago

  • Keywords needs-patch added; has-patch removed

This is the text that shows as a placeholder inside the title input. Moving the visibility: hidden to the CSS isn't going to help. Seems we have a couple options:

  • Toggle the screen-reader-text class to hide it in a screen reader friendly manner
  • aria-describedby

Also, fullscreen/DFW will need the same treatment.

@SergeyBiryukov3 years ago

@SergeyBiryukov3 years ago

comment:3 follow-up: @SergeyBiryukov3 years ago

I was under impression that the issue here is the hardcoded style="visibility:hidden" (according to the description).

DFW title doesn't have that hardcoded style (but is still controlled by wptitlehint() JS function):

So I thought that 21458.patch would make it more consistent.

21458.2.patch toggles .screen-reader-text instead (the change in wp-admin.dev.css is to prevent .screen-reader-text's left: -1000em from being overridden, which causes a visual bug).

21458.3.patch is an attempt at adding aria-describedby (not sure if that would work with style="visibility:hidden" though).

comment:4 in reply to: ↑ 3 @azaozz3 years ago

Replying to SergeyBiryukov:

Yeah, not sure whether aria-describedby can be used with hidden element either. Sounds like it should be possible but don't know if all screenreaders would pick it.

21458.2.patch looks good, better to go with it.

comment:5 @azaozz3 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In [21584]:

Don't hide the label for the Title on the Edit Post screen, use 'screen-reader-text' instead, props SergeyBiryukov, fixes #21458

Note: See TracTickets for help on using tickets.