如何解决带有多个链接的卡片中的制表符停止 更多链接相关点
我是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”没有问题,因为他们可以在页面上直观地看到这种关系。
但是,屏幕阅读器用户可以通过链接进行导航,以了解页面/找到所需内容。
对于屏幕阅读器用户,“查看演示”作为描述是没有用的。
您有两个选择。
- 使链接文本具有针对所有人的描述性。您可以将按钮堆叠在一起而不是并排放置,并使链接文本为“ X project Demo”和“ View X Project”。
- 添加一些视觉上隐藏的文本,使链接对于屏幕阅读器用户有意义。
如果可以更改设计以容纳额外的文字,我会选择第一个选项。
更多链接相关点
此外,由于我们现在希望每个链接都可聚焦,因此您需要删除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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。