vue中 aria-label 的使用

这个标签主要是在手机的无障碍模式中，使用读屏软件进行文字读取的刚开始只在标签中加入这个属性，却无法生效<div class="bigIndex" :aria-label="`${item.dataType}总流量${item.total}B,剩余${item.useable}B,已用${item.used}B` "></div>之后再添加了一个tabindex="0"的属性

weixin_54009353

2940人浏览 · 2021-10-08 10:33:51

weixin_54009353 · 2021-10-08 10:33:51 发布

这个标签主要是在手机的无障碍模式中，使用读屏软件进行文字读取的

刚开始只在标签中加入这个属性，却无法生效

<div class="bigIndex" :aria-label="`${item.dataType}总流量${item.total}B,剩余${item.useable}B,已用${item.used}B` "></div>

之后再添加了一个tabindex="0"的属性，就可以生效了

<div class="bigIndex" tabindex="0" :aria-label="`${item.dataType}总流量${item.total}B,剩余${item.useable}B,已用${item.used}B` "> </div>

如果不想让读屏软件读出某一段文字或词语，可以给其加上aria-hidden="true"属性

<p aria-hidden="true">不可读文字</p>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^