WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Headers

for

From: Jared Smith
Date: Jan 14, 2011 2:33PM

On Fri, Jan 14, 2011 at 2:01 PM, Heather Parker < <EMAIL REMOVED> > wrote:
> I know this is probably a remedial question for most of you, but it is where I am.

You're certainly not alone. We very much welcome basic questions, so
long as users check the search first to ensure it hasn't been asked
and answered many times before.

> From reading on the web, I understand that web editors should be using <Hn></Hn> in our html for the screen readers.  In my particular case, our styles uses classes like "pageMainAreaHeader".  Does a screen reader recognize that as a Header? Or should the <Hn></Hn> be used?

No, class names do not affect screen reader functionality. They
provide a mechanism for visual styling only. The <hn> markup must be
used to designate content as a header.

> I also read that Hn can be styled so that the default isn't used.  Has anyone done that?  What does the entry in the style sheet look like for <H1>?

In CSS, you'll probably exchange your
.pageMainAreaHeader {...}
styles with
<h1> {...}

Or you could just change your HTML to
<h1 class="pageMainAreaHeader">
and then modify the
.pageMainAreaHeader {...}
styles to get the appearance you want.

Any CSS tutorial will help you get started with applying styles to
these structural elements. Hopefully this helps.

Jared Smith
WebAIM