WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Headers

for

From: Heather Parker
Date: Jan 14, 2011 2:51PM

<h1 class="pageMainAreaHeader"> is what I ended up using instead of <span class="pageMainAreaHeader">, but I'm getting an extra line under the header. I'll have to see if I can change that or else my formatting will be off.

Thank you,

Heather

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Jared Smith
Sent: Friday, January 14, 2011 1:27 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Headers

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