Hi,
I have a few questions about the search extension with regards to accessibility. I have seen a couple of previous posts that explain some of these issues, but was hoping you’d be able to confirm if these are still limitations, or if there is a workaround:
- Search results do not have a visible focus indicator. It seems like the only time search results have a visible focus indicator (that is also clickable) is if a word directly matches an article title. You can then navigate to that article. Is there a way to make all results have a visible focus indicator?
- Search results do not have link text. Is there a way to associate all of the search result text snippets with links to navigate to a specific point in the course?
- Highlighted text is not conveyed by screen readers. It has been recommended to us to use the HTML mark element instead of the custom CSS. Is there another way to get the same result?
- The “clear input button” (“x” in the search bar) is not accessible. Is there an aria label field for this? Or how can I remove this button?
Thank you so much!
Hi @Melissa - before I respond to points 1 & 2 - can I check that this isn’t a course you published some time ago?
The Search extension wasn’t made accessible until November 2024 - so if you’re doing accessibility tests again a course published prior to that date it will definitely have accessibility issues.
As regards to point 4 - the search input field ‘clear’ button is actually something that some browsers* add for any <input> elements that have their type set to 'search' - so if it’s not accessible there’s unfortunately not a lot I can do about that.
I notice that someone’s already logged a bug about this issue for Chrome - they’ve responded saying it’s not an accessibility violation because there are multiple other ways to clear the input content.
* Chrome, Edge & Safari (desktop but not iOS)
1 Like
This is an interesting suggestion. Unfortunately, as the MDN article for the <mark> element states:
The presence of the mark element is not announced by most screen reading technology in its default configuration.
The suggested workaround in the article is interesting but unfortunately would involve putting content into CSS - which means it would very challenging to ensure that it gets translated when creating a course in a language other than English - and that’s not even taking into account localising into bidirectional languages.
1 Like
Thanks @Matt_Leathes - To answer your question, this is happening in older courses, but also courses published in March 2025.
Thanks for that explanation re. points 3 and 4!
@Melissa regarding points 1 & 2 - could you provide some more detail/screenshots just so I’m sure of what you’re referring to?
Yes sure, thanks @Matt_Leathes . I’ve taken screenshots from an older course (first image) and a newer course (second image). When I type in a search term, results populate in these little “snippets” (the grey boxes). If I tab through, it moves me down the list, but there is no focus outline on the grey boxes. The only time a focus outline appears is when there is an article or page title, which also has a link that one can click. If navigating just with a keyboard, one can tab through the search results and click enter, and it will navigate you to the correct section. But there is no visible focus to tell you which snippet you’re on. And there is no way to click the “unlinked” snippets with a mouse.
Here is what our auditors said, which may be helpful:
- “When users submit a search term in the search dialog, results appear below and then they are able to select one and move to that point in the course. However none of the text snippets have visible focus indicators. Ensure that the snippets have visible focus indicators.”
- “The search results are coded as plain text spans with an empty link above each span in the code. This will confuse screen reader users. Associate the search result text snippets with the links via the aria-labelledby attribute.”
Hi @Melissa thanks for that - would you mind DMing me a link to the course in question so I can check the exact settings you have enabled for the Search extension? I’ve not seen Search present results that don’t actually link to anything before so I’m curious to see where they are coming from!
1 Like
OK, I think I’ve figured out what the issue is there - the search result items with no (visible) link are pointing to component that have no ‘Display Title’ set. If you don’t want the component to have a Display Title, you can workaround this issue by enabling the Search Extension setting Search Results > Use Title Fallback:
Then, in the component, set a title here:
And that then will be used as the ‘link title’ in the search results
1 Like
Ah amazing, thank you so much! 
