Make WordPress Core

Opened 12 years ago

Closed 12 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's profile cannona Owned by: azaozz's profile azaozz
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.4.1
Component: Accessibility Keywords: has-patch
Focuses: Cc:


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:


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

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

Heading Level 4 Links
Your blogroll 

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 12 years ago.
21338-1.png (3.3 KB) - added by SergeyBiryukov 12 years ago.
21338.2.patch (1.1 KB) - added by SergeyBiryukov 12 years ago.
21338-3.patch (986 bytes) - added by cannona 12 years ago.
Patch 3

Download all attachments as: .zip

Change History (15)

#1 @cannona
12 years ago

  • Cc cannona@… added

#2 @nacin
12 years ago

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

#3 @DrewAPicture
12 years ago

  • Cc xoodrew@… added

12 years ago


#4 @cannona
12 years ago

  • Keywords has-patch added; needs-patch removed

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

#5 @SergeyBiryukov
12 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.

#6 @cannona
12 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.



12 years ago

Patch 3

#7 @cannona
12 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.


#9 @azaozz
12 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

#10 @nacin
12 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' ).

#11 @azaozz
12 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.