At one of my clients, we were looking at improving the accessibility of their intranet for sight impaired users. This was my first opportunity to work with someone that uses a text-to-speech and Braille reader as their only way of browsing a site. If you pardon the pun, this was eye-opening. It's fine to think about accessibility based on reading whitepapers or blog posts, it's quite another matter to watch a sight impaired user navigate through an intranet and try to make sense of it. One thing that we quickly learnt is that any content that describes the location of an item purely based on visual indicators is not enough (e.g. "just click on the blue button")
One area that we were able to improve quickly was in the search results. Our accessibility reviewer mentioned that it would be easier to jump between each search result if they were wrapped up in H3 tags. No problem – we had this implemented that afternoon. This required modifying a property in the Search Results web part:
- Perform a search within your MOSS intranet so that you can get to the search results page
- Within Search Results, select Site Actions – Edit Page. This will allow you to make changes to the web parts on the search results page
- On the Search Core Results web part, select Edit – Modify Shared Web Part
- Within the web part properties click on the XSL Editor... button under the Data View Properties section
This is the XML transformation code that is applied to our search results. It allows us to control exactly how they are formatted.
The section that you want to change begins with <xsl:template match="Result">. This controls the HTML written out for each search result. You need to put a <H3> tag immediately before the <span class="srch-Icon"> element and the closing </H3> tag immediately after the closing </span> tag for <span class="srch-Title">
You probably will also want to adjust the formatting of these H3 elements, as by default, they are rather large, and there is too much spacing between the search result title and the other details. The easiest way to do this is to apply an inline style to your H3 element. This is what mine looks like:
<H3 style="margin-bottom:0px; font-size:100%;">
Once you have completed your changes, don't forget to publish the updated page.
You can download a copy of my modified Data View XSL Property from here
