Javascript 在跨距内时，将按钮视为链接

我有一个文本块，我想呈现一个按钮的方式相同的锚显示。我想使用按钮的原因是因为可访问性和屏幕阅读器。问题是按钮会缠绕到新行，而锚定不会。我希望按钮像锚一样工作

这将在React应用程序中使用

HTML 钮扣

---

按钮本质上是一个矩形对象。不能像文本在段落中通常那样包装矩形对象。如果它太长，无法放在同一条线上，则必须从新线开始，以便在其周围绘制边界框

你说你想使用一个按钮“因为它的可访问性和屏幕阅读器”。你能详细说明一下吗

按钮和定位标记都具有内置的辅助功能。您可以使用键盘（如果您的

有

href

）同时使用tab键和tab键进行选择（除了使用空格键选择按钮外），还可以使用ENTER键选择两者

你应该考虑一下你的“文本块”的目的是什么。作为一个屏幕阅读器用户，如果我在导航到锚定标记时听到“link”，我通常希望如果我选择它，会被带到另一个页面。（屏幕阅读器会告诉我是否是页面内链接）。这就是链接的用途——将你带到另一个页面

如果我听到“按钮”，那么我期望执行一些操作。它可能是添加到购物车或显示一个对话框，以便我可以选择一个文件

所以链接和按钮的模式是不同的。你希望你的“文本块”做什么？表现得像一个链接或按钮？忽略它的显示方式。这可以用CSS修复

---

正如Paulie_D所说，您可以使用

role='button'

或

role='link'

与

组合使用以获得可访问性。只需确保您还有

tabindex=0

，这样用户就可以在

上进行制表，并处理单击、空格和输入事件。

问题是HTML

按钮始终是一个矩形框，因此如果您有多行文本，它就不能像锚一样显示

现在，一个简单的解决方案是使用带有
tabindex
和
角色
属性的
span
元素：

<span role="button" tabindex="0">My button</span>

我的按钮

tabindex
启用键盘导航，并且
role=button
将通知辅助技术此跨度实际上是一个按钮

当然，对于链接，您必须考虑其他WCAG注意事项，如：



提供描述控件用途的链接文本
（因为您不使用默认组件）
您说您想要一个可访问性和屏幕阅读器的按钮，但这并没有说明操作。快速提示，可自行解决可访问性问题：


如果用户要进入新页面（或在页面上定位），请使用

我添加了以下样式（您可以分类
标签
和/或使用您想要的任何样式，我只是将其与默认链接样式相匹配）：

调整您的
，使其具有被
覆盖的简短文本（
aria labelledby
），并确保标签进入选项卡顺序（
tabindex=“0”
）：

按钮文本
很长的文本

从视觉上看，它做了您想要的事情，当您通过屏幕阅读器运行它时，
由于
而可用

不管怎样，我恳求你不要使用
或
嗯……我不完全确定这是可能的。如果你需要一个看起来和行为都像链接的东西，可以使用
来代替，并使用
role=“button”
来实现可访问性。如果@Paulie_D的评论是一个答案，我会投赞成票。因此，我同意他的观点，这在其他方面可能是不可能的，比如保利在上面所建议的。我举的例子是
在继续之前，你必须同意
。如果您粘贴
role=“button”
它仍然显示为
link
。您使用的是什么屏幕阅读器？我只是尝试了一个简单的例子，使用和jaws、nvda和voiceover都将其理解为按钮，而不是链接。
.buttonLink {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  font: 1em "Lato";
  text-decoration: underline;
  color: blue;
  display: inline;
}

.buttonLink:focus {
  outline: none;
}

.linkButton {
  color: blue;
}

<span role="button" tabindex="0">My button</span>

.buttonLink {
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  line-height: 0;
}

label {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

<button id="button" class="buttonLink" aria-labelledby="buttonLabel">button text</button>
<label for="button" tabindex="0" id="buttonLabel">very long text</label>