时间戳

首页 > 解决方案 > 具有多个链接的卡片中的制表符

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>

这就是其中一张卡片的样子： 项目卡片截图

感谢您的帮助和建议！

标签： htmlcssaccessibilityweb-accessibility

解决方案

有两种处理卡片的方法。一种是使整个事物可点击，一种是使卡片中的单个项目可点击。目前看来，您正试图同时实现这两者，这是不可能的。（好吧，这是可能的，这只是一个糟糕的主意，并且会给你尝试嵌套超链接的人带来各种头痛）。

鉴于卡片中有两个链接指向不同的地方，我们应该使用选项 2。

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

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

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

您已添加tabindex="0"以使整张卡片能够获得焦点。这没有任何好处（因为您在卡中有多个链接，如前所述）并且是不必要的。

制表位的黄金法则是，只有当它可以执行某个操作时，才能使某些东西具有焦点。没有视力障碍的键盘用户会感谢您没有添加额外的制表位，并且屏幕阅读器用户通过标题、链接部分等进行导航，因此他们不需要您让没有操作的事情变得可聚焦。

2. 链接文字本身应该是有意义的。

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

但是屏幕阅读器用户可以通过链接导航以了解页面/找到他们正在寻找的内容。

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

你有两个选择。

  1. 使链接文本对每个人都具有描述性。您可以将按钮堆叠而不是并排，并制作链接文本“X project Demo”和“View X Project”。
  2. 添加一些视觉上隐藏的文本，使链接对屏幕阅读器用户有意义。

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

进一步链接相关点

另外，因为我们现在希望每个链接都具有焦点，所以您需要删除tabindex="-1".

最后一点，如果您要在新窗口中打开链接，最好表明这一事实。

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

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

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

请注意我如何定义content两次？第一个被所有浏览器识别，第二个使用content: alternative text它为屏幕阅读器添加“（在新窗口中打开）”。

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

图像是否增加了价值？

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

不可能根据给出的示例给出建议，但如果图像纯粹是产品的屏幕截图，那么要么改进描述以解释图像在上下文中显示的内容（所以它描绘的是什么过程），或者只是使其具有装饰性。

您只需将alt属性保留为空字符串即可使图像具有装饰性。但是您仍然必须具有该属性。所以<img alt=""/>没关系，但<img alt />不会。使用alt=""将确保屏幕阅读器忽略图像。

基于建议的最终 HTML（和用于视觉隐藏文本的 CSS）

我在我更改的部分上方添加了评论。

关键部分是用于在视觉上隐藏项目的 CSS（但让屏幕阅读器可以访问它）。

.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: '\29C9';
      content: '\29C9' / " (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>

推荐阅读