Design W06: Improving the Readability of list items

Inconsistent List UX

Nested list, particularly those compiled using Markdown do not automatically generate type="a" or type="i" attributes. They need added and Markdown processors don't seem to do it automatically. Here's an example how that looks and sounds:

Ideation starts when I am inspired by an event or situation.
1. When it is a good idea, I progress it to Design.
2. If it's a crap idea, it stays in ideation for more work.
3. If improved with more work, I progress it to Design.
4. If it is really crap. I bin it.
  1. Caution. Don't bin the bin yet!
  2. Binned ideas may fit another purpose. Recycle!
Design work generally starts with pen sketching.

List complied with list types

The following example includes type="a" and type="i" attributes. VoiceOver in Safari and Chrome reads the "a - b", etc. In Firefox, it doesn't acknowledge the counters at all. Try this:

Ideation starts when I am inspired by an event or situation.
1. When it is a good idea, I progress it to Design.
2. If it's a crap idea, it stays in ideation for more work.
3. If improved with more work, I progress it to Design.
4. If it is really crap. I bin it.
  1. Caution. Don't bin the bin yet!
  2. Binned ideas may fit another purpose. Recycle!
Design work generally starts with pen sketching.

My Design Workflow list updated with JavaScript and CSS

Combining JavScript to call the type="a" or type="i" attributes and using CSS to add content, VoiceOver reads the counters in Firefox too. However, Firefox then misbehaves with the counter reset on the parent list items! (See the reported bugzilla Bug). A work in progress…

Ideation starts when I am inspired by an event or situation.
1. When it is a good idea, I progress it to Design.
2. If it's a crap idea, it stays in ideation for more work.
3. If improved with more work, I progress it to Design.
4. If it is really crap. I bin it.
  1. Caution. Don't bin the bin yet!
  2. Binned ideas may fit another purpose. Recycle!
Design work generally starts with pen sketching.
1. First, I choose appropriate characters from the library to match the scene.
2. Then I develop the script into the three frames. It's the hardest part.
3. And then I develop the layout.
Using Adobe Illustrator:
1. The design is refined as necessary.
2. The strip is finalized.
When ready, I Publish the strip to whatever media it fits.

Note

The issue is that the counter types of "a" or "i" are not implemented consistently by VoiceOver across browsers. Adding CSS content causes the pause for breath needed to break up the counter from the content and content. For example, "abanana" becomes "a banana".

Adding parentheses may improve visual readability—if not, then ommit it from the code.

The solution is to:

Remove the 'wrong' counters.
Insert the correct counter types.

The CSS-generated counters are announced by VoiceOver and other screen readers may fail. The alternative then is to use JavaScript to update the punctuation following the counter type inserted.

Video

Skip the video to the

HTML Snippet

<ol>
<li>Ideation starts when I am inspired by an event or situation.
   <ol>
	<li>When it is a good idea, I progress it to Design.</li>
	<li>If it's a crap idea, it stays in ideation for more work.</li>
	<li>If improved with more work, I progress it to Design.</li>
	<li>If it is really crap. I bin it.
       <ol>
           <li>Caution. Don't bin the bin yet!</li>
           <li>Binned ideas may fit another purpose. Recycle!</li>
       </ol>
       </li>
   </ol>
</li>
…

CSS

/*LIST UPDATE*/
ol {
  counter-reset: list;
  margin-left:-1rem;
}
ol > li,
ol ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list, lower-alpha) ".) ";
  counter-increment: list;
}
ol ol > li:before {
  content: counter(list,lower-roman) ".) ";
  counter-increment: list;
}

JQuery

$(document).ready(function(){'use strict';
    $("ol").attr("type","a");
    $("ol ol").attr("type","i");
});//END READY