Is it OK to have contiguous ordered lists?

**mediachild** · Nov 28, 2012 16:56

Hi,
I keep getting contiguous ordered lists to mark-up. Are there accessibilty issues with this? The code I have to use to get this to work is a bit messy (makes me cringe a bit) but sort of has an internal logic.
I need a solid reason to come back to the authors of the documents if I want them to change the formatting methodology.

eg. (...but with made up content. I can't give the actual example unfortunately. The actual docs are legal-ish government docs.).

Heading: What do do in the playground.

A. Playground fairness
i Don't push
ii Don't kick
iii Don't punch
B. Share toys
iv Let other kids:
- join in
- have even time
v Don't hide toys
C. Language
vi No swearing
vii Say nice things to others

...you get the idea. The authors are trying to convey that the top level OL is breaking up the list into logical chunks like headings but they want a continutity through all the items listed under the second level OL (in lower-roman). I realise normal practice would be to start each nested list from one but the authors feel that this breaks up the list too much so weakens the message they're trying to give.

I guess I want to get an idea is this bad practice or just not best practice, or am I over reacting?
Has anyone else come across this and have a better solution?
Is there anywhere that explicitly states this is the wrong way to format lists? (I had a look but can't see anything solid)

Thanks

**ralph.m** · Nov 28, 2012 17:11

Hi mediachild. Welcome to the forums.

It would be interesting to see the actual code you are using for that, because I can't quite tell what markup you'd use for that. The mixture of roman numerals and dashes lost me a bit.

A DL might be a better option, by the sound of it, but I don't see a problem with nesting lists, as a rule.

**mediachild** · Nov 28, 2012 17:38

Thanks Ralph,
I've been a long time fan of sitepoint but never explored the forums.
I had indented the example above but looks like it was eaten by the forum WYSIWYG.

Here is the markup:

HTML Code:

<h3>Heading: What do do in the playground.<br />
</h3>
<ol style="list-style-type:upper-alpha">
  <li>Playground fairness
    <ol style="list-style-type:lower-roman">
      <li>Don't push</li>
      <li>Don't kick</li>
      <li>Don't punch</li>
    </ol>
  </li>
  <li>Share toys
    <ol start="4" style="list-style-type:lower-roman">
      <li>Let other kids:
        <ul>
          <li>join in</li>
          <li> have even time</li>
        </ul>
      </li>
      <li>Don't hide toys</li>
    </ol>
  </li>
  <li>Language
    <ol start="6" style="list-style-type:lower-roman">
      <li>No swearing</li>
      <li>Say nice things to others</li>
    </ol>
  </li>
</ol>

**dresden_phoenix** · Nov 28, 2012 18:12

Welcome to the forums, child.

...you get the idea. The authors are trying to convey

Actually, no. It's HARD to tell what the author means ( maybe we are missing indents in your post) , but this could be several lists ( so not really ADJACENT , rather than contiguous) , or it could be a nested list NESTED in which fist level is latin letters uppercase, the next is roman numerals, the next is decimal, etc.

I mean the list would make more sense IF it were like this:
A. Playground fairness
i Don't push
ii Don't kick
iii Don't punch
B. Share toys
i Let other kids:
* join in
* have even time
ii Don't hide toys
C. Language
i No swearing
ii Say nice things to others

(At this point it would be just a matter of setting the list styles for each level)
ol{list-style:upper-alpha}
ol ol{list-style:lower-roman}
ol ol ul{list-style:disc}/*there is

This list is additionally odd in because it doesn't seem to fallow any standard list pattern :/ So the first thing I would do is consider the structure and semantic value of my content.

I would literally REFUSE to do this, but if someone were to be holding a gun to my betrothed, you could 'manually' achieve this effect by doing something like this:

Code:

<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
	.weird, .weird ol, .weird ul{ list-style: none;}
	 
	.weird{ counter-reset:root; counter-reset:secLev;  }
 	.weird >li:before , .weird ol>li:before, .weird ul li:before {float:left; text-align:right; width:40px; margin-left:-40px; padding-right:.5em;}
 	.weird ul li:before {content:"-";}
	.weird >li:before {content:counter(root, upper-alpha)". ";}
	.weird >li {counter-increment: root; }
 	.weird >li > ol> li:before { counter-increment: secLev; content:counter(secLev, lower-roman);}
/*optional--- removes indents*/
 	.weird ol,   .weird ul {padding:0; margin:0}


		</style>
	</head>
	<body>
 <ol class="weird">
<li>Playground fairness
	<ol>
		<li>Don't push</li>
		<li>Don't kick</li>
		<li>Don't punch</li>
	</ol>
</li>
<li>Share toys
	<ol><li>Let other kids:</li>
		<ul>
			<li>join in</li>
			<li>have even time</li>
		</ul>
		</li>
		<li>Don't hide toys</li>
	</ol>
</li>
<li>Language
	<ol>
		<li>No swearing</li>
		<li>Say nice things to others</li>
	</ol>
</li>

</ol>
	</body>
</html>

The BIG advantage here is that the values will automatically adjust if you add or remove content.. and of course the nested list is completely semantic and valid.
Hope that helps.

**felgall** · Nov 28, 2012 19:27

If the lists you have nested inside the elements of your outer list are required to be numbered continuously ignoring the outer list then you'd need to reset the counter on the first entry in each nested list using counter-reset with a different value for each nested list.

**ralph.m** · Nov 28, 2012 21:33

Originally Posted by mediachild

it was eaten by the forum WYSIWYG.

Yeah, code is better, but if you want to preserve indents etc. you can wrap the content in [code] [/code] tags.

The markup looks fine to me. Make to to lose the <br> inside the <h3> though, and instead put a bottom margin on the <h3>. Also, rather than inline styles (which are really inefficient), just use one CSS rule for the list-style:

Code:

ol ol {list-style-type:lower-roman}

**Stomme poes** · Dec 2, 2012 03:55

How Dresden Phoenix wrote code, is how it tends to be written on the web, because of the mentioned-problem of numbering lists when it's not one big list.

The way the list was originally presented by mediachild is however what I ran into constantly in insurance and legal forms. The numbering may be significant too, because people will refer to lines and clauses by their number. Legal documents often also need to have two elements marked up with the same number, one with a strike-through, to retain the original wording while correctly numbering the new wording.
It was also quite frustrating how often other symbols were seemingly randomly sprinkled into the lists, such as * and hyphen-bullets (which I hand-coded into documents, but appeared in IE/Windows as boxes unless the machine happened to have the full Office suite installed which has more fonts), similar to how mediachild posted. Some sub-lists followed the numbering scheme, while others would switch to hyphen bullets. I lost hair over those, and was supposed to be copying PDF images (yeah, someone took a document, scanned it in as an image, and turned that into PDFs, so pdf-to-html would not work anyway) directly to the web.

If mediachild can use what is suitable for the web (Dresden's version) then that's what needs to be done because legal-style numbering just isn't built into browsers.

However if the numbering really must reflect more the style we saw in the first post, and especially if there are any strike-throughs, and if this is expected to appear correctly in a broad range of browsers (ie, for the general public, and IE7 or FF3.6 or Safari 4 are being considered) then it's possible the numbers will have to be hard-coded into the list (and the CSS list-style set to none). This kinda sucks because you lose the niceness of auto-generation, but I've done it at times when clauses MUST keep the correct number labelling because of other documents referencing each other.

Depending on the needed numbering, something clever using the idea felgall mentioned might be usable, but I can't remember off-hand who all supports counter-reset. If this is an intranet, that might not be an issue.

**felgall** · Dec 2, 2012 15:33

If the exact numbering of the entries is important and needs to be accurately maintained (such as in legal documents) then hard coding the values in the HTML and using an unordered list with the bullets hidden may be the appropriate alternative. You would only generate them in CSS where you want the entries to be automatically renumbered if entries are added or deleted.

**dresden_phoenix** · Dec 2, 2012 17:45

Yeah, if the numbering is wonky then you need to use the LI's 'value' attribute. Which sucks because it's not automatic. As far as CSS alone goes, you can add a class for strikethroughs, negating or impeding the increment of the appropriate counter.

Since , according to the specs, a 0 value is allowed specificity would automatically override the rule when the class is added to the base rule:

li{counter-increment:root; }
li.strikeTr{ counter-increment:root 0; }

**mediachild** · Dec 4, 2012 19:43

Thanks for all the feedback.

I do feel a bit stuck between a rock and a hard place. I think from the author's perspective they're understandably ungrateful to have a paper they've been working on for months, reviewed, proofed and modified a dozen times... then sent to the web guys to finally put up only to have them come back saying their information structure lacks internal consistency.

My work around is that I've been resetting the OL list count in a similar way to Stephen's suggestion.

Really what would help is a luddite guide or accessibility standard I can use as leverage to get the authors to do it right in the first place. Most melt down the moment the words "ordered list" leave my lips.

If anyone knows of such a list please let me know.

**mediachild** · Dec 4, 2012 20:02

If you're curious (and it wasn't clear) I’ll have a stab at where the authors were coming from:

This is the list of ‘7 rules’ they wanted:

i Don't push
ii Don't kick
iii Don't punch
iv Let other kids:
v Don't hide toys
vi No swearing
vii Say nice things to others

Then they realised it was too long and should be broken up into these groups:

A. Playground fairness
B. Share toys
C. Language

And then they added extra detail to rule 4:

* join in
* have even time

…but at the same time didn’t want to break up numbering of the rules, because then it wouldn’t be perceived as a cohesive list of 7 rules. A bit like not breaking up the 10 commandments.

The actual content is of course much longer and much more complicated. Added to the mix they mandated that all the paragraphs were numbered too, which is when all my hair fell out.

**ralph.m** · Dec 4, 2012 21:02

Originally Posted by mediachild

Then they realised it was too long and should be broken up into these groups:

A. Playground fairness
B. Share toys
C. Language

Personally, I'd make those headings.

... which is when all my hair fell out.

Don't worry. A bald head is stylish these days.

**dresden_phoenix** · Dec 5, 2012 01:34

Semantically it could be argued that there are 7 rules, that fall into one of 3 categories, and some of those rules have corollaries. So the first level of the list is are categories ( tho Arguably, we could use 3 headings and 3 lists.. but... you can see how that goes back an complicates things a little. then the second level are the actual rules and then finally the third level for the corollaries.

incidentally, you can number the paragraphs automatically using counters.

User Tag List

Thread: Is it OK to have contiguous ordered lists?

Thread Tools

Display

Is it OK to have contiguous ordered lists?

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions