带有多个链接的卡片中的制表符停止 更多链接相关点

编程问答 2022-06-11

问题描述

我是Web开发的学生，从事项目组合项目。目前，在这个项目上，我正在解决通过卡向选项卡提供标签的挑战，这些卡通过链接提供项目信息：一个到实时演示，另一个到项目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>

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

感谢您的协助和建议！

解决方法

有两种处理卡的方法。一种是使整个事物都可单击，另一种是使卡中的单个项目可单击。目前看来，您正在尝试实现这两个目标。 （好的，这是一个可怕的主意，会让您尝试嵌套超链接的人们感到头疼）。

鉴于卡片中有两个链接分别指向不同的地方，因此我们应该选择选项2。

我将重点介绍基于卡中具有两个链接而提供的HTML可以进行的一些改进。

您的HTML已经相当不错了，仅需注意几点。

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

您已添加tabindex="0"，以使整张卡都能获得焦点。这没有任何好处（由于如上所述卡中有多个链接），因此是不必要的。

制表位的黄金法则是只有在可以执行某项操作时，它才能变得可聚焦。没有视力障碍的键盘用户将感谢您不要添加额外的制表位，并且屏幕阅读器用户可以通过标题，链接部分等进行导航，因此他们不需要您将没有操作的内容集中起来。

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

对于有视力的用户，“ view Demo”和“ View Code”没有问题，因为他们可以在页面上直观地看到这种关系。

但是，屏幕阅读器用户可以通过链接进行导航，以了解页面/找到所需内容。

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

您有两个选择。

  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 to visually hide an item（但可供屏幕阅读器访问）。

.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); /*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>

accessibilityhtmlweb-accessibility