WordPress sites with lots of blog posts or other content types can have a problem.
It’s difficult for users to find stuff.
There are a few ways this could be tackled, for example:
- Implementing breadcrumbs
- Using a site map
- Having a quick start guide
- Having clear navigation to make finding pages simple
Another way to make it easier and make a site more accessible is to implement advanced search, as suggested in Techniques for WCAG 2.0 G161:
A shopping site organizes its products into different categories, such as women’s clothes, men’s clothes, and children’s clothes. These have subcategories, such as tops, pants, shoes, and accessories. Each page also contains a search form. Users can type the product number or product description into the search field and go directly to that product, rather than needing to navigate the product categories to find it.
I decided to see what was available for WordPress search and ways to improve it.
My Testing Setup
I set up a test site with Twenty Fifteen themeand installed the following plugins:
- FakerPress to add dummy posts, pages and users. The only disadvantage of this is that the content was in Latin. I didn’t learn any at school, so some of my searches were guesswork!
- WooCommerce – product data was added from their dummy data file.
- The Events Calendar – I imported event data from CSV filesthey provide.
- Run Log – a plugin to add running data.
The last 3 plugins were all to get examples of custom post types for testing.
How does WordPress search work?
WordPress default search is pretty limited. It doesn’t search anything other than posts or pages, and it returns results by date published.
This is fine for a blog, but not so suitable for searching pages. The last page published on a topic might not be the one a user really needs.
Relevanssi is a plugin which alters the WordPress search results.
More than just posts and pages can be searched, and results can be returned in order of relevance as opposed to date.
I’m using it on this site. 🙂
Here’s a before and after look at search using Relevanssi.
1. Voluptatem recusandae repudiandae dolorum
Posted on December 24, 2016
2. Voluptates enim velit fugit deserunt voluptate et
Posted on November 11, 2016
3. Nemo voluptates dicta est dolorem
Posted on October 15, 2016
4. Repudiandae voluptate iste quia assumenda labore reiciendis
(This is a page, so doesn’t display a post date, but I checked and it was published on June 7, 2016.)
5. Recusandae voluptatem dolores molestias eos nostrum
Posted on May 5, 2016
The same search with Relevanssi active gives a different top 5, this time in order of relevance.
1. Quis voluptate mollitia perspiciatis rerum corrupti
Posted on January 9, 2015
(This post uses the word voluptate 21 times, though some of those are within longer words.)
2. Voluptates enim velit fugit deserunt voluptate et
Posted on November 11, 2016
3. Repudiandae voluptate iste quia assumenda labore reiciendis
(Page – published on June 7, 2016.)
4. Ea excepturi voluptas libero laudantium sed
Posted on May 7, 2015
5. Velit aut autem reiciendis modi placeat
Posted on July 16, 2015
Notice how Relevanssi also bolds the search term in the excerpt.
If configured, Relevanssi can search other things on the site e.g. comments.
This search for “samanta king” finds a comment author, when the regular search comes up blank.
Any drawbacks with Relevanssi?
Out of the box, Relevanssi won’t help the user search a particular post type (say events or products).
Relevanssi accessibility considerations
Relevanssi only affects search output, not input, so shouldn’t affect accessibility.
Of course, you may like to tell your users that the search results are sorted by relevance.
Advanced search plugins
Other plugins allow users to specify their search by their choice of criteria.
- Post type
- Taxonomy e.g. category/tag
- Custom fields e.g. price, date, colour
I took a look at a few to see how usable they were.
I was also interested in their accessibility. Were there any problems for visually impaired or keyboard users in using them?
Search and Filter
You can search by taxonomy (category, tag etc.) or post type (post, page, event etc.) and by date. There’s a premium version which allows searches by custom field (e.g. price).
The Search and Filter plugin documentation gives info on how to build the shortcodes.
Searching by date
This was the shortcode I used to create a search form to search by date. It searches all post types.
[searchandfilter fields="search,post_date" types=",daterange" headings="Search,Date Range"]
The form looks like this. The date picker shows if you hover/tap in the date fields.
Results of a search by date
Here I searched for “party” between 9 January 2017 and 1 February 2017.
The results are interesting (and not just if you’re a Monty Python fan).
- The results given are not posts, but Events. This is because I didn’t specify a post type, so all of them were searched.
- The results are ordered by date posted rather than the event itself. In actual fact, all these events are past events. In this case, using the buil-in Events search would be more appropriate, as it searches the date the event takes place, not the post date.
Searching by post type, category and tag
I created a more complex form which allows the user to search for a term and specify the category, tag and post type they want.
[searchandfilter fields="search,post_types,category,post_tag" types=",checkbox,checkbox,checkbox" post_types="all" headings="Search,Post Type,Categories,Tags"]
What does this complex form shortcode do?
searchandfilterenables the Search and Filter form.
fields="search,post_types,category,post_tag"means the search box, categories and tags will be user selectable.
types=",checkbox,checkbox,checkbox"means that multiple post types, category and post tag options are selectable via checkboxes. If I had used a dropdown list or radio buttons, only one of each would be selectable.
post_types="all"means that all post types found will be listed.
headings="Search,Post Type,Categories,Tags"adds headings above the form controls.
Multiple filters in action
Using the filters above (“ipsum”, posts, products, Fruit, Ocean and star) I got two results.
You can see how specific this kind of search can get.
Accessibility of Search and Filter
The Search and Filter forms seemed to do the job – but how accessible were they?
I had a quick look from the point of view of a keyboard only user and a screen reader user.
Headings and form labels
Heading 4s are used above the form controls. This may result in the problem of skipped heading levels.
It would be better to group similar controls with the
<legend> elements instead of headings. This fits with WebAIM’s recommendation for building accessible forms.
As it is, a screen reader user can access all the controls, but may not realise that the Ocean checkbox refers to a category.
Also, each form control needs a label which matches its id.
<label><input type="checkbox" name="ofpost_tag" value="11"> hexagon</label>
better markup would be
<label for="hexagon"><input type="checkbox" id="hexagon" name="ofpost_tag" value="11"> hexagon</label>
Date field markup
The date fields could be labelled “search from date” and “search to date” but are not. The best I could manage was a heading Date Range above the first field.
It would be better if the date fields were in a different line from the search box – this is fixable with CSS styling.
There are two ways of accessing the date fields: a dd/mm/yyyy box and a pop-up date picker.
Testing with VoiceOver, I was quite impressed that an unsighted user could access the dd/mm/yyyy elements of the date, though it might take some intuition to figure out what to input for each part. Whether it’s obvious that the dates can be stepped through I don’t know.
I didn’t test the date picker accessibility. WebAxe has a roundup of accessible date pickers.
User experience with search results
When the results are displayed, only they are shown – not the search form. To start a new search, the user has to use the Back button and refresh the page.
If no results are found, the user is directed to a “Nothing found” page with the single search box for the theme. They then have to use the back button to return to the Search and Filter form.
A workaround might be modifying the
search.php template file for the theme.
Other advanced search plugins
The other search plugins I used AJAX to generate results.
This means that when you’ve selected your search criteria the results appear immediately and dynamically. There’s no need to press a Submit button or load a new page,
Changing the search updates the results on the fly.
WP Ultimate Search
WP Ultimate Search allows search filtering by category or tag.
You cannot search custom post types, custom taxonomies or custom fields with this plugin.
The plugin has its own way of displaying results. As opposed to the theme results, featured images aren’t shown. I would argue that this is a good thing.
This filter by category Ocean and tag star shows the following 4 results.
Adding a second category to that search Forest generates 6 results. i.e. it’s finding posts in either Ocean or Forest as well as star.
Accessibility of WP Ultimate Search
Oh dear. 🙁
As a capable mouse user, I found it quite tricky.
When you click in the search area, category or tag pops up.
Choose one of those and a second later the listing of categories/tags pops up. You can only choose one category or tag at a time.
If you don’t click in time you’ll end up with something like this, which is not very usable and doesn’t yield any results.
The search bar and dropdowns are also quite small and it’s difficult to select items sometimes.
As a keyboard-only user, this is difficult to use at best!
As a screen reader user, it’s almost impossible to select something, know what it is you’re selecting and submit the search.
AJAX results are problematic, too – how does a blind user know when the search results have changed?
The one feature I like is the “Clear Search Terms” link. It might make more sense to have it at the top of the search results, though – not the bottom.
Filter Custom Fields and Taxonomies Light
Filter Custom Fields & Taxonomies Light is the basic version of the Filter Custom Fields & Taxonomies pro plugin.
I think you can guess what it does.
I tried creating a couple of filters for Products and Events. It’s not possible to choose more than one post type to search at one time.
The Events filter wouldn’t work for me, and I don’t know why.
I know that there are party events, but the plugin didn’t find them.
The product filter worked mostly as expected.
Useful features of Filter Custom Fields and Taxonomies Light
- Searching custom fields is certainly a cool feature. I could create a filter for price, for example. Of course, having a slider for this would look better than checkboxes or radio buttons, but that’s a premium feature.
- Filters can be set conditionally. I tried to do this with the Colour filter, only having it show when the Hoodies category was selected, but I couldn’t get it to work.
- You can customise the results shown and the “Nothing found” message, and display results in 1-4 columns.
- You can add your own custom CSS.
Accessibility of Filter Custom Fields and Taxonomies Light
All the controls are keyboard accessible.
The page reloads every time you select a new checkbox – this makes it quite slow at times.
There’s no reset search link or button.
Custom fields like price are jumbled up, not logically ordered. (The pro plugin offers a range slider.)
The form controls are marked up well with
<legend>. The legend text is quite small, but you could change that with CSS.
The dropdown controls begin with a blank option. I can see why, because at first, nothing should be selected and no results shown. Perhaps it would be better for it to say “Select one”.
I like the fact that the user is told how many results they’ve got out of the total e.g. “3 results out of 23 posts”. The word “posts” should be changeable for other post types, though – or just left out.
For screen reader users, the main problem is knowing when the results have changed. This is just about possible in VoiceOver if they navigate to the Headings menu – they may see some new or different product headings. But understanding when there were new search results would be extremely difficult without some ARIA support.
Conclusion – did I find an accessible advanced search plugin?
There are some innovative search solutions for WordPress out there.
Features I think are useful are:
- Let the user choose which post types to search
- Choose taxonomies and custom fields to search
- Reset the search query
- Allow users to choose how results are ordered – date or relevance
I couldn’t find a plugin that offered all of these, and the accessibility of those I tried was patchy.
Choosing the right accessible advanced search plugin is really down to the purpose of the site.
I think it’s important to understand who your users are, how they search and what they expect to find to implement the right solution.
What do you use for your WordPress search, and why? Let me know in the comments.