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.

Fiorin

are you targeting a specific browser/ browser version? – Zetland

@AlexPavlov: No, why? – Fiorin

Hey @Thomas, what you're looking for is the difference between block level and inline elements. In short, <a> tags are inline elements that will display on the same line. Check out the following link for more information. w3schools.com/html/html_blocks.asp Now, to fix your problem, you can simply wrap your anchor tags in block level elements (<p> for example). – Pacifistic

Seems like your question is already answered in that very same answer, no? "You specifically want each line to be separate, so you should put them in wrapping block level tags. You could wrap each line in a p or div tag, and then the screen reader will separate them properly." – Trodden

I would say the <p> way is the way to go. This way you can add a different css and margin/padding to everyone if you want so. I think <br> is semanticaly wrong at this place, but I actually read about this right before.. so I might be wrong. – Ebro

why not use css classes then, such as adding margin-bottom: 5px to your anchor tags? If your target range of browsers support css - separation of content will work for you. – Zetland

@JoshSalazar: Ok, thanks. That makes sense. – Fiorin

@deceze: So you would also go with wrapping in <p>...</p>? – Fiorin

@AlexPavlov: Ah.. so just keep as is, but create the visual distance with the css added like: <a href="xxx" style="margin-bottom: 5pm;">xxx</a>,? – Fiorin

something like that.. i would say put .my-anchor-tag-class {margin-bottom: 5px;} and then apply it to all a that you want to. <a class="my-anchor-tag-class"> – Zetland

@AlexPavlov, wouldn't that just add a 5px margin to the bottom of the one row of anchor tags? He'll need to separate them to a new line without using the <br /> tag first. – Pacifistic

please see my answer. @Josh Salazar - you are right. need to add float:left to the class. – Zetland

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.

Trodden

Ok, I see. So it sounds like I could do either of the two. If I wanted a pause, then I could use <p>, if I just want things read out in as a sentence, I could use <br />. I think I might go with <p> then. – Fiorin

Answer 2

Generally, a screen reader will split the text up at the <br /> tag, which can make a sentence sound strange.

If you want the screen reader to ignore the <br />, so that it's purely presentational, you can add the aria-hidden attribute, like this:

<br aria-hidden="true" />

Wife

Answer 3

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.

Latisha

Answer 4

<br> will cause screen readers to put in a small pause. I've found using role=text in a containing span will fix this.

<span role="text">The<br>End</span>

Damon

Answer 5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Strict</title>
</head>
<body>
<div id="footer">
  <a class="links" href="xxx">xxx</a>
  <div class="email">Email me:<a class="links" href="mailto:yyy">yyy</a></div> 
  <a class="links" href="zzz">zzz</a>
</div>
</body>
</html>

You can wrap a div or you can also use <ul> tag. It's valid code. Div is a block Element so it will break things.

Also there is nothing wrong with <br />

If you want to insert a line break on an unusual place, and you actually mean a line break, then use a line break.

Kobayashi