使用 <br /> 和可访问性
Use of <br /> and accessibility
据此 question/answer：Pausing in a screen reader for accessibility 看来在设计一个易于访问的网站时，不应该将 <br /> 用于展示目的。我这里的 accessible 是指它在屏幕上运行良好 reader.
我在网页上有一个页脚。页脚只是三个链接。所以我有：
<div id="footer">
<a href="xxx">xxx</a>,
Email me: <a href="mailto:yyy">yyy</a>,
<a href="zzz">zzz</a>
</div>
我的问题是：
How do I best display the three links on three separate lines?
我应该在前两个 </a> 之后插入一个 <br /> 还是应该将每一行都包含在 <p> ... </p> 中？
以“可访问的方式”完成此操作很重要。我需要验证为 XHTML 1.0 Strict 的代码。
<!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>
您可以包装一个 div 或者您也可以使用 <ul> 标签。这是有效的代码。
Div 是一个块元素，所以它会破坏东西。
也没有错<br />
如果你想在一个不寻常的地方插入一个换行符，而你实际上是指一个换行符，那么就使用一个换行符。
关键是屏幕阅读器会直接阅读 br 标签，因为它没有特别 意思 任何东西。 换行符只是一个视觉指示器，而不是语义指示器。在你 link 的另一个问题中，每一行都应该独立存在，因此 br 作为分隔符是错误的 semantic 选择。
在你的例子中，看起来整个事情在语义上是一个句子（用逗号猜测），但应该只用三行呈现。在这种情况下，br 非常适合插入 visual 换行符而不添加任何 semantic 含义。
br = 阅读时不要停顿，p = 段落，阅读时适当停顿。
br element只能用于换行"that are actually part of the content"。
此类换行符通常是 in addresses or in poems.
在您的情况下，您似乎只需要换行符是出于布局原因。所以在那里使用 br 元素是不正确的。
您可以使用任何适当的元素并在 CSS (display:block;) 中添加换行符，但是通过使用像 p 或 div 这样的元素，您默认情况下获得此行为以及它也适用于文本浏览器和其他不支持 CSS.
的用户代理的额外好处
<br> 将导致屏幕阅读器稍作停顿。我发现在包含范围内使用 role=text 可以解决这个问题。
<span role="text">The<br>End</span>
一般情况下，屏幕 reader 会在 <br /> 标记处拆分文本，这会使句子听起来很奇怪。
如果您希望屏幕 reader 忽略 <br />，以便它纯粹是展示性的，您可以添加 aria-hidden 属性，如下所示：
<br aria-hidden="true" />
据此 question/answer：Pausing in a screen reader for accessibility 看来在设计一个易于访问的网站时，不应该将 <br /> 用于展示目的。我这里的 accessible 是指它在屏幕上运行良好 reader.
我在网页上有一个页脚。页脚只是三个链接。所以我有：
<div id="footer">
<a href="xxx">xxx</a>,
Email me: <a href="mailto:yyy">yyy</a>,
<a href="zzz">zzz</a>
</div>
我的问题是：
How do I best display the three links on three separate lines?
我应该在前两个 </a> 之后插入一个 <br /> 还是应该将每一行都包含在 <p> ... </p> 中？
以“可访问的方式”完成此操作很重要。我需要验证为 XHTML 1.0 Strict 的代码。
<!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>
您可以包装一个 div 或者您也可以使用 <ul> 标签。这是有效的代码。
Div 是一个块元素，所以它会破坏东西。
也没有错<br />
如果你想在一个不寻常的地方插入一个换行符，而你实际上是指一个换行符，那么就使用一个换行符。
关键是屏幕阅读器会直接阅读 br 标签，因为它没有特别 意思 任何东西。 换行符只是一个视觉指示器，而不是语义指示器。在你 link 的另一个问题中，每一行都应该独立存在，因此 br 作为分隔符是错误的 semantic 选择。
在你的例子中，看起来整个事情在语义上是一个句子（用逗号猜测），但应该只用三行呈现。在这种情况下，br 非常适合插入 visual 换行符而不添加任何 semantic 含义。
br = 阅读时不要停顿，p = 段落，阅读时适当停顿。
br element只能用于换行"that are actually part of the content"。
此类换行符通常是 in addresses or in poems.
在您的情况下，您似乎只需要换行符是出于布局原因。所以在那里使用 br 元素是不正确的。
您可以使用任何适当的元素并在 CSS (display:block;) 中添加换行符，但是通过使用像 p 或 div 这样的元素，您默认情况下获得此行为以及它也适用于文本浏览器和其他不支持 CSS.
<br> 将导致屏幕阅读器稍作停顿。我发现在包含范围内使用 role=text 可以解决这个问题。
<span role="text">The<br>End</span>
一般情况下，屏幕 reader 会在 <br /> 标记处拆分文本，这会使句子听起来很奇怪。
如果您希望屏幕 reader 忽略 <br />，以便它纯粹是展示性的，您可以添加 aria-hidden 属性，如下所示：
<br aria-hidden="true" />