Title: Theme Switcher: Accessibility test result
Author: Rian Rietveld
Published: January 31, 2015
Last modified: March 26, 2015

---

 [  ](https://profiles.wordpress.org/rianrietveld/) [Rian Rietveld](https://profiles.wordpress.org/rianrietveld/)
7:38 am _on_ January 31, 2015     
Tags: [Accessibility usertest ( 16 )](https://make.wordpress.org/accessibility/tag/accessibility-usertest/)

# 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](https://profiles.wordpress.org/afercia/) (keyboard, screen-
reader, code review, report) [@trishacupra](https://profiles.wordpress.org/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](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/](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](https://core.trac.wordpress.org/ticket/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; }

 

[⌊customizer theme switcher tabbing⌉⌊customizer theme switcher tabbing⌉[

customizer theme switcher tabbing

[#accessibility-usertest](https://make.wordpress.org/accessibility/tag/accessibility-usertest/)

### Share this:

 * [  Threads ](https://make.wordpress.org/accessibility/2015/01/31/theme-switcher-accessibility-test-result/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/accessibility/2015/01/31/theme-switcher-accessibility-test-result/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/accessibility/2015/01/31/theme-switcher-accessibility-test-result/?share=bluesky)
 * [  LinkedIn ](https://make.wordpress.org/accessibility/2015/01/31/theme-switcher-accessibility-test-result/?share=linkedin)
 * [  X ](https://make.wordpress.org/accessibility/2015/01/31/theme-switcher-accessibility-test-result/?share=x)
 * [  Facebook ](https://make.wordpress.org/accessibility/2015/01/31/theme-switcher-accessibility-test-result/?share=facebook)

 1.  ![](https://secure.gravatar.com/avatar/19347ef87f4fd5978b2184e7f05af5c780485f69dbfdefccfe3521c732a87f06?
     s=32&d=mm&r=g)
 2.   [Drew Jaynes (DrewAPicture)](https://profiles.wordpress.org/drewapicture/)  7:
     59 am _on_ January 31, 2015
 3.  Thank you [@afercia](https://profiles.wordpress.org/afercia/), [@trishacupra](https://profiles.wordpress.org/trishacupra/),
     and [@rianrietveld](https://profiles.wordpress.org/rianrietveld/). Very thorough!
 4.  ![](https://secure.gravatar.com/avatar/4f684f4cc972282de186d82860316d741081e106110096762e4b2588b3d5920a?
     s=32&d=mm&r=g)
 5.   [Graham Armfield](https://profiles.wordpress.org/grahamarmfield/)  3:41 pm _on_
     January 31, 2015
 6.  Amazingly thorough test. Excellent work.
 7.  ![](https://secure.gravatar.com/avatar/4fd344e387cd0febbb417ee2a2bef7db6b40c8f7ecf4265fb41dcef8e9fa8c4b?
     s=32&d=mm&r=g)
 8.   [Joe Dolson](https://profiles.wordpress.org/joedolson/)  3:47 pm _on_ January
     31, 2015
 9.  This is great data – thanks for doing this!
 10. ![](https://secure.gravatar.com/avatar/f3be1972cdd27bfc2f3d5ffeae483bb4982a9d6659d1af51f1f9d2e6b1db3173?
     s=32&d=mm&r=g)
 11.  [Nick Halsey](https://profiles.wordpress.org/celloexpressions/)  7:08 pm _on_
     January 31, 2015
 12. Thanks for the detailed & thorough testing! I’ve popped into #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) on slackSlack Slack is
     a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/). 
     The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/)
     and will work through these issues today. Many of these issues require coreCore
     Core is the set of software required to run WordPress. The Core Development Team
     builds WordPress. patches; I’ll create tickets for those and patch them (although
     I may leave some as good-first-bugs); it would be great if a committer could follow
     up on those soon.
 13. ![](https://secure.gravatar.com/avatar/f3be1972cdd27bfc2f3d5ffeae483bb4982a9d6659d1af51f1f9d2e6b1db3173?
     s=32&d=mm&r=g)
 14.  [Nick Halsey](https://profiles.wordpress.org/celloexpressions/)  8:45 pm _on_
     February 1, 2015
 15. Please let me know if any of these changesets look incorrect in any way. Working
     my way through the list from the top, will do a second pass to create the coreCore
     Core is the set of software required to run WordPress. The Core Development Team
     builds WordPress. tickets that I know the fix for.
      1. todo 2. Fixed in [https://plugins.trac.wordpress.org/changeset/1080258/customizer-theme-switcher](https://plugins.trac.wordpress.org/changeset/1080258/customizer-theme-switcher)
     3. Fixed in [https://plugins.trac.wordpress.org/changeset/1080261/customizer-theme-switcher](https://plugins.trac.wordpress.org/changeset/1080261/customizer-theme-switcher)
     4. Sorry, I completely messed that up trying to fix something else. Fixed in [https://plugins.trac.wordpress.org/changeset/1080271/customizer-theme-switcher](https://plugins.trac.wordpress.org/changeset/1080271/customizer-theme-switcher)
     5. Fixed in [https://plugins.trac.wordpress.org/changeset/1080272/customizer-theme-switcher](https://plugins.trac.wordpress.org/changeset/1080272/customizer-theme-switcher)
     6. Fixed in [https://plugins.trac.wordpress.org/changeset/1080274/customizer-theme-switcher](https://plugins.trac.wordpress.org/changeset/1080274/customizer-theme-switcher)
     7. todo 8. todo core ticket/patch 9. todo core ticket/patch (this uses the CSSCSS
     CSS is an acronym for cascading style sheets. This is what controls the design
     or look and feel of a site. from the admin page) 10. This would be a core patch
     at least, and possibly an 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. Could you create a ticket for this
     issue on core tracTrac Trac is the place where contributors create issues for 
     bugs or feature requests much like GitHub.[https://core.trac.wordpress.org/](https://core.trac.wordpress.org/).
     targeted at the current admin themes page, which has the same issue, which would
     most likely also fix 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/](https://wordpress.org/plugins/)
     or can be cost-based plugin from a third-party.? 11. I think [#29949](https://core.trac.wordpress.org/ticket/29949)
     would probably fix this? 12. I think that’s likely to change with [#31195](https://core.trac.wordpress.org/ticket/31195)
     if that happens, but in the meantime [#31201](https://core.trac.wordpress.org/ticket/31201)
     13. todo core ticket/patch, I’d like to add “Skip to preview” and “Back to controls”`.
     screen-reader-shortcut` links 14. Add to 13. ticket an additional preview link
     before collapse 15. The proposal is to make that section go away in the merge 
     patch, so should be a non-issue. 16. todo core ticket/patch #customize-info .accordion-
     section-title should probably have a h1 somewhere? 17. todo core ticket/patch 
     please open a ticket with more specifics on issue with the different control types(
     upload/image, color, etc.) 18. todo core ticket/patch please open a ticket with
     more specifics on this issue 19. todo core ticket/patch please open a ticket with
     a list of buttons that aren’t buttons in the 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. so we can fix those (I know widgets
     have several) 20. See [#29158](https://core.trac.wordpress.org/ticket/29158). 
     Would love to get that resolved, it’s really bad right now. 21. todo core ticket/
     patch (no idea why that’s there) 22. Fixed in [https://plugins.trac.wordpress.org/changeset/1080352/customizer-theme-switcher](https://plugins.trac.wordpress.org/changeset/1080352/customizer-theme-switcher)
     23. Fixed in [https://plugins.trac.wordpress.org/changeset/1080362/customizer-theme-switcher](https://plugins.trac.wordpress.org/changeset/1080362/customizer-theme-switcher).
     Could also use a core ticket/patch for the existing equivalent for the admin page
     24. Not sure that that’s needed since everything’s already scoped to the Customizer
     section/control, but I’m open to suggestions/patches. 25. I decided to remove 
     the updates 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. entirely, it doesn’t fit here. [https://plugins.trac.wordpress.org/changeset/1080335/customizer-theme-switcher](https://plugins.trac.wordpress.org/changeset/1080335/customizer-theme-switcher)
     26. Could get a bit messy since there’s no container element for to sibling elements
     to .theme-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., is there a specific benefit here other than saving
     some JS? 27. That’s been bugging me for a while and I had no idea what was causing
     it, thanks for the fix! [https://plugins.trac.wordpress.org/changeset/1080369/customizer-theme-switcher](https://plugins.trac.wordpress.org/changeset/1080369/customizer-theme-switcher)
 16. ![](https://secure.gravatar.com/avatar/f3be1972cdd27bfc2f3d5ffeae483bb4982a9d6659d1af51f1f9d2e6b1db3173?
     s=32&d=mm&r=g)
 17.  [Nick Halsey](https://profiles.wordpress.org/celloexpressions/)  9:40 pm _on_
     February 1, 2015
 18. CoreCore Core is the set of software required to run WordPress. The Core Development
     Team builds WordPress. tickets:
 19. I left some as good-first-bugs. I didn’t make tickets for ones where I’m not sure
     of exactly what’s needed.
 20. 8. [#31202](https://core.trac.wordpress.org/ticket/31202)
      9. [#31203](https://core.trac.wordpress.org/ticket/31203)
     12. [#31201](https://core.trac.wordpress.org/ticket/31201) 13-14. [#31204](https://core.trac.wordpress.org/ticket/31204)
     21. [#31205](https://core.trac.wordpress.org/ticket/31205)
 21. ![](https://secure.gravatar.com/avatar/cd18da60d54f0a7374dc62b122ff5050f33fad8c43ce013594f7703a37b9d906?
     s=32&d=mm&r=g)
 22.  [Andrea Fercia](https://profiles.wordpress.org/afercia/)  11:24 pm _on_ February
     1, 2015
 23. Nick thanks very much for your complete review and fixings. Seen many of them 
     are already in v. 0.8.
 24. ![](https://secure.gravatar.com/avatar/64423a5592dbb3c4402c46302d6f635ae9eafa5a8c4155f0b1bdbbd359901675?
     s=32&d=mm&r=g)
 25.  [Sharon Austin](https://profiles.wordpress.org/sharonaustin/)  3:06 pm _on_ February
     2, 2015
 26. This is a superb report. I’m learning a lot just by reading it, because the report
     spells out “why” something is broken for the user, not just what is broken. I 
     hope to see more reports like this.
 27. Pingback: [WordPress › Customizer Theme Switcher Update – 2/2 « Make WordPress Core](https://make.wordpress.org/core/2015/02/03/customizer-theme-switcher-update-22/)
 28. ![](https://secure.gravatar.com/avatar/cd18da60d54f0a7374dc62b122ff5050f33fad8c43ce013594f7703a37b9d906?
     s=32&d=mm&r=g)
 29.  [Andrea Fercia](https://profiles.wordpress.org/afercia/)  6:50 pm _on_ February
     3, 2015
 30. Noticed two new issues, then we should maybe review all the points and do a second
     testing round:
 31.  * DIVs added as last items inside UL (see the famous add-new-theme div+link) 
        that’s not just invalid code but also not semantic and problematic for 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): that
        list should… list 🙂 the themes. Add new theme link is a control logically 
        separate by the list and should be outside of the list
      * implicit labels (the ones without “for” attribute that just wrap an element)
        that contain more than one element so UAs won’t understand which element they’re
        associated to
      * “Search installed themes” gets read out twice. Repeating the same text in the
        label and in the placeholder it’s not a so good practice. Placeholder should
        not be used as a label but as a “hint” about how/what to enter in the field.
 32. Edited: added 3rd new issue.
 33. ![](https://secure.gravatar.com/avatar/cd18da60d54f0a7374dc62b122ff5050f33fad8c43ce013594f7703a37b9d906?
     s=32&d=mm&r=g)
 34.  [Andrea Fercia](https://profiles.wordpress.org/afercia/)  7:36 pm _on_ February
     12, 2015
 35. Reviewed all the issues, thanks to [@celloexpressions](https://profiles.wordpress.org/celloexpressions/)
     dedication to 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) the main ones are fixed. Big thanks 🙂 There are some 
     outstanding issues, listed below. Note: Nick, will report also some of your comments,
     for clarity:
 36. New 1.
      “add-new-theme” DIV added as last items inside UL: invalid/non semantic
     code, also problematic for accessibility: how many themes in the list? Add new
     theme link is a control logically separated and should be outside of the list.
 37. New 2.
      “Search installed themes” gets read out twice, at least with NVDA. Repeating
     the same text in the label and in the placeholder it’s not a good practice. Placeholder
     should not be used as a visual label but as a “hint” about how/what to enter in
     the field.
 38. Old 1. The accordion title doesn’t convey enough information about the purpose
     of this section.
      see [https://make.wordpress.org/core/2015/02/03/customizer-theme-switcher-update-22/](https://make.wordpress.org/core/2015/02/03/customizer-theme-switcher-update-22/)
     > Our biggest remaining decision is whether to change the title of the “themes”
     section in the 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.. Note: there’s ongoing discussion about the 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. area, involving possible 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. changes.
 39. Old 10. Tabbing in the modal, there’s no easy way to find information about the
     theme!
      > This would be a coreCore Core is the set of software required to run
     WordPress. The Core Development Team builds WordPress. patch at least, and possibly
     an 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. Could you create a ticket for this issue on core tracTrac
     Trac is the place where contributors create issues for bugs or feature requests
     much like GitHub.[https://core.trac.wordpress.org/](https://core.trac.wordpress.org/).
     targeted at the current admin themes page…? Thinking about this, not sure what
     we can do here about “authorAndUri” returned by wp.org API, there are also translation
     issues to take into consideration.
 40. Old 15. The .theme-screenshot image in “You are previewing” accordion section 
     needs an alt attribute
      > The proposal is to make that section go away in the 
     merge patch, so should be a non-issue OK, just mentioned here as a reminder.
 41. All the other issues already have a ticket or they’re not strictly related to 
     the Customizer Theme Switcher, but to the Customizer itself, will open new tickets.
 42.  * ![](https://secure.gravatar.com/avatar/f3be1972cdd27bfc2f3d5ffeae483bb4982a9d6659d1af51f1f9d2e6b1db3173?
        s=32&d=mm&r=g)
      *  [Nick Halsey](https://profiles.wordpress.org/celloexpressions/)  4:47 pm _on_
        February 13, 2015
      * 1. unfortunately we can’t change that. The way the 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. works, all controls
        need to be children of the same container, in this case the ul. We could put
        the add-new div within an li, though, if that would be better.
         2. So can we
        remove the screen-reader-text label then? We’d want that text in the placeholder
        only by default, but if we need to do anything additionally for 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) let
        me know.

Comments are closed.

# Post navigation

[← Test Chat Summary, January 26](https://make.wordpress.org/accessibility/2015/01/27/test-chat-summary-januari-26/)

[Test Chat Summary, Februari 2 →](https://make.wordpress.org/accessibility/2015/02/03/test-chat-summary-februari-2/)