Clickable Tiles Example

The good code more or less lifted wholecloth from this pen from Adrian Roselli.

Tiles can be made click targets through a number of approaches — make the thing a big link, make the thing a clickable area, or (best?) use CSS to increase the size of the click target. These approaches are used below for testing.

The link wrapper makes for confusing and inaccurate link text. The JavaScript approach lacks semantics and an appropriate mouse cursor and is not tabble without a tabindex attribute. The CSS approach seems to be the cleanest and has the best semantics.

Heading One

Whole article is a big link. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic eum fuga, animi provident voluptas temporibus molestiae explicabo officiis odio repellendus.

Heading Two

Whole article is a big link. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic eum fuga, animi provident voluptas temporibus molestiae explicabo officiis odio repellendus.

Heading Three

A JavaScript click target on the whole article. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic eum fuga, animi provident voluptas temporibus molestiae explicabo officiis odio repellendus.

Heading Four

A JavaScript click target on the whole article. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic eum fuga, animi provident voluptas temporibus molestiae explicabo officiis odio repellendus.

Heading Five

CSS enlarged click target. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic eum fuga, animi provident voluptas temporibus molestiae explicabo officiis odio repellendus.

Heading Six

CSS enlarged click target. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic eum fuga, animi provident voluptas temporibus molestiae explicabo officiis odio repellendus.

Clickable Table Row, Same Concept

Setting the right dimension manually. In practice, you could do this via JavaScript.

Table with interactive clickable rows
Header One Header Two Header Three Header Four
Microsoft row two, col one data row two, col two data row two, col three data row two, col four
Google row three, col one data row three, col two data row three, col three data row three, col four
link to nowwhere for bottom spacing