WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#21338 closed enhancement (fixed)

Add the names of Widgets to the Add and Edit buttons on the Accessible Widget Management Screen

Reported by: cannona Owned by: azaozz
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.4.1
Component: Accessibility Keywords: has-patch
Focuses: Cc:

Description

When a screen reader user has accessibility mode turned on on the widget management screen, the add and edit buttons are ambiguous. The problem is that it is not obvious what widget each button is associated with.

For example, on my Widgets page, I hear:

Add

Heading Level 4 Custom Menu
Use this widget to add one of your custom menus as a widget. 
Add

Heading Level 4 Google Analytics Stats
Displays Stat Info From Google Analytics 
Add

Heading Level 4 Links
Your blogroll 
Add

Heading Level 4 Meta
Log in/out, admin, feed and WordPress links

Note that the line-breaks weren't inserted by me. My screen reader inserts them when it detects a division of some sort, usually the start of a new paragraph, or similar.

The ideal solution would be to change the add and edit links to have the name of the effected widget appended to them. So, instead of just "Add" it might read "Add Links".

If it was undesirable to do this for visual design reasons, the appended text could be shown to screen reader users only, using the existing CSS classes for this purpose. However, including such clarifying text could only improve usability for everyone (IMHO).

Attachments (4)

21338-1.patch (954 bytes) - added by cannona 3 years ago.
Patch.
21338-1.png (3.3 KB) - added by SergeyBiryukov 3 years ago.
21338.2.patch (1.1 KB) - added by SergeyBiryukov 3 years ago.
21338-3.patch (986 bytes) - added by cannona 3 years ago.
Patch 3

Download all attachments as: .zip

Change History (15)

comment:1 @cannona3 years ago

  • Cc cannona@… added

comment:2 @nacin3 years ago

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

comment:3 @DrewAPicture3 years ago

  • Cc xoodrew@… added

@cannona3 years ago

Patch.

comment:4 @cannona3 years ago

  • Keywords has-patch added; needs-patch removed

This patch does not hide the text for non-screen reader users.

@SergeyBiryukov3 years ago

@SergeyBiryukov3 years ago

comment:5 @SergeyBiryukov3 years ago

21338-1.patch creates a string overlapping (21338-1.png), which is especially noticeable with longer translated strings.

21338.2.patch is an attempt to add a .screen-reader-text clarification.

comment:6 @cannona3 years ago

This patch doesn't quite work for screen reader users. Screan readers now read this as "AddAdd Widget Name". Furthermore, I believe that this is an improper use of the legend tag.

However, thanks for letting me know about the issues with the styling. I am blind, so I don't have a way of determining things like that myself. I'll try to submit a corrected patch this evening.

Thanks.

Aaron

@cannona3 years ago

Patch 3

comment:7 @cannona3 years ago

The third patch seems to work well with my screen reader. Hopefully it won't cause problems visually.

The only drawback to the way I did it is that it may not internationalize perfectly in all languages. Basically, while in English, prepending add or edit to the title of the widget works well and is grammatically correct, it may not be so in other languages. However, I suspect the meaning should be obvious regardless, but I'm open to other ideas on how to handle this.

Aaron

comment:9 @azaozz3 years ago

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

In [21355]:

Widgets: Add the name of the widget to the Add and Edit buttons on the Accessible Widget Management Screen, props cannona, fixes #21338

comment:10 @nacin3 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

In [21355], we need to add context to the 'Edit' and 'Add' strings. This will ensure that it localizes well.

So, _ex( 'Edit', 'widget' ) and _ex( 'Add', 'widget' ).

comment:11 @azaozz3 years ago

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

In [21356]:

Widgets: add localization context for 'Add' and 'Edit', props nacin, fixes #21338

Note: See TracTickets for help on using tickets.