Rian Rietveld 7:59 pm on March 30, 2015
Tags:   

Usertest: The search functions in the Admin

Question for the test team

We like you to test the search function options in the WordPress Admin.
We know there are 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) issues here, we would like your expert opinion about this.

Test on WordPress 4.2-alpha

  • Try the search function in:
  • Posts > All posts
  • Posts > Categories
  • Posts > Tags
  • Media
  • Pages > All pages
  • Comments
  • Appearance > Themes
  • Plugins > Installed Plugins
  • Plugins > Add New (try different options, like featured, favorites, etc.)
  • Users > All users
  • And if you still have time: Pages > Add new > Add Media > search an image or file in the Media Library, try different options, like kind of media item and date

Experiment:

  • Try with search words you know give results
  • Try an empty search
  • Try with nonsence words

Can you tell us if:

  • it’s easy to do a search or do you get stuck
  • you get what you expected
  • you can read the results well
  • you get good feedback when there are no results
  • you miss something to make it work for you
  • you have suggestions for improvement (keep it short please)

Shaun Everiss

I just did the test with NVDA, search worked as expected. I didn’t see any issues.

Gabriella

Tools: Safari + VoiceOver

  • Posts > All posts: The function worked perfectly, however I think that the missing part is telling the user how many results he obtained with his search. Also if is possible, make the focus stays on the main content after the page is refreshed would be nice.
  • Posts > Categories: Same comment than Post > All posts.
  • Posts > Tags: Same comment than Post > All posts.
  • Pages > All pages: Same comment than Post > All posts.
  • Comments: Same comment than Post > All posts.
  • Appearance > Themes: See missing search button comment.
  • Plugins > Installed Plugins: Same comment than Post > All posts
  • Plugins > Add New: Same comment than Post > All posts.
  • Users > All users: Same comment than Post > All posts.

Media

Media: The function worked perfectly.
Missing search button: I noticed that in this page, the search function is a little bit different than search functions in the other pages. In the media page the button “search for XX” at the right side of the search input text is missing. Since in most of the pages we found a label + input text + button search, the user is used to this pattern. I propose to modify the search function to be consistent with the rest of the functions.
Media: Select class=”attachment-filters” missing label
The select option for type of media (images, audio, etc) does not have a label so the select context is not clear since the user only listen to “All (4)”.

Pages > Add new > Add Media: Here we have a similar case to the search function on Themes page. This is an interactive search. The problem here is that there is nothing that tells the screen readers what is happening while the user is performing the search.

Themes

Search Placeholder in Themes: The themes search function is the only one where the input text has a placeholder. Listening to it is a little confusing because the same word is repeated two or tree times:
“Search installed themes, clickable, Search installed themes, Search installed themes search text field”.
Since this function is the only with a placeholder, what do you think about removing the placeholder from the code to keep consistency with the other search functions?

Search function inside the H2: The search function for the themes page is grouped inside the H2. With VoiceOver, the user won’t be able to write in the input text unless she goes inside (control+option+shift+down arrow) the group to interact with it.

Blocked search input text; There is a bug when writing some text in the input text and clicking enter to execute the search. The focus is blocked and the text can not be erased. One solution is to move to another element on the page and come back to the input text to regain the functionality. The search function in Themes is different because is an interactive search, the user write something and at the same time results appears. The problem here is that there is nothing that tells the screen readers what is happening while the user is performing the search. Clicking on enter to execute a search is a normal behaviour because all the other pages offer the same pattern. I think if the user get trapped in this bug won’t be able to find a way out.

Missing search button: In this page, the button “search for XX” at the right side of the search input text is missing. Since in most of the pages we found a label + input text + button search, the user is used to this pattern. I propose to modify the search function to be consistent with the rest of the functions.

Also missing in this page is the text “Search results for “XX”” that appears inside the H2. Most of the pages added it when the page is refreshed after doing a search.

Amy Li

Posts > All posts

  • Focus should set to search input box when first enter all posts page
  • Screen reader read “Search Posts” button as “Disabled”
  • Search Posts color contrast radio is not higher than 4.5:1

Posts->Categories

  • Focus should set to search input box when first enter
  • When Enter space into Name input it should read out warning in Screen Reader
  • After input empty into Name, nothing shows and focus is gone and removed

Appearance->Themes

  • After enter input text it should read results when there’s results found
  • Focus should set to first search result after click Enter into search box

Plugins > Installed Plugins

Focus should set to first search result after click Enter into search box or set back to search input box

Plugins > Add New

When enter “Jet” text which there’s search result, the the typeselector select field has no text/label

<select name="type" id="typeselector">
 <option value="term" selected="selected">Keyword</option>
 <option value="author">Author</option>
 <option value="tag">Tag</option>
 </select>

Users > All users

  • Focus should set to search input box when first enter all posts page
  • Focus should set to first search result after click Enter into search box

Resize window:

Search box should be on top when screen size is smaller than <320 like mobile version.

Tina Tedesco

I use JAWS 15.

When I search for something, and whether it found it or not, my results did not appear until the end. I had to use the arrow key to go down to see where the actual results were.

It did say out loud searching but did not bring me right to the search results. Can you put in something where the screen reader will read out how many results after searching?

Besides that I thought the search worked well. Definitely doable with a screen reader.

John Sexton

Test on Win7 64bit, IE11 & Supernova14

Search in categories:

Focus is placed in the new categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. name field on page load

Search in tags:

Focus is placed in the new tag name field on page load

Search in media library

While in grid view, this search works differently it appears to 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. items as you type but from a screen reader point of view clicking the search button gives no feedback that any search has been performed. Perhaps on pressing the search button focus can be moved to the first search result or if a total of items found message is added, like in posts, categories and tags focus can be moved to that.
While in list view, it works more like the posts, categories and tags search.

Search on all pages

Search on “(no title)” and “mwa” both return no items
It doesn’t seem possible to search for all pages with no titles

Search on themes

Empty search returns all six themes
Search on “four” returns two items: twenty fourteen and twenty ten
Search on “ten” returns four items: twenty fifteen, twenty eleven, twenty fourteen and twenty ten
There is no search button and pressing enter in the search field gives no indication to the screen reader of any changes and the search results are a little odd.

On the whole quite reasonable. However, themes gave the most odd results. Not having any screen reader friendly feedback a search has been done is a little off putting as is placing the focus on a form field on page load.
The searches appear to be limited to the first column of the results table and it may be nice to be able to search or filter on file type in the media library. IE jpeg, png, gif, mp3, mp4, doc, docx, pdf etc.
Another nice to have may being able to search or filter by user who created/uploaded the item.

Geof Collis,

Tools: IE 11, JAWS 14.5

search post, pages, comments, plugins and media/library

no problem with search function initially but I dont like trying to find the results, there needs to be a heading for the results, as it is right now I’ve got to tab through all of the regular stuff before I find a table with results if any, very annoying and time consuming, also, I’d like the focus to be taken to the results after a search if possible

On another note a heading before all posts, pages, categories etc would be nice.

I noticed that when I do a second search that the previous text is still in the edit box, this should be removed after the initial search.

Tags and categories

This is better, they have a heading and the search term used but the focus gets taken past the heading, I have to move backwards, this might be more of a problem for a keyboard user.

Still the issue of previous search term in edit box.

Themes

Something wrong with the edit box, as I start typing it is reading off the url and search term and when I hit enter it doesn’t go out of forms mode, I have to do it manually and again a heading with the results would be better than tabbing through the regular stuff.

Plugins add new, all criteria

This worked great, a heading for each 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 made it easier to sift through them but still the issue of text in edit box after search.

Add new

Posts and pages work fine as long as the disable the visual editor checkbox is selected in Profile.

Add media

Uploading from my computer has become a whole lot better but do have issues with adding alt text etc, trying to add one from the media library is non existent, perhaps a test for another day.

Summary:

  • Give screen reader feedback for search results and what’s happening with the interactive search in themes.php and upload.php
  • Give better screen reader feed back about the amount of search results
  • Set the focus on search the results after search submit (and not for example at New category)
  • Add a (hidden) submit button  and remove the placeholder for search in upload.php (at least for list mode),  plugin-install.php and themes.php (see ticket #26600)
  • In themes the search input text gets blocked after clicking enter to execute the search.
  • Bug: Plugins > Add New: typeselector select field has no text/label (see ticket #26601 )
  • It is not possible to search for posts/pages with no title
  • Search installed themes gives to much results?
  • Remove search function for the themes.php outside the H2 (see ticket #26601 )
  • Move the search field on top in small windows

Discussions in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. about the results:

Slack log

Now there are 5 different ways for a search:

  1. Search input no submit button, no live search (need to press Enter) in Media Library list mode
  2. Search input no submit button, live search fires “as you type” in Media Library grid mode, Themes (add new, wp.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.), Network Themes (add new, wp.org API)
  3. Search input no submit button, live search fires “as you type” (more a “filter current collection” than a search), Themes (installed themes), 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. 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., Plugins (installed plugins)
  4. Search input with hidden submit button, press Enter or tab and submit the hidden button (after the search, the “typeselector” select appears) in , Plugins (add new), Network Plugins (add new)
  5. “Classic” search: search input with submit button, press Enter or submit button, in Posts, Categories, Tags, Pages, Comments, Users, Network index: search users, Network index: search sites, Network Sites, Network Users, Network Themes (installed), Network Plugins (installed)

We recommend only 2 forms of search:

  • the classic one, the same for every search, with visible submit button
  • the dynamic one:  adding wp.a11y.speak to show the results count, and making sure focus doesn’t change dynamically

Actions:

  • Open ticket for the missing label for the  typeselector select field – @rianrietveld
  • Open ticket on a unified search form display: 2 types – @cheffheid

#accessibility-usertest