I’ll write a bit more about my thoughts on the document, unofficially, over the weekend. The document is meant to evolve, so it is something to come back to when you’re in need of a reference point. There’ll even be more graphics, too!

Transcript

Welcome to the first installment of Ask GovLoop. My name is Adam Harvey. I’m a web designer in Cleveland, OH. I’m going to talk about design, if you’ve got a minute.

When I think about design in a broad sense, I think about how well something works and how intuitive it is to use. Aesthetics comes in second to usability. Yet for me, the opposite holds true with websites. The first thing I pay attention to is how pretty the site is, and I think about its usability only after that first impression.

Yet web design isn’t just about how pretty a site looks; the effectiveness of its layout and usefulness of its content are equally important. All three of these pieces are necessary for a top-notch website.

So when you visit a site, or look at your own, ask yourself:

1. Is the site aesthetically pleasing?
2. Is the layout intuitive?
3. Is the content useful?

and you’ll get a better idea of what separates good design from bad. Thanks for listening!

This hide-and-seek is something I’ve noticed across a lot of sites with accessibility statements. These statements are by no means ubiquitous, so even if I’m trained to look for one I’m probably going to stop looking altogether after going to the hundredth site that doesn’t have one. Thankfully, the solution is one that is blindingly obvious once you think of it, and quite easy to implement.

If you look at Mark Pilgrim‘s great accessibility resource, Dive Into Accessibility, with the stylesheet turned off, you’ll see a link near the top that says “Skip to Navigation.” This link is hidden by the CSS, so folks with regular browsers won’t see it. This navigation aid is supposed to make the site easier to use for the kind of people who need more accessible websites. So if you’re on a site that has an accessibility statement, you’re probably also on a site that has a hidden “Skip to” link or two. The markup is usually some variation of this:

<h1 class="title">
<a href="/" accesskey="1">Dive Into Accessibility</a>
</h1>
<p>30 days to a more accessible web site</p>
<a class="skip" href="#startnavigation">Skip to navigation</a>

and the CSS to hide it from view:

.divider, .invisibletitle, a.skip {
display: none;
}

Update: Based on the post Hiding with CSS: Problems and Solutions from Roger Johansson, it turns out using display: none; will hide elements even from screen readers. The alternative is to use the off-left CSS hack:


.divider, .invisibletitle, a.skip {
position:absolute;
left:-9999px;
}

which is definitely hacky, but gets the job done, without breaking anything.

If you try to find the accessibility statement, and you’re looking at the page without the benefit of layout from the stylesheet, the link to it is way down at the bottom in the site links, after all of the content and the navigation. There’s already a link up top to assist in jumping past the content to the navigation, so why not use that hidden space to invite the user to read the accessibility statement first thing? Here’s the additional markup:

<h1 class="title">
<a href="/" accesskey="1">Dive Into Accessibility</a>
</h1>
<p>30 days to a more accessible web site</p>
<a class="skip" title="Accessibility features of this site" href="/accessibility_statement.html">Please take a moment to review the accessibility features of this site.</a>
<a class="skip" href="#startnavigation">Skip to navigation</a>

Voilà, the user gets an immediate prompt that you’ve taken the time to make the site easier for them to use. Now I’ve just got to go back and put this in to all of the old sites I’ve worked on.