Add something new to Virb:

Virb

Are you sure you want to delete that?

or Cancel

 

Posted on Apr 23, 2007

No Really, DL's Are For Dictonaries

So, I run into alot of guys that do CSS, just because I can't keep my trap shut about it. I absolutely, 100% love Web Standards. With that comes the oh so powerful CSS. Thats just part of the territory.

If your new to it, a big part of Web Standards is that your markup means what your trying make it say. You always hear "Tables for layouts are bad in web standards" but toss that out of your head. Who cares about that, if you ever hear someone push this as the biggest thing for Web Standards, I wouldn't listen to too much of what they are saying. These guys are generally skimmers. And they're probably wrapping and coding everything up the same way they used to, they just replaced all their tables with Divs.

So along those veins of thought, lets look at something here. Web standards are all about the semantic markup (your html means everything that it really is) and you mark up your html/ xhtml (these are by no means the same, and the current way xhtml on the web is served out doesn't even give the browser proper xhtml, but thats another blog post for another time) with proper markup. So if it is tabular data, then use a table. If what your marking up is a list, use the list tags appropriate ( Unordered List ((UL)) or Ordered List ((OL)) ). If your marking up a dictionary definition, you use Definition Lists ((DL)). Paragraphs for P tags, etc etc. But sometimes you have to flex the semantics a bit. Sometimes there isn't a tag for what your trying to do.

By doing these things, we bring the web back to everyone. You mark up first without caring a thing of what it looks like. And you style it with CSS. But by doing this, you ensure things to look proper in Cell Phones, that Screen Readers should (generally) not have a problem with your page, and that the guy living in the middle of nowhere with dial up and images turned off will still get to see the text your header had hidden away and understand what your page is about. Hell, even search engines start to be able to understand what your page is about and bring you to the top. Accessibility is what this is all about. Bring the access back. Screw your design eye, if half your audience can't understand what your page is about because they're either handicapped, mobile phones, or search engines, or they have feature a or b turned off of your site, it doesn't matter if it looks right or not.

So maybe it just frustrates me when I see people use DL's for everything under the sun. Menu's are unordered lists. Your not creating association in your code for a section by making it a definition and the links that go with it definition lists. Imagine with me for a minute that a screen reader (like JAWS for example) is reading to a blind person. And they go to navigate your page. And they listen to it (you can kind of get this experience by running jaws trial and turning your monitor off). At the start of a list, Jaws says the number of items in the list, and at the end, Jaws says list end. So they can navigate very quickly through lists. Whats weird and alien is when you hit a Definition List. The DL will readout that a Definition is starting, and that there is one definition with x number of definition terms. It'd be like someone describing the Virb menu, but calling each piece of it and each step through it a definition and the term. Why would you guys do that to your users?

In my opinion, and thats all these are really, you want to be using UL's or OL's for situations like these in conjunction with Headings.
[ul id="mainMenu"]
[li][h3]Category 1[/h3][/li]
[li][a href="#"]Link 1[/a][/li]
[li][a href="#"]Link 2[/a][/li]
[li][a href="#"]Link 3[/a][/li]

[li][h3]Category 2[/h3][/li]
[li][a href="#"]Link 1[/a][/li]
[li][a href="#"]Link 2[/a][/li]
[li][a href="#"]Link 3[/a][/li]
[/ul]

This type of menu will actually offer quick skipping for a JAWS or similar screen readers. When the user hits the page, they will hear a summary of all the Headings. Here I have the menu using H3's because I assume your using h1's for your branding, h2 for the main content or article of the page they are on, and h3's for the navigation. Essentially, unless its a web app, the thing people are doing on your blog or info site are reading. So you want them to know who you are first, what page they are on or what the main idea is, and then they can skip right down to the menu headings. OR when they get to your list, they'll be able to skip through and hear the headings and understand that each link below that heading is associated with that heading.

You could also get even wilder with it, though this muddies up the sound of JAWs, if your still just not convinced this associates things properly:
[ul id="mainMenu"]
[li]
[h3]Section 1[/h3]
[ul class="submenu"]
[li][a href="#"]Section Link[/a][/li]
[li][a href="#"]Section Link[/a][/li]
[li][a href="#"]Section Link[/a][/li]
[/ul]
[/li]
[/ul]

The w3c says this about headings:
A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

(Cite) http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

I don't think you can make a list more semantic than that. Headers give you your association, and lists, well, they are lists. Not a dictionary.

Loading comments...

Likes

Details

Viewed 293 times

© 2007 Ken

virb.com/t/9928
tweet!

Flag this text post!

Flag this text post as:

or Cancel

 

Advertisement

Flag this profile!

Flag this profile as:

or Cancel