WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: search result highlighting and accessibility

for

Number of posts in this thread: 5 (In chronological order)

From: Andrew Johns
Date: Wed, Apr 21 2010 9:48AM
Subject: search result highlighting and accessibility
No previous message | Next message →

Based on the requirement not to rely solely on colour when presenting
information, I wondered if anyone had any thoughts on how to mark up search
results and keywords or phrases using more than just colour.

For example, in an existing web application, if I search for "oranges",
after being presented with a list of search results, I click through to the
actual result itself, and every instance of the word "Oranges" on that page
is highlighted in colour.

My feeling is that this would be marked up semantically using strong or em,
perhaps with additional colour styling for visual users, and an
informational cue above the main body of the content itself, where it
informs the user that all instances of word are emphasized.

However I'm not sure this would really be of any benefit to screen readers,
as the intention of the colour styling is to draw focus for the user - how
would the user "jump" to the instances in question? or is this a case where
the screenreader or browser search feature should be relied upon instead -
and an accessible alternative is therefore not really needed?

I'd be interested to hear your thoughts,

Kind regards,

Andrew

From: J. B-Vincent
Date: Wed, Apr 21 2010 9:54AM
Subject: Re: search result highlighting and accessibility
← Previous message | Next message →

Andrew: Keep in mind that this requirement is also for people with colorblindness and some other types of low vision, which will be a larger group than screen reader users.

Jane Vincent, Center for Accessible Technology

--- On Wed, 4/21/10, Andrew Johns < = EMAIL ADDRESS REMOVED = > wrote:

From: Andrew Johns < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] search result highlighting and accessibility
To: = EMAIL ADDRESS REMOVED =
Date: Wednesday, April 21, 2010, 7:48 AM

Based on the requirement not to rely solely on colour when presenting
information, I wondered if anyone had any thoughts on how to mark up search
results and keywords or phrases using more than just colour.

For example, in an existing web application, if I search for "oranges",
after being presented with a list of search results, I click through to the
actual result itself, and every instance of the word "Oranges" on that page
is highlighted in colour.

My feeling is that this would be marked up semantically using strong or em,
perhaps with additional colour styling for visual users, and an
informational cue above the main body of the content itself, where it
informs the user that all instances of word are emphasized.

However I'm not sure this would really be of any benefit to screen readers,
as the intention of the colour styling is to draw focus for the user - how
would the user "jump" to the instances in question? or is this a case where
the screenreader or browser search feature should be relied upon instead -
and an accessible alternative is therefore not really needed?

I'd be interested to hear your thoughts,

Kind regards,

Andrew

From: Jared Smith
Date: Wed, Apr 21 2010 10:33AM
Subject: Re: search result highlighting and accessibility
← Previous message | Next message →

On Wed, Apr 21, 2010 at 8:48 AM, Andrew Johns < = EMAIL ADDRESS REMOVED = > wrote:
> Based on the requirement not to rely solely on colour when presenting
> information, I wondered if anyone had any thoughts on how to mark up search
> results and keywords or phrases using more than just colour.

This introduces some interesting and difficult questions.
Unfortunately there is not a <highlight> or similar element in HTML,
though screen readers still barely support <strong> and <em>, so it's
unlikely this would result in any better accessibility anyway.

Marking up the highlighted text with <strong> or <em> in addition to
the color background would provide *something* other than color alone
to identify the difference. This would mostly address the low vision
and color deficiency concerns. I think this is probably the best
option despite the poor screen reader support for these most basic of
semantic elements. (Yes, I understand that JAWS will read these
differently if you turn on a very obscure setting that hardly anybody
knows exists.)

Anything beyond this becomes more complex. You could inject hidden
text of "Begin highlight." and "End highlight." before and after each
instance, but the overhead of this is pretty significant. It could
easily be argued that this would make the content *LESS* accessible,
not more.

I suppose one could argue that the highlighting is for visual purposes
only. One could also justify that the presence of the word itself
("oranges") provides the non-color designator (i.e., if I search for
"oranges" I can still identify the instances of the word "oranges"
without seeing the color highlight). I can certainly see how this
might pass both 1.3.1 and 1.4.1 in WCAG 2.0, though I think this would
only apply to highlighting of words that the user would reasonably
expect to be highlighted. The "Find" feature of the user agent allows
someone that cannot discern the visual highlighting to find the
instances throughout the page. While these all seem to remove the
burden of presenting the highlighted information in some other way,
they still don't seem equivalent to me.

In short, I don't know if there is a perfect solution.

Jared

From: Patrick H. Lauke
Date: Wed, Apr 21 2010 10:48AM
Subject: Re: search result highlighting and accessibility
← Previous message | Next message →

On 21/04/2010 16:33, Jared Smith wrote:
> This introduces some interesting and difficult questions.
> Unfortunately there is not a<highlight> or similar element in HTML,
> though screen readers still barely support<strong> and<em>, so it's
> unlikely this would result in any better accessibility anyway.

To talk science fiction for a minute, there's the proposed <mark>
element in HTML5 http://html5doctor.com/draw-attention-with-mark/ but as
you say if SRs don't even support HTML4 stuff properly, it's a long way off.

--
Patrick H. Lauke

From: Simius Puer
Date: Wed, Apr 21 2010 11:18AM
Subject: Re: search result highlighting and accessibility
← Previous message | No next message

I would tend to agree that the purpose of the highlighting is to draw the
users attention to the given content - that is it's purpose.

I don't agree that marking these instances up with <strong> or <em> is
necessarily correct as it *could* potentially change the semantic meaning of
the text. However, achieving the same effect through CSS styling on an
inline element would be perfectly acceptable. Also, being exceptionally
colour-blind I can tell you highlighting works just fine as a visual
solution - we can "see" colour we can't necessarily tell you what it is -
but a word highlighted will still stand out enough (obviously check your
colour contrasts and do real-world testing!).

As for non-sighted users there is one solution I worked on a while back that
I really liked and so did many of the users we tested it on. It goes
something like this:

1. Inject a visually hidden section into the top of the search results
offering anchor links to the search terms
2. Inject anchors into the text intelligently - usually at the beginning
of the paragraph/sentence that included search term (and explain this in the
visually hidden section mentioned above) as jumping directly to the search
term is usually meaningless.

Some of the more savvy AT users tested simply used their preferred method to
"find on this page" but many of those not quite so adept found the solution
worked well.

Of course, this was done using an enterprise level CMS with an integrated
search engine so it might not be a solution that everyone could use. The
description here is also a little simplified as the full solution was quite
complex, but it covers the important aspects.

This also failed miserably if the search results included PDFs (or other
non-HTML format) as you would expect, but we were also in the process of
stamping those out and allowed them to be filtered from the search results
(as surprisingly popular filter as it turned out!).

I wonder if there is any search engine company out there who could deliver a
fully accessible search 3rd party solution that could do this? Anyone on
this list represent such a company? Anyone from Google, perhaps (and, yes,
I do know they regularly get slated for accessibility issues)??