WAI-friendly HTML, etc.

@idiotstringJun 03.2003

Hi!

I’m in charge of the Website that the company I work for has, and I’m trying to transform a Word document into a WAI-friendly html file. The whole WAI thing is highly confusing to me as I’m still a beginner. So I’m hoping some of you could help me out with the following:

**Are <b> and <i> tags okay to use in the HTML? I remember vaguely reading that they should be avoided, but I can’t remember why that was or where I read that.

**I’m using a CSS style sheet to format the headings, text, etc. However, this “locks” the text into that size. I can’t change the font size from IE’s Show menu. Also what’s the best way of stating the font size? I’ve been using “pt”, but I wonder if there isn’t a better way of going about it, possibly a way that will unlock the text size.

**The site I’m working on already has a “style sheet”, one that I feel needs to be improved. Unfortunately I don’t understand much of what is in the original style sheet. The way I’ve been formatting headings is by using <h1>, <h2>, and the like. The way they have done it before is by using codes that seem to be unique to this site. For example instead of <h1>, they use <wrtbread1>. WRT are the initials of the company. Does anyone know why they might have done it like that? Should I just try to change their style sheet to suit what I’d like the pages to look like, or is it okay to just have another style sheet for the pages I’m working on?

**The document I’m trying to convert into HTML contains several tables. Should I code them th id=”t1″ or th id=”header1″, or does it matter which of the two I use.

Thanks! ?

to post a comment

Full-stack Developer

9 Comments(s) _↴

@AdamGundryJun 03.2003 — #From my (admittedly limited) experience of the WCAG and WAI, I'd say:

1. Use [URL=http://www.w3.org/TR/html401/struct/text.html#edef-STRONG]<strong>[/URL] instead of <b> and [URL=http://www.w3.org/TR/html401/struct/text.html#edef-EM]<em>[/URL] instead of <i> (em stands for emphasis).

2. It's probably best to use absolute size values - such as "large", "medium" etc, or use em units. See here for more information: http://www.w3.org/TR/CSS2/fonts.html#propdef-font-size

3. Use <h1>, <h2> etc for headings.

4. It doesn't matter what the ID is, it is only a reference for you.

Adam

@CharlesJun 03.2003 — #[font=georgia]I do this about once a week and I've learned to start by running it through HTML Tidy. Word documents saved as HTML have a good bit of junk in them. They will also be saved in Microsoft's own special little encoding. Tidy will clean out the nonsense and font tags and you can use it standardize the encoding. You can find the stand alone version at http://www.w3.org/People/Raggett/tidy/. The free editor HTML-Kit has Tidy built in and HTML-Kit is what I use. It can be found at http://www.chami.com/html-kit/.

There's an idea behind the WAI guidelines that isn't so well explained in the documents but that is essential to accessibility. It is what is meant by "Guideline 3. Use markup and style sheets and do so properly" and "Guideline 9. Design for device-independence." It's known as the separation of content from presentation. You use HTML to describe the meaning and structure of the content and style sheets to control layout.

Every HTML element has a "meaning" apart from how graphical browsers display them. Consider [font=monospace]<p><b>Some Heading</b></p>[/font] and [font=monospace]<h4>Some Other Heading</h4>[/font]. The two will be rendered the same on a graphical browser but the first wrong nonetheless. Persons using Braille and audio browsers need to know what the headings are. As a sighted person I can quickly scan the document and find the section I seek. Unsighted users can "tab through" the document headings, but only if the headings have been marked up as H elements. You are cautioned against using the I element because "italic" has no real meaning. If you want to indicate emphasis then use EM, a citation then use CITE.

You need to stop thinking about "formatting" the document. Use HTML 4.01 Strict to mark up the content and only then worry about the style sheet.[/font]

@idiotstringauthorJun 03.2003 — #>

4. It doesn't matter what the ID is, it is only a reference for you.

I see I didn't explain that part well. I don't think I'd explain it well now either, so I'll just leave it at that.

The 'style sheet' they have isn't a proper style sheet. But I'll be building them one and inserting that into all the new files I make.

Can't you tell I'm new to this all? =/

@idiotstringauthorJun 03.2003 — #Thanks.

I had come across HTML Tidy earlier, but I haven't tried it out yet. I'll look into it soon.

@idiotstringauthorJun 03.2003 — #**The document I'm trying to convert into HTML contains several tables. Should I code them th id="t1" or th id="header1", or does it matter which of the two I use?

does anyone know the answer to this one? all those tables contain data. i've seen both methods being used online, and i wonder which is better.

tia!

@AdamGundryJun 03.2003 — #As I said, it doesn't matter which you use. The ID is used for multiple purposes, explained [URL=http://www.w3.org/TR/html401/struct/global.html#adef-id]here[/URL], but as long as the ID is unique and matches in the stylesheet, you are ok. The important thing is to use <th> for headings and <td> for data (along with the other table tags).

Adam

@CharlesJun 03.2003 — #[font=georgia]Marking up your table headers with THs is a necessary start, but if any of your data cells are related to more than one header then you will need to use the 'abbr', 'axis', 'headers', 'id' and 'scope' attributes. See http://www.w3.org/TR/html4/struct/tables.html#h-11.2.6.[/font]

@idiotstringauthorJun 04.2003 — #aha, okay. i must have missed that last point. sorry about that!

thanks for the help, both of you! ?

@Robert_WellockJun 04.2003 — #If you want do go to one of my friend's site on some practical accessibility tips in layman's terms then: http://www.accessify.com/