html5 无障碍,[Vue 3] 教程 – 无障碍 – 基础
# 基础
Web 可访问性 (也称为 a11y) 是指创建可供任何人使用的网站的实践方式——无论是身患某种障碍、通过慢速的网络连接访问、使用老旧或损坏的硬件,还是仅仅是处于不利环境中的人。例如,在视频中添加字幕可以帮助失聪、重听或在嘈杂的环境中听不到手机的用户。同样,请确保文字对比度不要太低,这对低视力用户和那些试图在强光下使用手机的用户都有帮助。
你是否已经准备开始却又无从下手?
可以先看看由万维网联盟 (W3C) 提供的规划和管理 web 可访问性。
# 跳过链接
你应该在每个页面的顶部添加一个直接指向主内容区域的链接,这样用户就可以跳过在多个网页上重复的内容。
通常这个链接会放在 App.vue 的顶部,这样它就会是所有页面上的第一个可聚焦元素:
跳到主内容
若想在非聚焦状态下隐藏该链接,可以添加以下样式:
.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 即可实现:
watch: {
$route() {
this.$refs.skipLink.focus();
}
}
};
See the Pen Skip to Main
by Maria (@mlama007)
on CodePen.
阅读关于跳跃到主体内容的链接的文档
# 组织内容
可访问性最重要的部分之一是确保设计本身是可访问的。设计不仅要考虑颜色对比度、字体选择、文本大小和语言,还要考虑应用程序中内容的结构。
# 标题
用户可以通过标题在应用程序中进行导航。为应用程序的每个部分设置描述性标题可以让用户更容易地预测每个部分的内容。说到标题,有几个推荐的可访问性实践:
按级别顺序嵌套标题:
–
不要在一个章节内跳跃标题的级别
使用实际的标题标记,而不是通过对文本设置样式以提供视觉上的标题
关于标题可进一步阅读
Main title
Section Title
Section Subtitle
Section Title
Section Subtitle
Section Subtitle
# 地标
地标 (landmark) 会为应用中的章节提供访问规划。依赖辅助技术的用户可以跳过内容直接导航到应用程序的每个部分。你可以使用 ARIA role 帮助你实现这个目标。
HTML
ARIA Role
地标的目的
header
role=”banner”
主标题:页面的标题
nav
role=”navigation”
适合用作文档或相关文档导航的链接集合
main
role=”main”
文档的主体或中心内容
footer
role=”contentinfo”
关于父级文档的信息:脚注/版权/隐私声明链接
aside
role=”complementary”
用来支持主内容,同时其自身的内容是相对独立且有意义的
无对应元素
role=”search”
该章节包含整个应用的搜索功能
form
role=”form”
表单相关元素的集合
section
role=”region”
相关的且用户可能会导航到的内容。必须为该元素提供 label
Tip:
在使用地标 HTML 元素时,建议加上冗余的地标 role attribute,以最大限度地与传统不支持 HTML5 语义元素的浏览器兼容。
关于地标可进一步阅读
html5 无障碍,[Vue 3] 教程 – 无障碍 – 基础相关推荐
- Vue教程_基础(一)
目录 章节 地址 Vue教程_tips https://blog.csdn.net/weixin_46349544/article/details/124082287 Vue教程_基础(一) http ...
- 视频教程-新React+VUE前端教程入门到精通-Vue
新React+VUE前端教程入门到精通 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开发项目.百余客户, ...
- Vue _ 教程版 02 指令
目录 目标 一.模板语法 1.1.插值表达式 1.2.指令 1-2-1. v-text 指令 1-2-2. v-html 指令 二.常用指令 2.1.v-show 指令 2.2.v-if 指令 2.3 ...
- 视频教程-最新完整VUE前端教程从入门到精通,纯干货企业级项目实战-Vue
最新完整VUE前端教程从入门到精通,纯干货企业级项目实战 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开 ...
- 《HTML5与CSS3实例教程》
<HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...
- HTML5游戏开发案例教程
学习本套HTML5游戏案例开发教程需要您有一定的HTML5.JS基础,如果您还没有学过HTML5和JS请您查看本店相关教程.如果您已经具备一定的开发基础,这些教程将有助于您快速入门HTML5游戏开发. ...
- 视频教程-20年Nodejs教程零基础入门到项目实战前端视频教程-Node.js
20年Nodejs教程零基础入门到项目实战前端视频教程 7年的开发架构经验,曾就职于国内一线互联网公司,开发工程师,现在是某创业公司技术负责人, 擅长语言有node/java/python,专注于服务 ...
- HTML5+CSS3网站设计教程 (张晓景,胡克) [iso]
<HTML5+CSS3网站设计教程>系统地讲解了CSS的基础理论和实际运用技术,并结合多个案例讲解了采用CSS与层布局相结合制作网页的方法,在详细讲解各个案例的制作中,不仅介绍了CSS样式 ...
- JavaScript - Vue经典教程系列-李游Leo-专题视频课程
JavaScript - Vue经典教程系列-1114人已学习 课程介绍 Vue.JS 是目前火的前端框架之一,是一个构建数据驱动的 web 界面的渐进式框架. Vue.JS 的目标是 ...
最新文章
- 【zabbix学习笔记之二】部署zabbix-server端
- C++ BigInt模板手打
- laravel+vue.js的学习以及为什么浏览器中要有井号“#”
- 30分钟掌握 C#6
- bzoj1853: [Scoi2010]幸运数字 dp+容斥原理
- 包邮送几本Python和R语言的数据分析挖掘书籍
- 卸载Office 16 Click-to-Run Extensibility Component详细步骤
- 重装win10系统(纯净win10系统)
- Kali利用metasploit 生成后门程序,操作目标主机cmd
- 程序员需要了解的先秦文学
- Wireshark malformed packet
- ubuntu修改u盘权限_手把手教你使用U盘安装Ubuntu系统
- 双向数据绑定原理(三种实现方式)
- 【技巧】Python找不到指定的模块可能需要安装VC_redist(微软公司出的C++库)
- (15)tensorflow全连接层的张量实现
- Phoenix 技术分享
- dns向服务器没有响应,dns服务器没有响应
- wordpress网站通过17ce测试加载速度,一片红怎么解决?
- 人大金仓应邀参加第三届全国水力学与水利信息大会
- LoRa无线技术与LoRaWAN网关模块的区别