WordPress.org

Make WordPress Core

Opened 20 months ago

Closed 8 months ago

#43412 closed defect (bug) (fixed)

Comments: row action links and forms accessibility improvements

Reported by: afercia Owned by: afercia
Milestone: 5.2 Priority: normal
Severity: normal Version:
Component: Comments Keywords: semantic-buttons has-screenshots has-patch
Focuses: accessibility, javascript Cc:
PR Number:

Description

In the Comments screen, all the "row action" links behave differently depending if JavaScript support is on or off. The Reply and Quick Edit links are special cases, and #43376 is going to take care of them.

For all the other row action links except "Edit":

  • when JavaScript is off, they behave like real links
  • when JavaScript is on, they don't trigger navigation but they "do something" so for better semantics and accessibility they should have a role="button".

Basically, all the following links:

Approve / Unapprove | Spam | Trash 
Not Spam | Delete Permanently
Spam | Restore | Delete Permanently

should use the CSS class .aria-button-if-js so the related jQuery function in common.js adds the button role.

Additionally, in the Reply and Quick Edit forms the links "Cancel" and "Submit" (actually this link has different text depending on what it does) should be real buttons.

Lastly, in the edit post screen, in the Comments metabox, the "Add Comment" link should be a button:

https://cldup.com/Cx48FB3L0r.png

Attachments (4)

43412.diff (13.9 KB) - added by afercia 19 months ago.
43412 buttons android.jpg (62.1 KB) - added by afercia 10 months ago.
43412.2.diff (13.4 KB) - added by afercia 9 months ago.
43412.3.diff (13.4 KB) - added by afercia 8 months ago.

Download all attachments as: .zip

Change History (25)

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


20 months ago

#2 @afercia
20 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.0

#3 @afercia
19 months ago

Note: the above should be applied also to the similar links in the "Recent Comments" Dashboard widget.

@afercia
19 months ago

#4 @afercia
19 months ago

  • Keywords semantic-buttons has-patch has-screenshots added; needs-patch removed

43412.diff is a first pass for better link / buttons semantics. Some testing would be nice :)

  • check in the comments lists pages and in the dashboard, all the UI controls work as expected
  • check using a screen reader all UI controls that "do something" are announced as buttons, and UI controls that navigate to a page are announced as links.

Additionally, to start implementing the "proximity of controls" principle (see #40822) and to introduce consistency, the patch aligns the Reply and Quick edit forms buttons on the left. Screenshots:

before:

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

after:

https://cldup.com/KymCNBNbsL.png

Note: the same change applies to the Quick Edit form and the Reply form in the Dashboard.

#5 @afercia
13 months ago

Additionally, to start implementing the "proximity of controls" principle (see #40822) and to introduce consistency, the patch aligns the Reply and Quick edit forms buttons on the left.

To give more visibility to the "proximity of controls" issue, I'd be in favor of splitting this part in a separate ticket.

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


13 months ago

#7 @rianrietveld
13 months ago

  • Milestone changed from 5.0 to 4.9.9

#8 @afercia
13 months ago

  • Keywords needs-refresh added

Discussed during today's accessibility bug-scrub an agreed we'd like to propose this for 4.9.9 consideration.

#9 @pento
13 months ago

  • Milestone changed from 4.9.9 to 5.0.1

#10 @pento
10 months ago

  • Milestone changed from 5.0.1 to 5.0.2

#11 @pento
10 months ago

  • Milestone changed from 5.0.2 to 5.0.3

#12 @audrasjb
10 months ago

  • Keywords ui-feedback ux-feedback added

Hi,

5.0.3 is going to be released soon. We are currently sorting the remaining tickets in the milestone.

That would be awesome to get some UI/UX feedback on this one and a component maintainer validation. If not, we are going to address this in 5.1 which is coming in February.

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


10 months ago

#14 @audrasjb
10 months ago

  • Milestone changed from 5.0.3 to 5.1

Hi,

Per today's bug scrub, let's address this ticket in the next major, 5.1, scheduled in February.

That would be great to get a design feedback so this one can land in 5.1.

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


10 months ago

#16 @afercia
10 months ago

Re: the buttons, worth reminding placing related UI controls at the opposite sides of the screen is a huge accessibility barrier for low vision users. Person with a limited viewing field are able to view just a small portion of the screen at any time. Sometimes they use screen magnifiers at a very high zoom level. A button at the opposite side of the screen is basically invisible.

Also, worth reminding the discussion and design feedback given on the tracking ticket for the proximity of controls: https://core.trac.wordpress.org/ticket/40822#comment:9

Based on https://www.lukew.com/ff/entry.asp?571, I think we should:

  • Have the primary action (like update, etc.) on the left, as a primary button.
  • If relevant, list secondary actions immediately to the right of the primary action, as secondary buttons.
  • List all negative action (cancel, delete) next, as links.

In most cases, the actions should be left aligned, to line up with the forms. This would happen on Settings, bulk edit screens, edit term screens, etc.

In the case of things like the theme modal, actions should remain centered (since the content within the modal doesn't follow the same left-aligned linear path as forms do).

These are the patterns I'd strongly recommend for better accessibility. If the concern is about avoiding clicks on the wrong button, then increasing the clickable area of the buttons would probably be a better option, as for example some mobile operating systems do (see screenshot below).

#17 @afercia
9 months ago

  • Milestone changed from 5.1 to 5.2

As said in a previous comment, I'd be in favor of splitting the "proximity of controls" part in a separate ticket. The 5.1 release beta 1 is today. Punting to 5.2 because there's a patch.

@afercia
9 months ago

#18 @afercia
9 months ago

  • Keywords needs-refresh ui-feedback ux-feedback removed

43412.2.diff removes the changes for proximity of controls, will split them in a separate ticket.

#19 @afercia
9 months ago

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

@afercia
8 months ago

#20 @afercia
8 months ago

43412.3.diff updates the patch after [44757]

#21 @afercia
8 months ago

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

In 44759:

Accessibility: Comments: Improve links and buttons semantics and interaction.

With the exception of the "Edit" link, the "row actions" controls in the Comments table behave differently depending if JavaScript support is on or off.
When JavaScript support is off, they behave like links. When JavaScript support is on, they behave like buttons and they need to be buttons or have an ARIA role="button" added via JavaScript.

Lastly, the buttons in the Reply/Quick Edit form and the "Add Comment" in the edit post page meta box need to be buttons.

Fixes #43412.

Note: See TracTickets for help on using tickets.