E-mail List Archives
Thread: Headers
Number of posts in this thread: 8 (In chronological order)
From: Heather Parker
Date: Fri, Jan 14 2011 2:03PM
Subject: Headers
No previous message | Next message →
I know this is probably a remedial question for most of you, but it is where I am.
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?
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>?
Thanks,
Heather Parker
From: Jared Smith
Date: Fri, Jan 14 2011 2:33PM
Subject: Re: Headers
← Previous message | Next message →
On Fri, Jan 14, 2011 at 2:01 PM, Heather Parker < = EMAIL ADDRESS 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
From: Heather Parker
Date: Fri, Jan 14 2011 2:51PM
Subject: Re: Headers
← Previous message | Next message →
<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 ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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 ADDRESS 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
From: Jukka K. Korpela
Date: Fri, Jan 14 2011 3:15PM
Subject: Re: Headers
← Previous message | Next message →
Heather Parker wrote:
> <h1 class="pageMainAreaHeader"> is what I ended up using instead of
> <span class="pageMainAreaHeader">, but I'm getting an extra line
> under the header.
If you switch from, say, <span> to <h1>, which is a good move for the 1st
level heading, then you need to take into account that elements like <h1>
have default formatting. For example, to remove the default bottom margin
for <h1>, looking like an empty line, you can use
h1 { margin-bottom: 0; }
in your CSS code.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
From: Heather Parker
Date: Fri, Jan 14 2011 3:36PM
Subject: Re: Headers
← Previous message | Next message →
Perfect. I just appended it onto the end.
.pageMainAreaHeader { color: #0132A7; font-size: 110%; font-weight: bolder; text-align: left; margin-bottom: 0; }
I assume that pageMainAreaSubHeader will be <h2>?
In learning html, I sort of jumped right over the Hn's. I went from doing things like <center><b>title</b></center> to working webpages with style sheets.
Heather
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jukka K. Korpela
Sent: Friday, January 14, 2011 2:04 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Headers
Heather Parker wrote:
> <h1 class="pageMainAreaHeader"> is what I ended up using instead of
> <span class="pageMainAreaHeader">, but I'm getting an extra line
> under the header.
If you switch from, say, <span> to <h1>, which is a good move for the 1st
level heading, then you need to take into account that elements like <h1>
have default formatting. For example, to remove the default bottom margin
for <h1>, looking like an empty line, you can use
h1 { margin-bottom: 0; }
in your CSS code.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
From: Cliff Tyllick
Date: Fri, Jan 14 2011 4:00PM
Subject: Re: Headers
← Previous message | Next message →
To answer your question about <h2>, yes, the h2 is whatever you call the next heading level below the h1.
As the number goes up, the importance of the heading goes down. Think of it as corresponding to the position of the topic in an outline:
h1 is in the first position, with no indent
h2 is in the second position, with one indent
h3 is in the third position, with two indents
So the number in the heading level is 1 plus the number of indents (or demotions, if you will) for that heading in an outline of your document.
And the neat thing about your classes is that if for any reason you need your series of headings to look different on one page, or different in one set of pages (if you have help pages, maybe you want them to have their own look), you can just add a new class to your stylesheet:
.bluepageMainAreaHeader { color: #0047A4; font-size: 125%; text-align: center; margin-bottom: 20; }
And the code for the main heading on those web pages would be <h1 class="bluepageMainAreaHeader">
You're on the right track. Good luck!
Cliff
Cliff Tyllick
Usability assessment coordinator
Agency Communications Division
Texas Commission on Environmental Quality
512-239-4516
= EMAIL ADDRESS REMOVED =
>>> On 1/14/2011 at 4:31 PM, in message < = EMAIL ADDRESS REMOVED = >, Heather Parker < = EMAIL ADDRESS REMOVED = > wrote:
Perfect. I just appended it onto the end.
.pageMainAreaHeader { color: #0132A7; font-size: 110%; font-weight: bolder; text-align: left; margin-bottom: 0; }
I assume that pageMainAreaSubHeader will be <h2>?
In learning html, I sort of jumped right over the Hn's. I went from doing things like <center><b>title</b></center> to working webpages with style sheets.
Heather
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jukka K. Korpela
Sent: Friday, January 14, 2011 2:04 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Headers
Heather Parker wrote:
> <h1 class="pageMainAreaHeader"> is what I ended up using instead of
> <span class="pageMainAreaHeader">, but I'm getting an extra line
> under the header.
If you switch from, say, <span> to <h1>, which is a good move for the 1st
level heading, then you need to take into account that elements like <h1>
have default formatting. For example, to remove the default bottom margin
for <h1>, looking like an empty line, you can use
h1 { margin-bottom: 0; }
in your CSS code.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
From: Bevi Chagnon | PubCom
Date: Fri, Jan 14 2011 4:36PM
Subject: Re: Headers
← Previous message | Next message →
Heather wrote:
"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? "
I'm confused by this conversation and I'm wondering if there were some typos
in the posts.
Heather, you used the class "pageMainAreaHeader".
Did you mean this to be a heading? Headings (with "I n g") and headers (with
"e r") are very different elements.
The easiest example I can give is this one:
Headers and footers appear at the top and bottom of a page (a printed page,
MS Word page, webpage, etc.). In print publications they usually contain the
page number.
Headings on the other hand are your headlines, subheads, etc. that delineate
the different sections of your body text.
In websites and accessible documents we start with <h1> for the primary
heading of the document/webpage, and continue with <h2> for the following
subhead.
I'm assuming that when you state <hn> you mean a heading tag with an "n"
variable, right? Because I'm not aware of any <hn> tag in HTML.
As was stated, your "pageMainAreaHeader" should be turned into <h1> and
styled in your .CSS file to render as you wish.
And all of your "pageMainAreaSubHeader" should become <h2> headings, also
styled in your .CSS file.
If you happen to have a sub-subheader, then that will become <h3>.
--Bevi Chagnon
: : : : : : : : : : : : : : : : : : :
: : : : : : : : : : : : :
Bevi Chagnon | PubCom | = EMAIL ADDRESS REMOVED = | 301-585-8805
Government publishing specialists, trainers, consultants | print, press,
web, Acrobat PDF & 508
Online blog: www.pubcom.com/newsletter
From: Heather Parker
Date: Tue, Jan 18 2011 5:12PM
Subject: Re: Headers
← Previous message | No next message
"pageMainAreaHeader" is the style used to designate the headings on each page instead of using the <h1>. We used templates or a sample set to create our current website. Most of the styles came with the sample set and I have only created a few new ones.
<h1>, <h2>, etc. do not appear anywhere on our website and I now am working on modifying all the instances of "pageMainAreaHeader". We also have tables that are used for layout. Our sample set is about 6 years old. I used it in 2008. I've heard that the pages in general seem to work ok with a screen reader and headings would be nice.
Heather Parker
Electronic Resource Coordinator
Alliant International University