Buttons in Themes Popup do not identify themselves to AT

[grahamarmfield]

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.

[sharonaustin]

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]

Screenshot of activation of new theme step one

[sharonaustin]

Screenshot showing activation, but no buttons as described

[bramd]

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

[SergeyBiryukov]

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

[SergeyBiryukov]

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.

[SergeyBiryukov]

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.

[nacin]

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.