Theme Switcher: Accessibility test result

AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) test results of the new CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. Theme Switcher

Tested:
Customizer Theme Switcher BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 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
• A11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) 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 UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. 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: blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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-filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. “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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 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 <iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.>

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 sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.). 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 APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. 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 headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. 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 widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. 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;
}


 

#accessibility-usertest