Are There Accessible Advanced Search Plugins For WordPress?

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 theme and 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 files they provided.
• 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

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.

Without Relevanssi

With Relevanssi

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.

For example:

• 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

Search and Filter plugin allows you to build custom search forms using WordPress shortcodes.

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).

1. The results given are not posts, but Events. This is because I didn’t specify a post type, so all of them were searched.
2. 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 built-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?

• searchandfilter enables 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 <fieldset> and <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.

Instead of

<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 (note: not updated since August 2015) 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 (note: not updated since April 2015) 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 <fieldset> and <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.

Category: Accessibility, WordPress Tags: filter, search