CODEWITHSUNDEEP
htmlaccessibilityline-breaksxhtml-1.0-strict
Thomas
Thomas

Reputation: 1105

Use of <br /> and accessibility

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.

Upvotes: 6

Views: 17735

Answers (5)

rooby
rooby

Reputation: 811

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" />

Upvotes: 8

Davorama
Davorama

Reputation: 76

<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>

Upvotes: 2

unor
unor

Reputation: 96567

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.

Upvotes: 7

Raj
Raj

Reputation: 121

<!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.

Upvotes: 0

deceze
deceze

Reputation: 522025

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.

Upvotes: 10

Related Questions