使用 标签和可访问性

Question

使用 标签和可访问性

htmlaccessibilityline-breaksxhtml-1.0-strict

6

从这个问题/答案中：屏幕阅读器的暂停功能，似乎在设计一个可访问的网站时，不应该使用 来进行呈现。在此处，“可访问”意味着它可以与屏幕阅读器良好地配合使用。

我在网页上有一个页脚。页脚只有三个链接。所以我有：

<div id="footer">
  <a href="xxx">xxx</a>,
  Email me: <a href="mailto:yyy">yyy</a>, 
  <a href="zzz">zzz</a>
</div>

我的问题是：

如何在三行上最佳显示三个链接？

我应该在前两个</a>后插入 ，还是应该将每行包含在 ... 中？

重要的是以“可访问”的方式完成此操作。我需要使代码符合XHTML 1.0 Strict的验证。

- Thomas

@AlexPavlov：不，为什么？ - Thomas

1

嘿@Thomas，你要找的是块级元素和内联元素之间的区别。简而言之，<a>标签是内联元素，会显示在同一行上。请查看以下链接以获取更多信息。http://www.w3schools.com/html/html_blocks.asp 现在，为了解决你的问题，你可以简单地将锚标签包装在块级元素中（例如）。 - Josh Salazar

2

你的问题好像已经在那个答案中得到了回答，不是吗？“你特别想要每一行都分开，所以你应该把它们放在包装块级标签中。你可以将每一行都用p或div标签包裹起来，这样屏幕阅读器就会正确地将它们分开。” - deceze

1

我认为使用标签是最好的选择。这样，如果需要，您可以为每个段落添加不同的CSS和边距/填充。我认为在此处使用 标签是语义上错误的，但我刚刚读到了相关内容，所以我可能是错的。 - Cagatay Ulubay

1

我会建议你将.my-anchor-tag-class {margin-bottom: 5px;}这个代码放在你的样式表里，并将其应用在你想要使用的所有<a>标签上，例如<a class="my-anchor-tag-class">。 - classicalConditioning

显示剩余7条评论

5个回答

8

通常情况下，屏幕阅读器会在   标签处分割文本，这可能会使句子听起来很奇怪。

如果您希望屏幕阅读器忽略  ，以使其纯粹成为表现形式，您可以添加 aria-hidden 属性，如下所示：

<br aria-hidden="true" />

- rooby

6

br元素只能用于“实际上是内容的一部分”的换行。

这样的换行通常出现在地址或诗歌中。

在您的情况下，您似乎只需要换行来进行布局。因此，在那里使用br元素是不正确的。

您可以使用任何适当的元素，并在CSS中添加换行符（display:block;），但通过使用像p或div这样的元素，您可以默认获得此行为，并获得额外的好处，即它也适用于不支持CSS的文本浏览器和其他用户代理。

- unor

2

 会导致屏幕阅读器产生小的停顿。我发现在包含的span中使用role=text可以解决这个问题。

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

- Davorama

0

<!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 是块级元素，所以它会破坏布局。

此外，  也没有问题。

如果你想在一个不寻常的地方插入换行符，并且你确实需要一个换行符，那么请使用换行符。

- Rahman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- deceze · Accepted Answer

重点在于，屏幕阅读器会忽略 br 标签，因为对它来说这个标签并没有什么特殊的语义意义。换行符只是一个视觉上的指示，而不是语义上的指示。在你提供的另一个链接中，每一行都应该能够独立地呈现，因此使用 br 作为分隔符是错误的语义选择。

在你的情况下，从语义上看，整个内容似乎是一个句子（通过逗号猜测），但应该只是以三行呈现。在这种情况下，br 完全适合插入一个视觉上的换行符，而不添加任何语义意义。 br = 无需停顿阅读，p = 段落时应适当停顿阅读。

使用 <br /> 标签和可访问性