Hack 72. Use Real Headers on Google Web Search

Make Google's markup more semantic, and learn why it matters.

Google does an excellent job of indexing the Web, but it does a poor job of displaying the results. By poor, I mean not semantic. Why does semantic markup matter? Well, among other things, it enables hacks such as "Add a Table of Contents to Long Pages" [Hack #71] to extract meaningful information from the page.

It is also an accessibility issue. Screen readers for the blind have features that allow users to navigate a page by its header elements. Sighted users can simply glance at the page on screen and see how it's structured; screen readers can only "glance" at the page's markup. If a page uses poor markup, screen readers have a more difficult time determining how the page is structured, which makes it more difficult for blind users to navigate.

This hack changes Google search result pages to use reader header elements for each search result.

8.7.1. The Code

This user script runs on Google web search result pages. It uses hardcoded knowledge of Google's markup each search result is wrapped in a <p > element to wrap a real <h2> tag around the title of each result. It also adds an <h1>Search Results</h1> element at the top of the page. This <h1> is hidden from sighted users, but screen readers will still "see" it in the DOM and announce it to blind users.

Save the following user script as googleheaders.user.js:

 // ==UserScript== // @name Google Headings // @namespace   http://zeus.jesus.cam.ac.uk/~jg307/mozilla/userscripts/ // @description Add real heading elements to google search results // @include http://google.tld/search* // @include http://www.google.tld/search* // ==/UserScript== // based on code by James Graham // and included here with his gracious permission var mainHeading = document.createElement('h1'); var headingText = document.createTextNode('Search Results'); mainHeading.appendChild(headingText); mainHeading.style.visibility="Hidden"; mainHeading.style.height="0"; mainHeading.style.width="0"; var body = document.getElementsByTagName('body')[0]; body.insertBefore(mainHeading, body.firstChild); var resultsParagraphs = document.evaluate("//p[@class='g']", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); if (resultsParagraphs.snapshotLength) { var heading = resultsParagraphs.snapshotItem(0); var headingSize = document.defaultView.getComputedStyle( heading, '').getPropertyValue("font-size"); var headingWeight = document.defaultView.getComputedStyle( heading, '').getPropertyValue("font-weight"); } for (var i = 0; i < resultsParagraphs.snapshotLength; i++) { var paragraphNode = resultsParagraphs.snapshotItem(i); var linkNode = paragraphNode.getElementsByTagName('a')[0]; var heading = document.createElement('h2'); heading.appendChild(linkNode.cloneNode(true)); heading.style.fontSize = headingSize; heading.style.fontWeight = headingWeight; heading.style.marginBottom = 0; heading.style.marginTop = 0; paragraphNode.replaceChild(heading, linkNode); try { paragraphNode.removeChild( paragraphNode.getElementsByTagName('br')[0]); } catch(error) { } } 

8.7.2. Running the Hack

After installing the user script (Tools Install This User Script), go to http://www.google.com and search for accessibility. The script does not appear to have made any difference, as shown in Figure 8-7.

Figure 8-7. Real headers?

This is because the script goes to great length to style the new <h2> elements so they look similar to the page's default text style. However, if you install autotoc.user.js [Hack #71], the difference becomes obvious, as shown in Figure 8-8.

Because the page now uses properly structured markup, the autotoc.user.js script can construct a table of contents for the page. This is essentially what screen readers do for blind users, by looking for real header elements and allowing the user to jump to the next or previous header.

Figure 8-8. Real headers!