Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#26603 closed defect (bug) (fixed)

Buttons in Themes Popup do not identify themselves to AT

Reported by: grahamarmfield's profile grahamarmfield Owned by: sergeybiryukov's profile 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 10 years ago.
Screenshot of activation of new theme step one
step-2.jpg (41.2 KB) - added by sharonaustin 10 years ago.
Screenshot showing activation, but no buttons as described
26603-1.patch (1.0 KB) - added by bramd 10 years ago.
Label buttons using a hidden <span> instead of an alt attribute.

Download all attachments as: .zip

Change History (11)

#1 follow-up: @sharonaustin
10 years 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!

@sharonaustin
10 years ago

Screenshot of activation of new theme step one

@sharonaustin
10 years ago

Screenshot showing activation, but no buttons as described

#2 @nacin
10 years ago

  • Component changed from Accessibility to Themes
  • Focuses accessibility added

@bramd
10 years ago

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

#3 @bramd
10 years ago

  • Keywords has-patch added

#4 in reply to: ↑ 1 @SergeyBiryukov
10 years 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

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

#6 @SergeyBiryukov
10 years 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.

#7 @SergeyBiryukov
10 years ago

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

#8 @nacin
10 years 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.