On my site, I have settled for the following HTML for navigation. <div class="feeds" aria-labelledby="site-feeds-label" role="list"> <span id="site-feeds-label" class="label">Site feeds </span> <span role="listitem" aria-label="ATOM Feed"><a href="https://takeonrules.com/index.atom">ATOM feed</a></span> <span aria-hidden="true"> · </span> <span role="listitem" aria-label="RSS Feed"><a href="https://takeonrules.com/index.xml">RSS feed</a></span> <span aria-hidden="true"> · </span> <span role="listitem" aria-label="JSON Feed"><a href="https://takeonrules.com/index.json">JSON feed</a></span> </div> The separator is the middot. From middot.net (https://middot.net)

The middle dot (a.k.a. interpunct) is often used as a list separator, or in e.g. dictionaries for separating parts of a word (though in Unicode that is technically a different, but most often identical looking character: ‧).

What I like about this is navigations visually render horizontally, regardless of stylesheets. And with the role="list" and role="listitem", accessibility devices will pick these up as lists. I also find the middot character to be just enough of a visual cue of separation.