Make admin search results accessible with role="status"

General Discussion
1

This is not a petition, yet. I want to see what others think, I might be wrong.

Accessibility has been on my mind lately and I was doing some tests for a PR when I noticed that while performing a search in the media library, there’s no way for screen readers to see what has happened. There’s no “notification” basically. At least none that I can find.

One of the recommendations in such cases is to use role=“status”.

<div role="status">5 results returned.</div>

Right now, when you search for media on the main media library page (upload.php), there appears a small subheadline:

image
image722×196 11.3 KB

I think we could repurpose this subheadline into something a bit more useful and accessible:

image
image830×176 11.7 KB

It would look like this under the hood:

<span class="subtitle" role="status">Search results for "mom" - 5 items found</span>

The modal popup to insert media on the edit page doesn’t have this subheadline at all. So we would need to add something like this to the modal popup. I think initially, this could be implemented on the upload.php page and later on the media popup.

Looking over other searches in admin - theme, plugin, user, post/page, comments, etc. - none of them use role="status" to tell screen readers what the search results are.

I believe content searches like posts, media, pages, comments, etc. use the same search functions and the same subheadline. So fixing one might fix it for all the other ones. Theme and plugin searches are different, will need a different approach.

Site note, maybe this could also be added to the frontend search results page.

Am I wrong? Would appreciate your feedback.

1 Like
2

The only concern that comes to mind here is the string length. It would be worth checking in a language like German (usually has longer text) and at small screen widths. I’m sure that can be solved reasonably though, and this seems like a good minor improvement (wouldn’t need a petition unless you want to make one before making the PR).

3

Thanks. I did some testing and a bit more research. role="status" is similar to <div aria-live="polite">, which doesn’t interrupt current item being read. Reading up on this, the suggested role for search results is role=“alert” which is similar to <div aria-live="assertive" aria-atomic="true">. This interrupts the screen reader and it’s read immediately, which is what the user would expect when hitting the search button.

I did a test using Chrome Vox, and it does make more sense with “alert” role.

Using Chrome Vox, I realized how much a user relying on it is missing out on the visual cues we’re used to. For example, when I published/updated a post we see message alert "Post updated. View post ". But there is no such cue available to the screen reader.

What do you think about adding role="alert" to these update messages?

Here’s a 30-second demo video with a screen reader audio. First I update a post without role="alert" set, then I update a post with role="alert" is set. It sounds much nicer with the audio feedback, which we see as an update.

These are relatively easy changes for the most part.

However, there are some that might require a bit more work. For example, I noticed on the media library page that subtitle “search results for” will only show up if the page uses a list view. In the grid view, that subtitle doesn’t show up. Another example is adding some sort of search results text to the media popup when inserting a file into an editor. These could be tackled later since they add new features.

4

Tagging @MarcoZ for comments on this.

1 Like
5

Just checked my own live search plugin (which I built for the front-end), and I used role="status" for when it retrieves results and role="alert" for when it gets no hits. Maybe I need to revisit that, but I’m not sure.