Quick Tip: Text Characters as Visual Separators

I’ve been running into these pretty frequently lately so I figured I’d throw something together about it: text characters as visual separators.  As much as I’d like to say modern development practices have grown beyond such things, it apparently hasn’t.

<ul>
<li>Foo</li>
<li>|</li>
<li>Bar</li>
<li>|</li>
<li>Bat</li>
<li>|</li>
<li>Baz</li>
</ul>

The above code structure, obviously scrubbed to protect the guilty, was used to provide a visual separation between links in a website’s footer. Screen readers will likely announce the number of LI elements an then read the list. Depending on the specific screen reader and the user’s settings, it may or may not announce the pipe characters. If it doesn’t announce the pipe characters, users will still be expecting 7 items, not 4. In the grand scheme of things, this probably isn’t the worst thing you could do, but it also betrays a lack of skill, especially considering how super easy it is to do this right:

<ul>
<li>Foo</li>
<li>Bar</li>
<li>Bat</li>
<li>Baz</li>
</ul>

li{
    list-style-type: none;
    display: inline;
    margin-right: .3 em;
}
li:not(:last-of-type):after{
    content: ' | ';
}

See this at: http://jsfiddle.net/karlgroves/8wXa8/