Here are some tips on making HTML lists in your content management system. In a word processing program, you can easily highlight two or more paragraphs and turn them into a bulleted list with a button that looks like a bulleted list. The same is true in a content management system (CMS). Most CMS’s have an editor toolbar with the familiar set of buttons. An ‘ordered list’ uses numbers. An unordered list uses the dots we call ‘bullets’:
- Captain Picard
- Commander Riker
- Deanna Troi
Take a look at the code view for this list. The “ul” tag is short for “unordered list.” There is an open list tag and a close list tag at the end – the one with the slash “/ul”.
<ul> <li>Captain Picard</li> <li>Commander Riker</li> <li>Deanna Troi</li> </ul>
This is the semantic way to create a list. When this content is posted onto a website, any screen reading software can announce that it’s a list with three items. When working on the web, remember that your content should be semantic. That allows screen reading software to discern the hierarchy of your content and announce it to users.
But there are other ways to create the look of a list without the tags being semantic. Sometimes with copy/paste from other programs you’ll end up with dot characters, or images of fancy bullets. In the case of numbered lists, I’ve seen hard-coded non-breaking spaces imitating the look of tabs after numbers, but the content isn’t a true list. When screen reading software encounters content like this, it just reads the content without announcing the list. For three short items, perhaps that’s not a big deal. However, business lists or outlines can go on for many pages and hierarchy can get confusing.
If you’d like lists that have images of little arrows or colorful dots that are not a part of the standard set of bullets, you should still use the “ul” and “li” tags that the bulleted list button gives you and assign the image bullets with CSS. Unfortunately, that means you’ll need to know how to write CSS. If you don’t know how, then let the browser display the bullets how it wants.
- Starship Enterprise
- Captain Kirk
- Starship Enterprise Next Generation
- Captain Picard
In the above nested list, I didn’t have a choice in WordPress about whether the indented item would be an open circle or a normal bullet mark. Please note, that when formatting nested lists in a CMS, first make all list items one big list and then use the indent buttons to push list items to the right. That should assign parent/child relationships correctly.
I’ve seen lists come across my desk that might have forty items but each item is a separate list with open and close ‘ul’ tags. That’s not very usable for assistive technology. This way, each item is announced as a list of one item. It might be tempting to hit enter or return after your list item to try to get more space under the bullet. But what that does is break the list apart into multiple lists. Instead, it’s CSS to the rescue. You can define line-height AND space after list items with CSS. But usually, the very simple WYSIWYGs in CMS’s don’t offer that out of the box. Again, you’d need to know how to write the CSS to adjust vertical spacing of list items so you can maintain the correct semantics of the list.
