Accesible/Logical web design with Nutrition Labels

[opqdan]

I am a software developer who dabbles in some web development during my free time. Right now, I am working on a cookbook application that my wife and I can use to keep track of recipes and other information (yes, I know that plenty of these exist, but I find it very fun to make my own). It is being written in Ruby on Rails (although that doesn't matter for this question).

Part of what I am doing is trying to adhere to web standards and accesibility. Sure, it doesn't matter if only my wife and I use it, but it makes the project more interesting for me. As such, I have run into a dilemna in displaying nutrition information for a recipe.

If you look at a nutrition label (specifically the part describing the daily values), you'll see items (eg: "Total Fat", "Sodium") which are coupled with values (mass and daily value percentage), and can include sub-items ("Total Fat" contains "Saturated Fat" and "Trans Fat") which also include values.

The obvious thing that came to me first was to use a table with a column for an item, the mass, and the daily value, but the data in a nutrition label is only semi-tabular and I would like to be able to completely refactor the layout using CSS, to which tables aren't really conducive. Plus, if I want to logically structure the date (with some items being sub-items of others), then I would have to nest tables, which is something I swore I would never do.

This leaves some other logical formats including unordered lists (ul) and definition lists (dl). I am stuck in decided how to go about structuring the label so that it makes logical sense.

I prefer the definition list because it makes logical sense. I can couple values (mass, %dv) with a term ("Total Fat") and even add a nested definition list for the sub-items. There is some debate over whether definition lists are meant solely for definitions, or merely for any key/value pairing. I got with the later definition, but that raises a problem with search engine bots that expect the element to work like a glossary. It also doesn't make much contextual sense as there is nothing describing the definitions ("Mass: 5g").

This style of solution could end up looking like:

<dl>
    <dt>Total Fat</dt>
    <dd>5g</dd>
    <dd>5%</dd>
    <dd>
        <dt>Saturated Fat</dt>
        <dd>5g</dd>
        <dd>25%</dd>
        <dt>Trans Fat</dt>
        <dd>0g</dd>
        <dd>0%</dd>
    </dd>
</dl>

I could just go with a plain unordered list (where the values were nested list elements and the sub-items were also a nexted list), but this solution, while easier to make sense of when reading the HTML, makes it even more difficult to tell what is being displayed.

This style of solution could end up looking like:

<ul>
    <li>Total Fat
        <ul>
            <li>5g</li>
            <li>5%</li>
        </ul>
        <ul>
            <li>saturated fat
                <ul>
                    <li>0g</li>
                </ul>
             </li>
         </ul>
    </li>
</ul>

or even

<ul>
    <li>Total Fat 5g 5%
         <ul>
             <li>Saturated Fat 5g 25%</li>
         </ul>
    </li>

I like this last style because it is easy to read, I would have to wrap each part of the list element is spans or divs in order to format and place them correctly though.

I could even mix the two and use singleton definition lists inside each list element in the previous example.

So this is where I am right now, stuck on how to display this data. I've been bouncing back and forth between the ul and dl ideas, and I have started to implement both with some success. Neither is really easy though as a nutrition label doesn't lend itself to easy formatting, and displaying the definitions (dd) correctly requires some CSS-fu. Both just end up devolving into tag soup, and they begin to make less and less sense.

I really just need another perspective on this. My wife, bless her heart, just doesn't understand what I am talking about, so I need another webdevelopper who might have an opinion.

PS: The data in the nutrition label is filled in programmatically, so I only need to write this code once in a single template, and it will be rendered whenever I need it. It is possible that I could leave it very complicated, since I don't have to rewrite it, but I would prefer to have it as simple as possible.

 

[Wudang]

Have you looked at www.alistapart.com? They have some good articles on list handling. My brain's too dead to make a worthwhile contribution.

 

[opqdan]

Have you looked at www.alistapart.com? They have some good articles on list handling. My brain's too dead to make a worthwhile contribution.

Yeah, I regurlary read A List Apart, and it is one of the main things that got me so interested in the accesibility and logical display of data.

I just can't seem to find anything there that helps me with this type of problem, I've never been able to find a good example of a nested list where each item had associated data. A definition list makes sense, but I've never seen a nested one that mande logical sense*.

*: Why does the definition lit have separate blocks for term and definition. It would make sense for there to be some way to tie them together such as having the dd exist inside of the dt or something similar. With the way it is now, there is no association between the dd and dt except that assumed by the browser. I want heirarchy and the dl doesn't offer it in the same way that the other lists do. I imagine something similar to how you apply a label field to a form element.