Use of <br /> and accessibility

Question

From this question/answer: Pausing in a screen reader for accessibility it seems that one shouldn't use <br /> for presentation purposes when designing a website to be accessible. I take here accessible to mean that it works well with a screen reader.

I have a footer on a webpage. The footer is just three links. So I have:

<div id="footer">
  <a href="xxx">xxx</a>,
  Email me: <a href="mailto:yyy">yyy</a>, 
  <a href="zzz">zzz</a>
</div>

My question is:

How do I best display the three links on three separate lines?

Should I just insert a <br /> after the two first </a>, or should I enclose each line in <p> ... </p>?

It is important that this is done in an "accessible way". I need the code to validate as XHTML 1.0 Strict.

Answer 1

The point is that a screenreader will read right over a br tag, because it doesn't particularly mean anything to it. A line break is only a visual indicator, not a semantic one. In the other question you link to, each individual line should stand on its own, therefore br as a separator is the wrong semantic choice.

In your case, it looks like the whole thing is a sentence semantically (guessing by the commas), but should merely be presented on three lines. In this case, br is perfectly appropriate to insert a visual line break without adding any semantic meaning to it.

br = read without pause, p = paragraph, pause appropriately while reading.