List Abuse or Best Practice
I am researching the practical use or abuse of unordered/ordered lists on web pages. I have started using the JAWS screen reader to assist me in producing better solutions for my websites. I have also spent some time surfing other peoples websites with JAWS to get a feel for what works well.
I made an alarming discovery that I felt was not acceptable. It seems that the latest trends for semantic markup is to place the entire website in a huge unordered list. One term to describe this approach is called "divless" and is quoted as:
"DIVless is W3C friendly and was designed to give developers another method to create website layouts in a standards-friendly fashion."
Divless means very piece of content is in a list. Everything from navigation menus, sidebar content, paragraphs, to footers. In my experience this made JAWS read out every list level and nested lists level on a page. This process took a long time to go through. This also had a side effect of causing JAWS to progressively slow down it's speech rate. Items near the bottom of the page were reading back so slow that I stopped the screen reader and went to another site. It was just plain painful.
The argument I read most often in favor of this method is that older browsers understand the unordered list element and therefore render better. I have tested this theory and the older browsers do not support the level of css required to render a layout of this complexity and will simply render a massive list of items that don’t belong in a list.
I feel that the degraded visual appearance of a div based layout looks vastly better to a user of an older browser. It also does not adversely effect a screen readers ability to parse your pages content.
During my research, I found an article that says just about everything I wanted to say in this article. Rather than restating what’s already been said, I urge you to read this article titled "Are Lists Becoming the New Tables?" by Mike Cherim He goes into other issues with this methodology that I had not yet discovered. His argument is better than mine and has more facts to support up his philosophy.
I think that lists are better served to do what they were intended. Make lists. Not replace tables.
So my question to you all. Are divless websites the best method for presenting content? just because it's semantic and validates does that make it more accessible or more usable? Until I can see evidence that points to the contrary, I am in the camp that divs are better suited for markup than a list.
Hi Mark--Wow...divless sounds non-semantic to me. Avoiding divs where possible is fine (e.g. <code>ul#nav</code> rather than <code>div#nav ul</code>), but like good programming code with classes and objects, divs and spans should be used to group related chunks of HTML into logical (but relatively abstract) elements. As JAWS clearly illustrated in your tests, tags with meaning need to be used in a manner consistent with that meaning.
@Mark and @Paul - I couldn't agree with you more. Going "Divless" is complete nonsense! It really is getting back to the "tables for layout" approach of using the wrong markup for the job. Tables are for (guess what?) - tables! Lists are for (guess what?) - Lists! Layout is best handled through a semantically neutral element and divs are just the thing. I can't believe anyone has proposed this approach!
@Paul. I agree fully. Extra div's should be avoided as much as possible. It goes back to the divitus concept. I won't throw stones here as my markup is not perfect. (mostly because I am cleaning up stuff left over from mango blog) I do try to avoid the extra div's or clean them up during maintenance routines. I love the idea of being semantic and divs are not semantic, but I am not a purist so I break the rules in favor of usability and accessibility. It's doubtful (at least in my mind) that many semantic list evangelists often use real screen reader but instead rely on their assumptions of technology based on what they read on blogs.
@Andy. I agree, Lists are for lists not layout. That proposed theory of semantics markup is just not semantic at all. And not friendly to screen readers. In my opinion, I would rather support a screen reader than an old dying browser from 10+ years ago.