Greasemonkey Hacks

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.

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 class="g"> 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/ ...