Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#47122 closed defect (bug) (fixed)

Media views: fix unlabelled controls

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots has-dev-note
Focuses: ui, accessibility, javascript Cc:


In the various media views, there are various form controls that are unlabelled. That is, either they don't have any associated <label> element, aria-label attribute, etc. or they have an empty label.

Properly labelling form controls is essential for a basic level of accessibility, as labels give form controls their accessible name. The name is then used by assistive technologies to inform users "what" the form control is about.

Not to mention visible <label> elements are clickable and help users with motor impairments to set focus on the associated form control.

A few examples:

The "Insert form URL" input field is wrapped in a <label> that doesn't contain any text:

Worth noting the WordPress accessibility coding standards recommend explicitly associated labels (with for/id) attributes instead of implicitly (wrapping) labels.

The "Link To" select and input field miss an associated label: the visible text "Link To" is just text within a <span> element:

Same when "custom url" is selected and the input field becomes editable:

I'd like to strongly recommend to make a complete audit of the form controls in the media views and address all the occurrences of unlabelled form controls.

Change History (11)

#1 @afercia
5 years ago

  • Milestone changed from Awaiting Review to 5.3
  • Owner set to afercia
  • Status changed from new to assigned

#2 @afercia
5 years ago

Related: #47141.

#3 @afercia
5 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 45499:

Accessibility: Improve accessibility of all the media views form controls.

  • changes the media views form controls to have explicitly associated labels with for/id attributes
  • adds a few missing labels / aria-labels
  • improves a few existing labels / aria-labels
  • improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes
  • improves the image custom size input fields and their labelling
  • adds role="status" to the "saved" indicator so that status messages are announced to assistive technologies
  • swaps the columns source order in the image details template, to make visual and DOM order match
  • swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match
  • gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right
  • merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload")
  • makes the "upload-ui" consistent across the media views
  • hides the IE 11 "X" ::-ms-clear button in the Insert from URL field, as it conflicts with the uploading spinner
  • adds comments to all the media templates to clarify their usage
  • slightly increases vertical spacing between form fields in the media sidebar
  • removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4
  • removes some CSS still targeting Internet Explorer 7 and 8

Fixes #47141.
Fixes #47122.

#4 @joemcgill
5 years ago

  • Keywords fixed-major added
  • Milestone changed from 5.3 to 5.2.3
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening this so it can be back-ported to the 5.2 branch.

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

5 years ago

#6 @pierlo
5 years ago

Hi @afercia, I can confirm that these changes work as described.

#7 @JeffPaul
5 years ago

  • Keywords needs-dev-note added
  • Milestone changed from 5.2.3 to 5.3

Several folks in core slack have commented with concern on pulling this into 5.2.3, so I'm going to go ahead and move this back to 5.3 so it can have proper testing and developer notice (thus adding needs-dev-note) before being included in a release.

#8 @SergeyBiryukov
5 years ago

  • Keywords fixed-major removed
  • Resolution set to fixed
  • Status changed from reopened to closed

Re-closing, as the fix was already committed in [45499].

Keeping the needs-dev-note tag on.

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

5 years ago

#10 @afercia
5 years ago

In 46237:

Media: Fix buttons group layout for Internet Explorer 11 after [45499].

Props sabernhardt, afercia.
See #47122.
Fixes #48087.

Note: See TracTickets for help on using tickets.