WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 3 weeks ago

#26603 closed defect (bug) (fixed)

Buttons in Themes Popup do not identify themselves to AT

Reported by: grahamarmfield Owned by: SergeyBiryukov
Milestone: 3.8.2 Priority: normal
Severity: normal Version: 3.8
Component: Themes Keywords: has-patch commit fixed-major
Focuses: accessibility Cc:

Description

Within the themes.php page, if I activate one of the themes displayed, a modal popup appears.

At the top of the popup are three buttons - Show prev theme, show next theme, and close overlay.

These buttons may not be fully accessible by screen readers as the 'labels' for the buttons are provided in an alt attribute. The alt attribute is not a valid attribute on the <button> element. NVDA does not voice the alt attribute, although JAWS does.

Some other way will need to be found to ensure that all AT can access the purpose of these buttons.

Attachments (3)

step-1.jpg (41.9 KB) - added by sharonaustin 4 months ago.
Screenshot of activation of new theme step one
step-2.jpg (41.2 KB) - added by sharonaustin 4 months ago.
Screenshot showing activation, but no buttons as described
26603-1.patch (1.0 KB) - added by bramd 3 months ago.
Label buttons using a hidden <span> instead of an alt attribute.

Download all attachments as: .zip

Change History (11)

comment:1 follow-up: sharonaustin4 months ago

  • Cc sharon.austin.2014@… added

Hi Graham, I'm in my test 3.8 site, and switched from the twentyfourteen to twentythirteen and back again--I'm not getting a modal, nor three buttons pop up. May I ask, which browser, which version of the browser, and which operating system are you using?

(I *think* I'm on the same "page" that you are on.....in the admin screen, and the URL tells me I'm using the themes.php template)

I WILL say I see a problem for sighted users! I was able to tab to a given theme and activate it without using a mouse, but I was not able to discern from any visual cues (e.g., thin dotted line around the theme name--easily corrected via CSS) to let me know that I had tabbed to a particular theme. I had to check the URL to make sure I was on the right theme.

That said, I'm not sure I'm seeing what you're seeing, and would like to confirm we're talking about the same page, if possible.

As always, thank you, Graham!

sharonaustin4 months ago

Screenshot of activation of new theme step one

sharonaustin4 months ago

Screenshot showing activation, but no buttons as described

comment:2 nacin3 months ago

  • Component changed from Accessibility to Themes
  • Focuses accessibility added

bramd3 months ago

Label buttons using a hidden <span> instead of an alt attribute.

comment:3 bramd3 months ago

  • Keywords has-patch added

comment:4 in reply to: ↑ 1 SergeyBiryukov3 months ago

Replying to sharonaustin:

I was able to tab to a given theme and activate it without using a mouse, but I was not able to discern from any visual cues (e.g., thin dotted line around the theme name--easily corrected via CSS) to let me know that I had tabbed to a particular theme. I had to check the URL to make sure I was on the right theme.

Related: #26527

comment:5 SergeyBiryukov3 months ago

  • Milestone changed from Awaiting Review to 3.8.2
  • Version changed from trunk to 3.8

Appears to be introduced in [26922], but I guess alt wasn't a valid attribute for <div> either (originally introduced in [26141]). Moving to 3.8.2 for consideration.

comment:6 SergeyBiryukov3 months ago

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

In 27119:

Use .screen-reader-text class instead of an alt attribute for overlay button labels on Themes screen.

props bramd.
fixes #26603 for trunk.

comment:7 SergeyBiryukov3 months ago

  • Keywords commit fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

comment:8 nacin3 weeks ago

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

In 27875:

Use .screen-reader-text class instead of an alt attribute for overlay button labels on Themes screen.

Merges [27119] to the 3.8 branch.

props bramd.
fixes #26603.

Note: See TracTickets for help on using tickets.