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.

Answer 2

The br element may only be used for line breaks "that are actually part of the content".

Such line breaks are typically those in addresses or in poems.

In your case, you seem to only need the line breaks for layout reasons. So it would not be correct to use br elements there.

You could use any appropriate element and add the line breaks in your CSS (display:block;), but by using an element like p or div, you get this behaviour by default and the added benefit that it also works for text browsers and other user agents that don’t support CSS.