Vue3-08 无障碍
文章目录
- 基础
- 跳过连接
- 组织内容
- 标题
- 正确的使用HTML标签
- 更多
基础
Web可访问性（a11y）是指创建可供任何人使用的网站的实践方式，无论身患某种障碍、设备老旧、网速慢、或者身处不利环境的人，都可以访问网站
关于更多a11y的内容可以参考MDN以及掘金的这篇文章。
跳过连接
在页面顶部提供一个返回首页的连接，让用户避免在多网页上反复跳转，可以使用:focus伪类来显示/隐藏这个链接，通过$refs访问DOM元素后执行focus()方法来获取焦点（a元素）
组织内容
可访问性不仅要考虑颜色对比度、字体选择、字体大小和语言，还要考虑应用程序的内容是如何组织的
标题
正确的设置页面的标题，让用户更容易预测每个部分的内容，推荐的访问性实践：
- 按级别顺序嵌套标题：
<h1>→<h6> - 不要在一个章节内跳跃标题的级别
- 使用
<h1>至<h6>来实现标题，而不是通过样式来说实现
正确的使用HTML标签
H5的很多标签是有语义的，例如header、nav等，它可以为屏幕阅读器提供正确的信息，除了正确使用带有语义的HTML标签外，还建议加上容易的role属性，来对不支持H5予以元素的浏览器提供支持
更多
可以参考Vue里面的介绍
a11y很重要，我从来没有真正关心过这部分内容，国内除了一些国民级的应用，恐怕也不会关注这部分内容。很可悲，但是我又无能为力
Vue3-08 无障碍相关推荐
- 开发一个出生年份的下拉选择框供用户选择_关于下拉式菜单，这一篇足够了
下拉菜单主要有两种类型: 1.用于导航的下拉菜单: 2.用于表单的下拉菜单. 在本文中,我们将对以下内容进行介绍: 01 结构剖析 下拉菜单的解剖结构与文本输入字段的解剖结构非常相似. 02 下拉菜单 ...
- vue3小兔鲜商城项目学习笔记+资料分享08
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜 下面是学习笔记 支付模块 路由和组件 任务目标: 完成支付页路由和组件 [外链图片转存 ...
- vue3时间格式转换为yyyy/mm/dd,yyyy-MM-dd,yyyy-MM-dd hh:mm:ss,hh:mm,yyyy-MM-ddThh:mm:ss+08:00
时间格式转换为yyyy/mm/dd export const dateFormat1 = (time = new Date().getTime()) => { //YYYY/MM/DDconst ...
- Vue3 核心技能从入门到难点攻破，看这一篇就够了！
在 Vue2.0 时代,国内大厂的前端开发框架,几乎清一色偏向 React.因为对于业务成熟的公司而言,一个项目,可能会包含很多非侵入式的代码和服务,并不是功能实现了就万事大吉. 但随着 Vue3.0 ...
- vue-cli 将被 create-vue 替代？初始化基于 vite 的 vue3 项目为何如此简单？
大家好,我是若川.最近组织了源码共读活动<1个月,200+人,一起读了4周源码>,已经有超50+人提交了笔记,群里已经有超1500人,感兴趣的可以点此链接扫码加我微信 ruochuan12 ...
- 尚硅谷 VUE 尚品汇项目实战问题解决方式整理(Vue3 版)
教学视频:https://www.bilibili.com/video/BV1Vf4y1T7bw 不回要资料的评论,资料在视频底下评论有些仓库里面有. 试图自行解决问题也是程序员必备技能之一,多做尝试 ...
- 这个vue3的应用框架你学习了吗？
关注并将「趣谈前端」设为星标 每早08:30按时推送技术干货/优秀开源/技术思维 ❝ 前言:前段时间开始落地基于vue3开发的应用,于是在社区留意vue3周边的一些开源项目.无意间看到微众银行WeBa ...
- vue3+ts实现视频根据时间轴截取，并可以通过传入截取起止时间进行当前剪辑的回显
公司提出想做一个视频编辑功能,每次只裁剪一段即可,UI同时也想实现时间轴为关键帧图片的效果,从网上也没找到合适的组件,简单思考后觉得并不难,决定自己封装一个吧.组件涉及到的只有vue3+ts+scss ...
- java+vue3实现生成、验证图形验证码，和手机短信验证码
一.效果图 二.实现生成图形验证码.校验验证码 1.实现后端接口 ①控制层代码 /*** 生成图片验证码* time用于保证每次可以刷新图片验证码*/@GetMapping("authCod ...
- vue3.0 引入i18n 做国际化 - 做动态语言切换
说明 适合 vue2.0版本的官方链接如下: Vue I18nVue I18n 是 Vue.js 的国际化插件https://kazupon.github.io/vue-i18n/zh/ ...
最新文章
- 这5个 AI 用例，转变了传统商务沟通
- GNS3中配置PIX enable ×××
- 下载数据CityEngine示例数据（Tutorial）配套视频教程（英文）
- Fluent NHibernate关系映射
- c语言中结构体类型只有,C语言中main()函数不要返回结构体类型（求助）
- MySQL不能启动 Can't start server : Bind on unix socket: Permission denied
- ChinaMM竞赛：VideoNet视频内容识别-总奖池10W人民币
- Hadoop1.x中HDFS工作原理
- inventor中齿条怎么画_渐开线齿轮是怎么回事，图解6种齿轮加工工艺
- Linux 配置vim编辑器
- Postman接口测试-安装与入门
- 《Unity虚拟现实开发实战》——第1章，第1.1节虚拟现实对你来说意味着什么
- 2015.11.18——Lua中文教程
- Netty文章目录汇总
- svn拉取文件失败_TortoiseSVN常见的错误信息与解决方法
- 有道词典(android)v4.3.3去广告清爽版+离线词,有道词典4.3.3安
- 计算机基础知识面试题集合（包含计网OSI、TCP/IP、HTTP、TCP、UDP、三次握手、四次挥手、OS进程线程、死锁，常见数据结构及排序，Linux常用命令、数据库基础等。）
- 计算机硬盘检测不到,硬盘检测不到怎么解决
- python正态分布函数_数学之美_正态分布(Python代码)
- SecureCRT 软件完全汉化