Theme Switcher: Accessibility test result

Accessibility test results of the new Customizer Theme Switcher

Tested:
Customizer Theme Switcher Beta Version 0.7
On WordPress 4.2-Alpha nightly build

Testers:
@afercia (keyboard, screen-reader, code review, report)
@trishacupra (keyboard)

The report is divided into:

  • Must have
  • Nice to have
  • General Customizer issues
  • A11y unrelate issues

Must have

1. The accordion title

The accordion title doesn’t convey enough information about the purpose of this section. The text just says, for example:

Theme: Twenty Fifteen
Press return or enter to expand

OK, that’s nice to know… but what I can do there when it’s expanded?
Text should say also something like “preview more themes” or similar. This is a UI issue for all users: I just clicked on “Customize”, I know I’m in a place where I can customize things. So what I understand is I can “Customize Site Title & Tagline”, “Customize Colors” etc. and for analogy with other titles the information I get here is that I can “Customize Theme: Twenty Fifteen”. Nothing about a “preview”.

2. Empty tab stop after “Add New” and before search.

Just on first load, ‘.theme-overlay’ has display: block meaning is visible (though empty) AND is focusable:

<div class="theme-overlay" tabindex="0"></div>

Empty tabs stops are confusing for users, they can’t figure out what’s in there. What happens after you open and then close the modal? fadeOut() sets display to none and ‘.theme-overlay’ is no more focusable: no more empty tab stop. Should be display: none also on first load, to avoid the empty tab stop.

3. Missing label

#themes-filter “search installed themes…” has no label

4. Focus + Enter on “Theme Details”

Focus + Enter on “Theme Details” doesn’t trigger the details modal.

Everything must be operable with a keyboard.
Elements need to be focusable to receive keyboard events. Why binding keydown event on ‘.theme-screenshot, .more-details, .theme-name’ when they’re not focusable. No focus, no keydown event. What about to bind keydown directly on ‘.theme’ which is already focusable? And then move ‘.theme-actions’ out of ‘.theme’ and position it absolutely?

5. ARIA role and aria-label on the details modal

ARIA role and aria-label on the details modal, to give feedback a modal is currently open.
Recommended:

<div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme details' ); ?>"></div>

This way, when the modal opens, screen reader will read out:
“Theme details dialog”
Without this, screen readers will start reading out all the content of the dialog, with no feedback about a dialog is actually open, e.g.:
“out of list” (meaning it’s exiting from the themes list)
“Show previous theme button, Show next theme button, Close overlay button, Twenty Fourteen Version: 1.3” etc…

Important: to be done together with point 2.

6. Close button.

For consistency with 5., change the close button text in ‘Close details dialog’.
Current text ‘Close overlay’ doesn’t help me to understand what an “overlay” is, that’s developers language.

7. Contain keyboard navigation inside the modal.

When a modal is open, keyboard navigation must be contained inside the modal.

WordPress already does this for almost all of its modals. Every modal has its own way… we should standardize this sooner or later.
We can provide a working code example, not a real patch, we’ve just patched the plugin locally. Code borrowed from media-views “wp.media.view.FocusManager”.
It’s just an example, this feature can be implemented in many different ways, see for example other modals (wplink, etc.). Little concerned about jQuery UI :tabbable performance, maybe not an issue.

8. The preview <iframe>

The preview <iframe> should have a title attribute.

9. Focus on Add New Theme box

Focus on Add New Theme box (the last one in the left sidebar). Recommended: make focus style same as hover.

Nice to have

10. Tabbing in the modal

Tabbing in the modal, there’s no easy way to find information about the theme! for example in this text:

Twenty ThirteenVersion: 1.4
By the WordPress team

only “the WordPress team” is a link, when read out of context has no useful meaning. Would be nice to have some more text in the link (maybe using screen-reader-text) with the current theme name. Needs .org API change?

11. Collapse/expand link

Tester’s report: “Can’t figure out how to navigate to the ‘expand’ arrow after collapsing the customizer.”

Important: when the sidebar panels slide out and are out of view, they’re still focusable and “tabbable”. You can tab through them and also activate their controls, just focus one of them and press Enter.

Recommended: when panels slide out and their animation ends, they should really be hidden with display: none to make their controls not focusable.
Similar to what currently happens in media views, see: #30599

12. Collapse/expand link focus style

Improve the collapse/expand link focus style

13. Jump from the sidebar pane to the preview pane

Consider having some sort of mechanism to quickly jump from the sidebar pane to the preview pane and vice-versa.

Say you’re a keyboard user, you choose a theme and you press Enter on the “Live Preview” button. Page is updated and focus is lost. To navigate with the keyboard to the preview pane, you have to tab through all the sidebar controls first.
Same when you want to return to the sidebar pane after finally getting to the preview pane.

Tester’s report: “Can’t find a way to skip straight across to the theme preview pane on the right in order to explore the new theme preview, scroll up and down to check out the theme, etc.”

Important note:

Say you choose a theme and finally tab to the preview pane: there’s a chance you’re previewing a totally inaccessible theme.
Tester’s report: “You’re tabbing and you have no idea where you’re in that case.”
As a screen reader user you may be totally lost, as a keyboard users you could fall in some keyboard trap.

Recommended: add a way to easily exit the preview pane and move focus back to the sidebar.

14. Giving focus to iframes. (related to 13)

Some browsers, especially when in combination with some screen readers, have issues giving focus to iframes.

Tester’s report: “When I tab between the Collapse link and the Preview pane, there isn’t a smooth transition, which is the ‘gap’ where I’m getting lost. I suggest a link that appears on focus to go to the Preview pane just before the Collapse link.”

General Customizer issues

15. The .theme-screenshot image

The .theme-screenshot image in “You are previewing” accordion section needs an alt attribute, see customize.php

<img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />

16. Headings

Missing first level heading. todo check header hierarchy.

17. Orphaned/misplaced label, examples

“Background Color” (and all the ones for picking colors with Iris)
there’s a label that wraps 2 input fields, one gets revealed when picking a color. We understand this is how iris works, BTW screen readers won’t get the association between the label and a form element.

“Background Image”:

 <label for="background_image-button">
 <span class="customize-control-title">Background Image</span>
 </label>

The “background_image-button” button is the “Change Image” button.
Result: click on what appears to be a title: “Background Image” and a modal opens.

18. Empty links (Customizer or underlying panes?)

Several empty links (some of them maybe img without alt? some just empty). See several add widget toggles a.widget-action with no text or aria-label, just empty. They should have some text that makes sense also when read out of context.

19. Buttons

Buttons should be buttons (see primary button is an <a>).

20. Color contrast

Color contrast: active/focus state, accordion toggle arrows, etc.

21.  .theme-overlay .theme-version has user-select: none;

Why .theme-overlay .theme-version has user-select: none; ?
As a user, I want to be able to select that text.

A11y unrelated

22. Attributes

Attributes should be escaped? see e.g.
placeholder=”<?php _e( ‘Search installed themes…’ ); ?>”

23. <button> elements

All the <button> elements need type=”button”.

24. Event namespaces

Consider the use of event namespaces?

25. “Update Available”

On hover,the cursor is a pointer but clicking it doesn’t do anything: consider using default cursor style

26.  Maybe .theme-header should not be rebuilt on each prev/next

Enhancement: maybe .theme-header should not be rebuilt on each prev/next ?
With .theme-header being “fixed”, focus would not be lost on each prev/next action, this would save focus handling via JS.

27. Bug in Chrome when focusing the close button.

Couldn’t reproduce using Firefox, looks like it happens just in Chrome.
See attached screenshot: as soon as you tab on the “Close” button, the sidebar pane underlying the details modal slides out and the main accordions gets in.

See: .wp-full-overlay-sidebar-content
it inherits overflow: auto from theme.css so it can scroll horizontally.

When focusing any focusable element on the right side of the details panel (close button or links in the content) it will scroll thus moving the sidebar on the left.

Notice it gets also overflow-y: auto and overflow-x: hidden from customize-controls.css
Need to reset both to visible, just when the details modal is open, using something like:

.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
overflow: visible;
}

 

customizer theme switcher tabbing

customizer theme switcher tabbing

#accessibility-usertest