A collection of tips, guidance and practical suggestions in developing accessible websites
The typical websites of today commonly have small forms in various locations on the page. These forms could be logins, subscribing to mailing lists, site search, blog comment form; they are ubiquitous because they tend to cover important use cases on a site.
It makes sense to inform screenreader users of these forms – particularly login and search, because they form an important part of getting things done on the site, or navigating to a personalised part of the site.
For that reason, preface all of these forms with a header. This allows screenreader users to use headers as a way of navigating all the elements in the page. Make the header text descriptive, for example “Login to your account”, or “Search this site”. It would be better to integrate these headings as part of the design, but they can be hidden by positioning it off-left if needed.
It’s more natural for this heading is placed before the start of the form, outside the opening form tag. That way a screenreader user can find the relevant header in heading navigation mode, and when they switch back to the normal page navigation mode the first thing immediately after the header is the form.
Ensure that the heading level makes sense in the document structure, and don’t skip a heading level. Use an h2 header for forms that appear before the h1 header; there ideally should be only one h1 header per page.
That’s the first time I’ve heard the suggestion to have an h2 before an h1 — I’d always assumed such a thing would count as skipping a level. In fact, to be honest, I’m still not sure that it doesn’t.
I have, however, heard the recommendation to only have a singe h1 per page before, but I’ve never seen a really compelling rationale for it, other than the notion that a hierarchy only has a single root.
Let’s say you had a blog post, and had marked up the title of the post in an h1. Let’s further say that you had a footer listing other posts on the site, in categories, or by popularity, or whatever. The footer has a heading “Other posts on this site”.
On the one hand, you could mark up that heading as an h2, since you’ve already used an h1 on the page. On the other, it’s not exactly a subheading of the main topic of the page, more an adjunct to it, so it seems (on the face of it) meaningful to use another h1 instead.
I’m genuinely unsure which side of that fence I’m on.
Cheers Andrew.
xcuse me, but isn’t the legend element used for *exactly* this purpose?
According to the html4.01 spec: “The LEGEND element allows authors to assign a caption to a FIELDSET. The legend improves accessibility when the FIELDSET is rendered non-visually.”
Kilian asks: “Excuse me, but isn’t the legend element used for *exactly* this purpose?”
No. Fieldset legends are not read out while the screen reader user is scanning the page in headers navigation mode.
The fieldset legend comes into play when the user is in forms mode, and gets prefixed in-front of every field within the fieldset.
Adept screenreader users can usualy skip from heading to heading (if headings are used on the page), or go from link to link. Yet it is still a very linear way to look at the content.