Landmarks

Matthew Tylee Atkinson @matatk

Use the arrow keys to move between slides and F for full-screen.

What's on the page? How can I get there?

Headings

The EROS OS home page

Tab

Screen-reader dialog lising headings on the EROS OS home page

Sites evolved

The Paciello Group home page
Wikipedia article called 'Color blindness'
FIXME
FIXME
FIXME
FIXME
Google Wave communications web-app

Skip links

FIXME
FIXME
FIXME

Skip links are awesome

Easily discoverable

Avoid repeated content

Save your visitors' time

But…

Only at the top (where the author put them)

Only a partial overview

Not quite so useful in app-like settings

Landmark regions

Signposts to broad areas of the page

Non-visual complement to visual design

Random access

Part of the W3C's Accessible Rich Internet Application (ARIA) standards

The Paciello Group home page with visually-apparent page areas (navigation, main bit, contact details and other stuff) called out in speech bubbles
Landmark regions reported by a screen-reader on The Paciello Group home page

How do I provide landmarks?

Search box

Search box

Main content

Main content

FIXME
HTML 5

* actually there can be more than one,
if the others are hidden.

Main content

is the same, semantically, as

Footer

could become

or

HTML5 Automagicalness

ElementLandmark region role
<header>banner1
<nav>navigation
<main>main
<section>region2
<form>form2
<aside>complementary
<footer>contentinfo1
  1. if page-global
  2. if labelled

Labelling landmarks

isn't a landmark, but this is:

Golden Rules

Landmarks: overview

Headings: fine-grained navigation

FIXME
FIXME

Use relatively few landmarks…

…but cover all of the content on the page.

If you've got more than one of the same type of landmark on a page, use labels to differentiate them.

But, better…

There's no need to include the type of landmark in its label.

Screen-readers may say

"Site, navigation"

Screen-readers may say

"Site Navigation, navigation"
A piano keyboard
A mouse (cute rodent)

Landmarks extension demo

Examples

Resources

Thanks to…

Image acknowledgements

Thanks for listening

Any questions?

Errata

I mentioned at the London Accessibility Meet-up that Dragon supported landmark roles, however it may not (to be confirmed shortly)—oops! It does now support aria-labelledby and ARIA roles for form controls.

How much do you shrink?

The BBC Sport article referenced earlier mentioned this: the average runner shrinks 1.25cm during a marathon, due to spine compression. We all get shorter throughout the day, too, but the amount varies.