Use of
and accessibility

Question

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.

Hey @Thomas, what you're looking for is the difference between block level and inline elements. In short, tags are inline elements that will display on the same line. Check out the following link for more information. http://www.w3schools.com/html/html_blocks.asp Now, to fix your problem, you can simply wrap your anchor tags in block level elements (
for example). — Josh Salazar, Aug 25 '15 at 13:09
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."* — deceze, Aug 25 '15 at 13:09
I would say the `
` 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 `
` is semanticaly wrong at this place, but I actually read about this right before.. so I might be wrong. — Cagatay Ulubay, Aug 25 '15 at 13:09
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. — classicalConditioning, Aug 25 '15 at 13:10
@AlexPavlov: Ah.. so just keep as is, but create the visual distance with the css added like: `xxx,`? — Thomas, Aug 25 '15 at 13:13
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. `` — classicalConditioning, Aug 25 '15 at 13:16
@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
tag first. — Josh Salazar, Aug 25 '15 at 13:19
please see my answer. @Josh Salazar - you are right. need to add float:left to the class. — classicalConditioning, Aug 25 '15 at 13:23

score 9 · Accepted Answer · answered Aug 25 '15 at 13:22

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.

Ok, I see. So it sounds like I could do either of the two. If I wanted a pause, then I could use `
`, if I just want things read out in as a sentence, I could use `
`. I think I might go with `
` then. — Thomas, Aug 25 '15 at 13:31

score 8 · Answer 2 · edited Dec 05 '20 at 13:31

8

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

edited Dec 05 '20 at 13:31

Penny Liu

15,447
5
79
98

answered Jun 26 '19 at 19:20

rooby

721
13
23

score 6 · Answer 3 · edited May 23 '17 at 11:45

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.

score 2 · Answer 4 · edited Jun 14 '19 at 02:14

2

  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>

edited Jun 14 '19 at 02:14

Andrew Myers

2,754
5
32
40

answered Jun 13 '19 at 20:00

Davorama

76
5

Rahman · Answer 5 · 2015-08-25T13:50:43.633

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

Use of
and accessibility

5 Answers5

Linked

Use of and accessibility

5 Answers5

Linked

Use of
and accessibility