WordPress.org

Make WordPress Core

Opened 18 months ago

Closed 17 months ago

Last modified 16 months ago

#45972 closed defect (bug) (fixed)

Proximity of controls: comments form improvements

Reported by: afercia Owned by: afercia
Milestone: 5.2 Priority: normal
Severity: normal Version:
Component: Comments Keywords: has-screenshots has-patch a11y-proximity
Focuses: ui, accessibility Cc:

Description

Splitting this out from #43412.

In the comments form, the buttons to submit and cancel the form are placed at the opposite sides of the screen:

http://cldup.com/9vOa-gSotk.png

The larger the screen, the bigger the buttons distance:

http://cldup.com/fdoiL4ZZvg.png

As mentioned in the tracking ticket #40822, proximity of related information is an universal design principle which benefits everyone and it's particularly important for users with a reduced visual field, low vision, or other vision or cognitive impairments.

User interface controls that are logically grouped should be placed close each other. For references and related WCAG recommendations, please see #40822.

Additionally, the visual order and the DOM order mismatch and this is a specific WCAG violation. Worth also mentioning the primary action button should be on the left. See the detailed design feedback in https://core.trac.wordpress.org/ticket/40822#comment:9 and the following comment pointing out that's basically the pattern the new Block Editor (Gutenberg) already follows.

Attachments (2)

45972.diff (1.5 KB) - added by afercia 18 months ago.
45972.2.diff (1.6 KB) - added by afercia 17 months ago.

Download all attachments as: .zip

Change History (7)

@afercia
18 months ago

#1 @afercia
18 months ago

  • Keywords has-patch a11y-proximity added

45972.diff aligns the buttons on the left, for both the reply and quick edit forms. Example:

http://cldup.com/KymCNBNbsL.png

Note: the same change applies to the comments form in the Dashboard "Recent Comments" widget and in the Classic Editor comments meta box.

#2 @afercia
18 months ago

  • Owner set to afercia
  • Status changed from new to assigned

@afercia
17 months ago

#3 @afercia
17 months ago

45972.2.diff addresses a minor CSS issue.

#4 @afercia
17 months ago

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

In 44757:

Accessibility: Improve buttons placement in the Comments Quick edit/Reply form.

Proximity of related information is an inclusive design principle that benefits everyone and it's particularly important for users with reduced visual field, low vision, or other vision or cognitive impairments. User interface controls that are logically grouped should be placed close to each other.
Also, this change makes the buttons visual order and the DOM order match.

Fixes #45972.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


16 months ago

Note: See TracTickets for help on using tickets.