Use of and accessibility

Question

Use of and accessibility

15.8k Views Asked by Thomas At 25 August 2015 at 13:02

From this question/answer: Pausing in a screen reader for accessibility it seems that one shouldn't use   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   after the two first </a>, or should I enclose each line in  ... ?

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

Original Q&A

There are 5 best solutions below

Raj On 25 August 2015 at 13:17

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

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

unor On 28 August 2015 at 18:07

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.

Davorama On 13 June 2019 at 20:00

  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>

rooby On 26 June 2019 at 19:20

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

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

<br aria-hidden="true" />

**deceze** · Accepted Answer · 2015-08-25T13:22:34.997000

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.

Use of <br /> and accessibility

There are 5 best solutions below

Related Questions in HTML

Related Questions in ACCESSIBILITY

Related Questions in LINE-BREAKS

Related Questions in XHTML-1.0-STRICT

Trending Questions

Popular # Hahtags

Popular Questions