在具有多个链接的卡片中停止制表

Question

我是一名网络开发专业的学生，正在从事一个作品集项目。目前在这个项目上，我正在解决通过提供项目信息和链接的卡片进行制表的挑战：一个是现场演示，一个是项目 Github Repo。我想知道在没有 a) 太多制表位的情况下浏览卡片列表的最佳做法是什么，以及 b) 视觉障碍用户不必考虑如何在这些停靠点之间导航信息。如果可能的话，我不想涉及JavaScript。

此外，我确实使用屏幕 reader (NVDA) 来测试功能。

为了代码的视觉效果，这是我目前拥有的包含两个列表元素的基本代码，有意没有 class 名称：

<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>

其中一张卡片是这样的： Project Card Screenshot

感谢您的帮助和建议！

Answer 1

有两种处理卡片的方法。一种是让整个事物都可以点击，一种是让卡片中的个别项目可以点击。目前看来您正在尝试同时实现这两个目标，这是不可能的。（好吧，这是可能的，这只是一个糟糕的想法，会给你尝试嵌套 hyperlinks 的人带来各种头痛）。

鉴于卡片中有两个 link 去不同的地方，我们应该选择选项 2。

我将重点介绍您可以根据卡片中有两个 link 提供的 HTML 进行的一些改进。

您的 HTML 已经很不错了，只是一些小问题。

1。不要让整张卡片成为一个制表位。

你添加了tabindex="0"，让整张卡片都能获得焦点。这没有任何好处（因为如前所述，您的卡中有多个 link）并且没有必要。

制表位的黄金法则是只有在可以执行某项操作时才能使它成为焦点。没有视力障碍的键盘用户会感谢您不添加额外的制表位和屏幕 reader 用户通过标题、link 部分等进行导航，因此他们不需要您让那些不重要的东西变得可聚焦有动作。

2。 Link 文本本身应该有意义。

对于有视力的用户，“查看演示”和“查看代码”没有问题，因为他们可以在页面上直观地看到关系。

但屏幕 reader 用户可以通过 link 导航来感受页面/找到他们正在寻找的内容。

对于屏幕 reader 用户“查看演示”作为描述没有用。

你有两个选择。

使 link 文本对每个人都具有描述性。您可以使按钮堆叠而不是并排放置，并使 link 文本为“X 项目演示”和“查看 X 项目”。
添加一些视觉上隐藏的文本，使 link 对屏幕 reader 用户有意义。

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

进一步link个相关点

另外，因为 我们现在希望每个 link 都可以聚焦，所以您需要删除 tabindex="-1"。

最后一点，如果您要在新的 window 中打开 link，最好指明这一点。

我认为可以接受的一件事（因为在每个 link 之后写“（opens in new window）”是不实际的）是有一个小图标表明它打开一个新的 window.

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

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

注意我是如何定义 content 两次的吗？第一个被所有浏览器识别，第二个使用 content: alternative text 以便它为屏幕 readers 添加“（在新 window 中打开）”。

此外，我选择的角色并未作为标准达成一致，但它适用于大多数用途。

图片是否增值？

这只是提请注意的事情。如果图像没有为页面上的信息增加任何价值，则它应该是装饰性的。我所说的价值是指图像中的信息不会添加任何额外信息。

无法根据给出的示例提供建议，但如果图像纯粹是产品的屏幕截图，则要么改进描述以解释图像在上下文中显示的内容（因此它描述的是什么过程），要么只是制作装饰性的。

您只需将 alt 属性保留为空字符串即可使图像具有装饰性。 但您必须仍然拥有属性。所以 <img alt=""/> 可以，但 <img alt /> 就不行。使用 alt="" 将确保屏幕 reader 忽略图像。

基于建议的最终 HTML（CSS 用于 visually-hidden 文本）

我在修改的部分上面添加了评论。

关键部分是 CSS to visually hide an item（但让屏幕可以访问 readers）。

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

/****adds a nice little icon to show a new window ****/
a[target="_blank"]::after {
      content: 'C9';
      content: 'C9' / " (opens in new window)";
      margin: 0 3px 0 5px;
    }

<ul>
  <!-- removed the tabindex -->
  <li>
    <h3>Project Name</h3>
    <img src="https://via.placeholder.com/744.png" alt="Preview Image of X project">
    <div>
      <p>
        Project Description
      </p>
      <div>
        <!-- added a visually-hidden span to make the link text make sense on its own, also removed the `tabindex="-1"` to make the links focusable--> 
        <a href="{Link to live page}" target="_blank">View Demo <span class="visually-hidden">for project X</span></a>
        <a href="{Link to Github Repo}" target="_blank">View Code  <span class="visually-hidden">for project X</span></a>
      </div>
    </div>
  </li>
  <li>
    <h3>Project Name</h3>
    <img src="https://via.placeholder.com/744.png" alt="Preview Image of Y project">
    <div>
      <p>
        Project Description
      </p>
      <div>
        <a href="{Link to live page}" target="_blank">View Demo <span class="visually-hidden">for project Y</span></a>
        <a href="{Link to Github Repo}" target="_blank">View Code <span class="visually-hidden">for project Y</span></a>
      </div>
    </div>
  </li>
</ul>

在具有多个链接的卡片中停止制表

Tab-Stopping in a Card with Multiple Links

html

css

accessibility

web-accessibility

1。不要让整张卡片成为一个制表位。

2。 Link 文本本身应该有意义。

进一步link个相关点

图片是否增值？

基于建议的最终 HTML（CSS 用于 visually-hidden 文本）