E-mail List Archives
Thread: semantic HTML for intro text
Number of posts in this thread: 3 (In chronological order)
From: Paul Collins
Date: Fri, May 25 2007 12:20PM
Subject: semantic HTML for intro text
No previous message | Next message →
Hi all,
Just marking up a page, the layout seems to require various tags, as
far as I can gather, I need seperate tags for:
- The intro heading (a <H2>)
- The orange intro text (not sure what tag to add here)
- a smaller, bold heading, same size as body text (probably a <h3>)
- a quote (probably a <blockquote> tag)
My question is, what would be the best semantic tags to use here, that
will be picked up by assistive technology and validate for XHTML 1.0
Transitional. In particular, I want to know about the Orange intro
text and the quote.
Any suggestions would be great, I have posted a JPEG here:
http://www.method.com.au/storage/sampleText.gif
Cheers
Paul
From: Moore, Michael
Date: Fri, May 25 2007 1:10PM
Subject: Re: semantic HTML for intro text
← Previous message | Next message →
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Paul Collins
Sent: Friday, May 25, 2007 1:14 PM
To: WebAIM Discussion List
Subject: [WebAIM] semantic HTML for intro text
Hi all,
Just marking up a page, the layout seems to require various tags, as far
as I can gather, I need seperate tags for:
- The intro heading (a <H2>)
- The orange intro text (not sure what tag to add here)
- a smaller, bold heading, same size as body text (probably a <h3>)
- a quote (probably a <blockquote> tag)
My question is, what would be the best semantic tags to use here, that
will be picked up by assistive technology and validate for XHTML 1.0
Transitional. In particular, I want to know about the Orange intro text
and the quote.
Any suggestions would be great, I have posted a JPEG here:
http://www.method.com.au/storage/sampleText.gif
Cheers
Paul
Paul,
I would do the following:
The heading at the top of the page <h1> - this is the main heading of
the page
The orange intro text, <p class="intro"> give it a style (this won't
mean anything to screen readers but I don't think that it is important
to understanding the content, it is just meant to visually draw
attention to the introduction, the <h1> does that effectively for the
screen reader user since this is the content that comes immediately
after it.
The smaller heading <h2> - this is a subheading
The quote <blockquote>
Mike
From: Jukka K. Korpela
Date: Fri, May 25 2007 2:20PM
Subject: Re: semantic HTML for intro text
← Previous message | No next message
On Fri, 25 May 2007, Moore, Michael wrote:
> The heading at the top of the page <h1> - this is the main heading of
> the page
That much is rather obvious, especially since the text there is "This is
example heading?" The rest is Latin and obviously not any real context, so
how can we deduce the intended structure?
> The orange intro text, <p class="intro"> give it a style
Is it intro or summary? The question called it intro, but why is it
visually so prominent? Neither intros nor summaries have any suitable
semantic markup, so using just classes and styling seems obvious. But the
visual appearance - which is relevant to accessibility, too, since
accessibility has many aspects - should reflect the intended role. If it
is just an introduction, it should not be particular prominent.
If it is really a summary, one might consider using a parahgraph with
its content wrapped inside strong markup:
<p class="summary"><strong>summary text</strong></p>
You might then use CSS to highlight in some particular manner, probably
turning off the default bolding, since bold text is hard to read in large
quantities. Yet some browsers might _read_ the text emphatically due to
the <strong> markup. However, this approach is probably too contrived in
most cases. If the reading mode is really different for <strong> elements,
then it might be too emphatic. Who want's to listen an entire paragraph
spoken emphatically?
> The smaller heading <h2> - this is a subheading
Rather, second-level heading. Perhaps it is.
> The quote <blockquote>
That would be logical markup, but is it accessible? Normally quotation
marks should be omitted when using a blockquote, and browsers shouldn't
add quotation marks either, and they don't. We could add them in a style
sheet, but can we rely on that?
My point is that the common way of presenting block quotations as
indented, and possibly in a different font, does not work in non-visual
presentation. Unless a browser somehow recognizes the <blockquote> markup
or the indentation when deciding on the speech mode, the block quotation
will be read (or rendered in Braille) as normal text - with no indication
of its being a quotation, or where the quotation ends. The user might be
able to figure such things out from the context, but really obscure
situations may arise.
Quotation marks, on the other hand, might be expected to act as hints to
programs in many cases. So maybe we should use them for block quotations,
too, against recommendations and typographic practice? I don't like the
conclusion, but what can we do?
I have no idea of why the quoted text appears in bold. If it is meant to
emphasize the quote, I think using CSS for that is sufficient, since there
is hardly any suitable way to emphasize it non-visually.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/