WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#32713 closed defect (bug) (fixed)

Customizer Menus: Accessibility: make the aria-label for the "+ Add Items" button more descriptive

Reported by: designsimply Owned by: SergeyBiryukov
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.3
Component: Customize Keywords: has-patch commit
Focuses: accessibility Cc:
PR Number:

Description

Moving this over from https://github.com/voldemortensen/menu-customizer/issues/84

Talking about how you either need to open the item to find the delete link inside or you can click the +Add Items button to access the quick-delete icons, @afercia says:

Ideally the + Add Items button text should describe the set of actions made available when you press it. I understand that visually this is a minor issue since sighted users can actually see the red X. Also, I understand the troubles screen reader users will face: if they look for something to delete menu items, it's very unlikely they will activate a button that says "Add Items". We should try to find a good balance between visual and semantics, where the latter is not just "abstract semantics" but real information as used by software and consequently by people using that software. It's always about people :)

If you're OK with "Add Items" for the visual part, I'd be happy to use a more descriptive aria-label attribute on the button: aria-label="Add or remove menu items".

Attachments (2)

Screen Shot 2015-06-18 at Thu Jun 18 6.58.22 PM.png (643.9 KB) - added by designsimply 4 years ago.
32713.patch (761 bytes) - added by afercia 4 years ago.

Download all attachments as: .zip

Change History (5)

@afercia
4 years ago

#1 @afercia
4 years ago

  • Component changed from General to Customize
  • Focuses accessibility added
  • Keywords has-patch commit added
  • Milestone changed from Awaiting Review to 4.3
  • Version set to trunk

Proposed patch simply adds an aria-label attribute. See in the screenshot below how aria-label completely overrides the default text (which doesn't get read out). Used this way, an aria-label attribute can be a very useful means to provide more descriptive UI controls to Assistive Technologies.

https://cldup.com/_6UvdPeNz9.png

#2 @celloexpressions
4 years ago

Still waiting for commit or other feedback here. Looks good to me, but may require a refresh due to recent changes around here.

#3 @SergeyBiryukov
4 years ago

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

In 32981:

Customizer: Add an aria-label attribute to the Add Items button to improve accessibility.

props afercia.
fixes #32713.

Note: See TracTickets for help on using tickets.