Visual28-Personal Blog of Mark Aplet - Design, web, and other topics

Recently Mike Robinson of www.akamike.net posted a response to another article on noupe.com asking for opinions on using list with forms. I'm not trying to single anyone person out. Mike is not alone in his thoughts, and I am simply using his post Form Mark-Up: Are Lists Appropriate? as a "for example" on the kinds of articles that I am reading more frequently on various blogs. I'm not trying to pick on Mike but rather raise awareness to an increasing problem that I see.

One of the trends that I see more frequently, is to place all your content in a list. Ordered Lists, Unordered Lists, and Definition Lists. It doesn't seem to matter anymore. This "all inclusive tag" is being packaged and sold as semantic markup. Frankly I feel it's just bad marketing. Yes it does validate. So does a table. Validating is not a true measure of semantics. A list of any kind is meant for one thing. Listing content. It's not semantic to use a list for layout. This is still bending the rules for layout purposes. In fact I would say it's worse in some cases, and less semantic than using a table. I'm not saying "use tables" I am merely saying it's not any better. Lets take a look at the two practices and compare them to plain old HTML. I have laid out three forms below with the same elements. One is in an ordered list, the other uses a table, and the last one is plain old html.

See how these three choices stack up against one another.

Read more...

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.

Often times, terms like accessibility, validation, and compliance get tossed around by web companies or website owners of all sizes. Large or small. It seems that running a site though an automated validator is all that many people think is necessary.  Having recently developed carpal tunnel and using websites without the aid of a mouse, I find that many of these sites are not really accessible or useable to people like myself with limited mobility. There are some very simple solutions that can make your website as easy, or easier to navigate via keyboard than with a mouse. In the following article I talk about my usage of websites and how they typically fail users with mobility issues, and offer both design and programming solutions to overcome these problems. It's doubtful that any designers or programmers will get hurt from reading this article.

Read more...