Web 可访问性 (也称为 a11y) 是指创建可供任何人使用的网站的实践方式——无论是身患某种障碍、通过慢速的网络连接访问、使用老旧或损坏的硬件，还是仅仅是处于不利环境中的人。例如，在视频中添加字幕可以帮助失聪、重听或在嘈杂的环境中听不到手机的用户。同样，请确保文字对比度不要太低，这对低视力用户和那些试图在强光下使用手机的用户都有帮助。
你是否已经准备开始却又无从下手？
可以先看看由万维网联盟 (W3C) 提供的规划和管理 web 可访问性。
#跳过链接
你应该在每个页面的顶部添加一个直接指向主内容区域的链接，这样用户就可以跳过在多个网页上重复的内容。
通常这个链接会放在 App.vue 的顶部，这样它就会是所有页面上的第一个可聚焦元素：
<ul class="skip-links">
<li>
<a href="#main" ref="skipLink">跳到主内容</a>
</li>
</ul>
若想在非聚焦状态下隐藏该链接，可以添加以下样式：
.skipLink {
white-space: nowrap;
margin: 1em auto;
top: 0;
position: fixed;
left: 50%;
margin-left: -72px;
opacity: 0;
}
.skipLink:focus {
opacity: 1;
background-color: white;
padding: .5em;
border: 1px solid black;
}
一旦用户改变路由，请将焦点放回到这个跳过链接。通过用如下方式聚焦 ref 即可实现：
<script>
export default {
watch: {
$route() {
this.$refs.skipLink.focus();
}
}
};
</script>
点击此处实现
阅读关于跳跃到主体内容的链接的文档 |
发表于 2023-12-1 12:18
|