出于可访问性目的，内部导航栏选项卡是否被视为链接或按钮，它们需要哪些伪状态？答案

【问题标题】：Are internal navbar tabs considered links or buttons for accessibility purposes and what pseudo states do they require?出于可访问性目的，内部导航栏选项卡是否被视为链接或按钮，它们需要哪些伪状态？
【发布时间】：2019-07-13 03:23:24
【问题描述】：

我有一个网站，它在页面顶部有一个导航栏，可以在整个网站的大部分区域之间进行切换。对于这些大的部分，我也有一个侧导航栏。侧导航栏相应地具有可以单击的选项卡，这些选项卡可以在窗口中显示不同类型的内容。单击每个侧导航栏选项卡时，页面当前所在的主导航栏选项卡保持静态。

我的问题是，出于可访问性目的，是否应将侧导航栏选项卡视为带有 a 标签或按钮的链接？我的理解是，在这两种情况下，按钮和链接都需要在悬停时更改颜色，但是侧导航栏选项卡是否还需要其他伪状态，例如下划线或边框？

我非常感谢任何见解！

【问题讨论】：

标签： javascript html css button accessibility

【解决方案1】：

交互式内容应具有可见的焦点轮廓，最好是悬停状态。但是由于您不会将这些样式设置为链接，而是作为选项卡，我认为不需要下划线或类似的样式。该规则只是为了让链接在文本块中脱颖而出，但我不希望您的标签容易与非交互式文本内容混淆。

如果选项卡更改了 URL，它们应该是链接（或具有 role=“link”）。如果他们没有，他们可以是你喜欢的任何人，但请确保将它们设为role=“tab” 与role=“tabset” 一起在容器中，以便将大多数人包含在您的解决方案中。无论如何，请确保它们可与键盘一起使用。 :-)

【讨论】：

只有在他们更改了 url 时才需要在悬停时加下划线？
只有当一个可点击的项目作为文本出现在一个常规文本块中时，它才应该有额外的样式——比如下划线——但不仅仅是在悬停时。能够将链接/文本按钮与其余文本区分开来很重要，如果需要悬停来执行此操作，您怎么知道悬停这段文本？