Html 选项卡在具有多个链接的卡中停止

我是一名网络开发专业的学生，从事一个投资组合项目。目前，在这个项目中，我正在解决一个难题，即通过提供项目信息和链接的卡片进行切换：一个链接到实时演示，另一个链接到Github Repo项目。我想知道，在没有a）太多制表位和b）视觉障碍用户不必考虑如何在这些制表位之间导航信息的情况下，浏览卡片列表的最佳做法是什么。如果可能的话，我不想涉及JavaScript

此外，我使用屏幕阅读器（NVDA）来测试功能

以下是我目前拥有的基本代码，其中包含两个列表元素，以便于代码的视觉效果，没有故意使用类名：

<ul>
  <li tabindex="0">
    <h3>Project Name</h3>
    <img src="https://via.placeholder.com/744.png" alt="Preview Image of X project">
    <div>
      <p>
        Project Description
      </p>
      <div>
        <a href="{Link to live page}" target="_blank" tabindex="-1">View Demo</a>
        <a href="{Link to Github Repo}" target="_blank" tabindex="-1">View Code</a>
      </div>
    </div>
  </li>
  <li tabindex="0">
    <h3>Project Name</h3>
    <img src="https://via.placeholder.com/744.png" alt="Preview Image of X project">
    <div>
      <p>
        Project Description
      </p>
      <div>
        <a href="{Link to live page}" target="_blank" tabindex="-1">View Demo</a>
        <a href="{Link to Github Repo}" target="_blank" tabindex="-1">View Code</a>
      </div>
    </div>
  </li>
</ul>

项目名称

项目说明



项目名称

项目说明

这是其中一张牌的样子：

---

感谢您的帮助和建议

处理卡片有两种方法。一个是让整个东西都可以点击，另一个是让卡片中的单个项目可以点击。目前看来，你正在努力实现这两个目标，这是不可能的。（好吧，这是可能的，这只是一个糟糕的想法，如果你尝试嵌套超链接，会给人们带来各种各样的麻烦）

鉴于你有两个卡内的链接去不同的地方，我们应该选择2

我将重点介绍在卡片中有两个链接的基础上，您可以根据提供的HTML进行的一些改进

你的HTML已经相当不错了，只是有几个小点

1.不要让整张卡片成为一个制表位。 您已经添加了

tabindex=“0”

，以使整个卡能够接收焦点。这没有任何好处（因为您在卡中有多个链接，如前所述），而且是不必要的

制表符停止的黄金法则是，只有当某个东西可以执行某个动作时，才能使它成为焦点。没有视力障碍的键盘用户将感谢您没有添加额外的制表位，屏幕阅读器用户通过标题、链接部分等进行导航。因此，他们不需要您将没有动作的内容聚焦

2.链接文本本身应该有意义。 对于有视力的用户，“查看演示”和“查看代码”没有问题，因为他们可以在页面上直观地看到关系

但是屏幕阅读器用户可以通过链接导航，以获得对页面的感觉/找到他们正在寻找的内容

对于屏幕阅读器用户，“查看演示”作为描述是无用的

你有两个选择

使链接文本对每个人都具有描述性。您可以将按钮堆叠起来，而不是并排放置，并生成链接文本“X项目演示”和“查看X项目”

添加一些视觉隐藏文本，使链接对屏幕阅读器用户有意义

如果您可以更改设计以适应额外的文本，我会选择第一个选项

进一步联系相关要点 另外，由于我们现在希望每个链接都是可聚焦的，因此您需要删除

tabindex=“-1”

最后一点，如果你在一个新窗口中打开链接，最好指出这一事实

我认为有一件事是可以接受的（因为在每个链接之后写“（在新窗口中打开）”是不实用的），那就是有一个小图标指示它在新窗口中打开

通过使用一些CSS技巧，我们可以使流程自动化

a[target="_blank"]::after {
  content: '\29C9';
  content: '\29C9' / " (opens in new window)";
  margin: 0 3px 0 5px;
}

注意我如何定义

内容两次？第一个是所有浏览器都能识别的，第二个使用它，以便为屏幕阅读器添加“（在新窗口中打开）”

此外，我选择的角色并没有作为一个标准达成一致，但它适用于大多数目的

图像是否增加了价值？
这正是值得注意的。如果图像没有给页面上的信息增加任何价值，那么它应该是装饰性的。我所说的值是指图像中的信息不会添加任何额外信息

不可能根据给出的示例给出建议，但如果图像纯粹是产品的屏幕截图，则要么改进描述以解释图像在上下文中显示的内容（因此描述的是什么过程），要么只是将其装饰

只需将
alt
属性保留为空字符串，即可使图像具有装饰性但您必须仍然具有该属性。所以


项目说明



项目名称

项目说明


处理卡有两种方法。一个是让整个东西都可以点击，另一个是让卡片中的单个项目可以点击。目前看来，你正在努力实现这两个目标，这是不可能的。（好吧，这是可能的，这只是一个糟糕的想法，如果你尝试嵌套超链接，会给人们带来各种各样的麻烦）

鉴于你有两个卡内的链接去不同的地方，我们应该选择2

我将重点介绍在卡片中有两个链接的基础上，您可以根据提供的HTML进行的一些改进

你的HTML已经相当不错了，只是有几个小点

1.不要让整张卡片成为一个制表位。
您已经添加了
tabindex=“0”
，以使整个卡能够接收焦点。这没有任何好处（因为您在卡中有多个链接，如前所述），而且是不必要的

制表符停止的黄金法则是，只有当某个东西可以执行某个动作时，才能使它成为焦点。键槽