Jump to content
Sign in to follow this  
snipe

Html Style, Accessibility And Usability

Recommended Posts

I realize that this isn't really a tutorial, and this isn't something I usually share with the rest of the world, as it was designed to help my programmers (and contractors) better understand the standards I require when people do work for me.

 

However, I have shown it to several people who have found it extremely help with their own programming, design and marketing - and some have started using it as their own style manual for when they deal with contractors and new programmers.

 

Some parts of this may not be of interest to individual programmers, but I figured I'd offer the whole thing up in case anyone is interested.

 

Love it or hate it, here it is. I hope it helps a few people out. :dance:

style_manual.pdf

Share this post


Link to post
Share on other sites

Very good reading, Snipe! Thanks for sharing it :dance:

 

One question: why do you suggest DOS-Style 8.3 filenames?

 

Also, the "correct" (at least according to W3C standards) alternative text attribute for hyperlinks is alt, not title, I believe.

 

Thanks again for sharing the PDF! :dance:

Share this post


Link to post
Share on other sites

The dos style 8.3 format is more or less a leftover from the days before windows could handle longer names - and it honestly just helps keep some "creative" programmers in line. (I have gotten everything from "form posting page number one.php" to "excopy_send_me_now_resend.php") Not that longer filenames are going to cause a problem, but they are just usually not necessary, assuming that your directory structure is set up in a reasonable fashion.

 

Remember that this document was created for my programmers, so some bits of it may be more strict that is "generally accepted" - because that the way I am. :dance:

 

As far as the title tags for hyperlinks, as far as I have found, the W3C still accepts "title" as an accessibility-friendly tag, and Bobby still validates them as such.

 

"Clearly identify the target of each link. [Priority 2]

Link text should be meaningful enough to make sense when read out of context -- either on its own or as part of a sequence of links. Link text should also be terse.

For example, in HTML, write "Information about version 4.3" instead of "click here". In addition to clear link text, content developers may further clarify the target of a link with an informative link title (e.g., in HTML, the "title" attribute). "

(from http://www.w3.org/TR/WCAG10/ )

 

Either way, I'm not hung up so much on validation and standards as I am on pratical use. I have several friends of mine who are legally blind, so I have the advantage of being able to apply this stuff to a real situation and see how it flies.

Share this post


Link to post
Share on other sites

I've tried downloading the article, but each time, my browser hangs. Is anyone else experiencing this problem? I've tried downloading in both Firefox0.8 and IE6.

 

If anyone out there has an electronic copy of this article saved on your hard disk, would you mind emailing it to me? Please send it to kasey AT slac DOT stanford DOT edu.

Edited by kaseytraeger

Share this post


Link to post
Share on other sites

Thank you, Bruce!!! I'm reading it [almost] as I type! :)

Share this post


Link to post
Share on other sites

kaseytraeger - did you manage to get through it? What are your thoughts?

Share this post


Link to post
Share on other sites

I *love* it--I'm going to send a copy over to my supervisor, it's right up her alley! Also, have you read this article from A List Apart? Accessible Pop-Ups

 

later,

!!blue

Share this post


Link to post
Share on other sites

Snipe,

 

Yes, I did get a copy of it. Bruce (TCH-Bruce) emailed me a copy. I printed it for future reference (most times, if I leave something on my hard disk, I forget its there, but if it's in a paper file, I always find it!).

 

It looks like you and Jakob Nielsen are on the same page. Much of what you require is very good at increasing usability. I found it interesting that what you were touting in 2000 (as based on the date of the style manual) is now being sold in book form three and four years later! I guess you were just ahead of your time!!!

 

Seriously, I like that you placed a lot of important web sites in there, such as the HTML Validator and the link for the Lynx Emulator. I particularly like that you require the titles of each page to be standardized in the form <title>[site name] - [section name] - [page title]</title>. I try to strive for this type of standardization in my own pages, but the sites I've done are so small that they really only need two qualifiers -- [site name] and [page title]. My page titles will typically look like this:

Web Site Name >> Page Title (e.g., "The Village Pantry >> Contact Us")

 

Since you asked, however, I do have a question for ya ... why do you suggest the use of embedded tables rather than colspan and rowspan?

 

In all, I really found your document to be a concise summary of good coding techniques. Although I am a one-person operation, I think a summary guide such as yours would be a very beneficial checklist against which I can evaluate each web site I create. In the event my little fledgling firm grows, it'll be handy dandy to give to freelancers doing work for me!

 

:goof:

Share this post


Link to post
Share on other sites

Great, I'm glad it could be of some assistance!

 

I suggest the use of embedded tables over colspan and rowspan because colspan and rowspan can do some weird things, display-wise. For example, say you have a table that looks like this (I hope this comes out okay LOL)

 

>---------------------------------
|        row A  (colspan 2)      |
---------------------------------
| row B1 |        row b2         |
---------------------------------

 

Even if you specify a width for B1, the browser will often increase this width to wider than you specify if row A has enough content to fill the cell at least one line.

 

(I don't know if I'm articulating this very well at all.... Its hard to explain)

 

Same type of deal for rowspan. Also, using rowspan, especially if you're using tables for layout, can sometimes break the page. For example, if the user can't see very well, and they raise their font sizes up WAY more than you would have anticipated - all of a sudden your pretty sliced graphics have weird visual gaps in them.

 

And finally, it just makes it easier to made modifications later. If you have a two column site, the left column where your nav items live and the right column where your content lives, if you use a rowspan=7, say, if you have 7 left nav items - later on down the road if you wind up adding a nav item, you might forget to increase the rowspan accordingly. Some browsers, such as IE, might not even give you a visual cue that you bothed that up, whereas NS/Moz users will see a mangled table layout.

 

(If I have done a crap job of explaining this, lemme know, and I'll throw together some mockups when I have a moment.)

Share this post


Link to post
Share on other sites
... I don't know if I'm articulating this very well at all.... Its hard to explain ... If I have done a crap job of explaining this, lemme know, and I'll throw together some mockups when I have a moment.

Nope, you did a good job. I understood what you meant.

 

Good point about adding an additional nav item to a pre-existing menu of choices. You're right...it would be easier to add a new row to one table than to dig deeper into a different table to find the nested <tr><td> of choice.

 

Thanks! Thumbs Up

Share this post


Link to post
Share on other sites
... I don't know if I'm articulating this very well at all.... Its hard to explain ... If I have done a crap job of explaining this, lemme know, and I'll throw together some mockups when I have a moment.

Nope, you did a good job. I understood what you meant.

 

Good point about adding an additional nav item to a pre-existing menu of choices. You're right...it would be easier to add a new row to one table than to dig deeper into a different table to find the nested <tr><td> of choice.

 

Thanks! Thumbs Up

Or be *really* daring and not use tables at all! :)

Share this post


Link to post
Share on other sites

Ahh, but this would go specifically against the style manual in question :)

Share this post


Link to post
Share on other sites
I understood what you meant.

*blinking in disbelief*

 

Really? Cuz I just re-read that and *I* couldn't figure out what the heck I was saying. LOL :)

 

Good, I'm glad i managed to explain that with some semblance of intelligence ;) I have been pulling a lot of all-nighters later, so I'm a bit on the frazzled side! :)

Share this post


Link to post
Share on other sites

I prefer to use nested tables rather than col/rowspans myself. I've seen them give some odd results, as snipe has said, so I usually go with the nested ones.

 

Nested tables can be a bother if you're trying to cut down on the page size, but if there isn't any other way.. then there isn't any other way.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×