关于html之aria-hidden

最新推荐文章于 2024-05-17 13:19:50 发布
最新推荐文章于 2024-05-17 13:19:50 发布
阅读量1.1k 收藏
点赞数
文章标签： html 前端 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46042650/article/details/131522732
版权

添加aria-hidden="true"将阻止元素包含在辅助功能树中(类似于DOM),以便屏幕阅读器用户在遍历辅助功能树时将无法找到链接(通常使用向上/向下箭头键完成).

ARIA属性会影响屏幕阅读器访问元素的方式.它不提供任何行为.请查询"咏叹调使用规则"链接,请进一步了解" 添加角色不起作用的内容 ".

因此,虽然加aria-hidden="true" 不避免的元件将被插入的辅助树,它并没有删除从普通键盘Tab键顺序的元素.您仍然可以选择链接并选择它.您必须添加tabindex="-1"到链接以防止标签.

如果代码仅用于测试目的,但希望您没有从屏幕阅读器用户隐藏交互式元素(如链接)的情况. aria-hidden应使用从屏幕阅读器隐藏非重要的东西(装饰事情),或者如果你是视觉上暂时隐瞒了什么,也想从屏幕阅读器隐藏的东西,例如,如果你有一个展开/折叠的事情,当元素为折叠后,您通过将内容移出屏幕(而不是使用display:none)来直观地隐藏内容,所以此时aria-hidden="true"设置内容派上了用场.

香菜最下饭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
aria-hidden="true"
郭宝的博客
10-24 4313
背景： <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName" /> </svg>
在网页中隐藏元素
02-23 688
在平时的开发工作中，有时会有隐藏元素的需求。比如，一个按钮，需要在桌面端隐藏，在手机端显示；一个导航栏，需要在手机端隐藏，在桌面端显示。“隐藏”不是字面上展示的这样简单，它还包含几层意思： 元素完全从文档流中移除的隐藏。 元素仅仅是视觉上的隐藏，使用像屏幕阅读器（screen reader）这样的辅助技术（assistive technology，简称“AT”）依然是能访问的。 元素在视觉上可见，...
data-toggle与data-target是什么作用
热门推荐
d295968572的博客
02-23 11万+
Bootstrap为这些a之类元素都绑定上了事件，而终止了链接默认行为。 data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标，一起使用就是代表data-target所指的元素以data-toggle指定的形式显示 data-target 与data-toggle 还有data-spy 文档总是给
购物车商品累加结算效果.zip
07-11
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"> <title>vue购物车商品累加结算代码  </title> <!--css类引用--> <link rel="stylesheet" href="js/layui/css/layui.css?3.1.64" /> <link rel="stylesheet" href="js/eleme-ui/index.css?3.1.64" /> <link rel="stylesheet" href="css/ShoppingCart.css?3.1.64" /> </head> <body> <!--主要内容--> <div class="row " id="myVue" v-cloak> <div class="col-lg-10 col-lg-offset-1" > <div class="layui-form"> <table class="ShopCartTable layui-table"> <thead> <tr> <th class="selectLeft"> <template> <el-checkbox  @change="checkedAllBtn(checkedAll)" v-model="checkedAll">全选</el-checkbox> </template> <span class="selectLeftGoods">商品或服务名称</span> </th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(tabledatas,index) in shopTableDatas"> <td  class="selectLeft"> <template> <el-checkbox @change="checkedRadioBtn(tabledatas)" v-model="tabledatas.checked"></el-checkbox> </template> <span class="goodName"> <img /> </span> <span class="goodName goodsName"> <h2 class="goodname" v-text="tabledatas.name"></h2> <p class="goodGary"> <span>供应商：</span> <span v-text="tabledatas.supplier"></span> </p> <p class="goodGary"> <span>发货地：</span> <span v-text="tabledatas.ConPlace"></span> </p> </span> </td> <td class="danPrice">{{tabledatas.price | moneyFiler}}</td> <td> <i @click="goodNum(tabledatas,-1)" class="fa  deleteBtn" aria-hidden="true">-</i> <input v-model="tabledatas.num" type="text" class="form-control numInput" aria-label="..."> <i @click="goodNum(tabledatas,1)" class="fa  addBtn" aria-hidden="true"> </i> </td> <td> <p class="totalPrice">{{tabledatas.price*tabledatas.num | moneyFiler}}</p> </td> <td class="gongneng"> <p class="deletegoods" @click="alertRadio(index)">删除</p> <p @click="alertmovesSavegoods(index)">移到我的收藏</p> <template v-if="tabledatas.saveandremove"> <p @click="tabledatas.saveandremove = false">加入收藏</p> </template> <template v-else> <p :class="{'saveCheck':!tabledatas.saveandremove}" @click="tabledatas.saveandremove = true">取消收藏</p> </template> </td> </tr> </tbody> </table> <div class="row tablefooter"> <template> <el-checkbox @change="checkedAllBtn(checkedAll)" v-model="checkedAll">全选</el-checkbox> </template> <span class="removeMuch" @click="alertMuch">删除选中的商品或服务</span> <span class="removeSaves" @click="alertMuchgoods">移到我的收藏</span> <span class="servicenum">已选择<span class="goodsNum">{{goodsNum}}</span>件商品<span class="goodsNum">{{serviceNum}}</span>项服务</span> <span class="totalclassPoin">总价：<span class="totalMoneyClass">{{totalMoney | moneyFiler}}</span></span> <span @click="saveData" class="SettlementBtn">去结算</span> </div> </div> </div> </div> <!--js类引用--> [removed][removed] [removed][removed] [removed][removed] <div 0; font:normal 14px/24px 'MicroSoft YaHei';">  </div> </body> </html> 这是一个j购物车商品累加结算效果，需要的朋友可以直接下载使用，更多特效代码尽在PHP中文网。
css-styleguide:Airbnb CSS Sass样式指南（德语）
05-19
Airbnb CSS / Sass风格指南（德语） CSS和Sass的最明智的方法 目录 变数 混合蛋白 扩展指令 嵌套选择器 笔译 执照 术语 规则声明 “规则声明”是具有一组相关属性的选择器（或选择器组）的名称。 这是一个例子： . listing { font-size : 18 px ; line-height : 1.2 ; } 选择器 在规则声明中，``选择器''是用于确定DOM树中哪些元素由定义的属性设置样式的值。 选择器可以匹配HTML元素以及元素的类，ID或属性之一。 以下是选择器的一些示例： . my-element-class { /* ... */ } [ aria-hidden ] { /* ... */ } 特性 最后，属性为规则声明的选定元素赋予其样式。 属性是键值对，规则声明可以包含一个或多个属性声明。 属性声明如下所示：
CSS中aria-hidden=true的作用
qq_54334713的博客
10-16 5959
aria-hidden=true的作用
HTML中的aria-hidden属性
Coder Ben's Writing
10-30 6万+
HTML中的aria-hidden属性 我们常常看到这样的html， &amp;amp;amp;amp;lt;div id=&amp;amp;amp;quot;modal&amp;amp;amp;quot; class=&amp;amp;amp;quot;modal&amp;amp;amp;quot; aria-hidden=&amp;amp;amp;quot;true&amp;amp;amp;quot;&amp;amp;amp;amp;gt;
aria-hidden="true"是什么意思 aria代表什么
Hunter的博客
09-12 2万+
      现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。        如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过...
关于无障碍适配的笔记
CoffeeAndIce的博客
07-06 2194
针对无障碍兼容性的笔记，针对wcg2.0/2.1
隐藏元素的方法总结
forward_xx的博客
09-18 593
本文从完全隐藏、视觉上隐藏、语义上隐藏三个角度来对CSS隐藏元素方法进行了总结，并分析比较opacity: 0、visibility: hidden、display: none 的区别和优劣。
Tec-Blog:使用html5和css3创建的网站，无需使用框架，完全静态的网站
05-04
这只是本站点的前端部分，我参加了一门课程，以发展的基本知识来训练我的技能。“ aria-hidden =“> </ i>
glossary:您网站的词汇表面板，可帮助读者理解术语
05-14
词汇表面板 关于 在您的站点中添加一个简单的词汇表面板，以帮助您的用户理解术语术语。 如和DOI的。 例如： 单击标题中的Glossary图标... div id =" glossary " aria-describedby =" glossary-title " aria-hidden =
css:CSSLESS样式指南
05-20
Celery CSS / LESS样式指南从Airbnb修改而来的一种最合理... */}[ aria-hidden ] { /* ... */} 特性最后，属性是赋予规则声明的选定元素其样式的要素。 属性是键值对，规则声明可以包含一个或多个属性声明。 属性声明如
aria
程序猿小白的博客
12-19 744
aria-expanded    表示展开状态，默认为underfined，表示当前展开状态位置，可以设置值：true：表示元素是展开的；flase表示元素不是展开的。 aria-haspopup    true表示点击的时候回出现菜单或者浮动元素；false表示没有pop-up效果。 aria-hidden         true表示元素隐藏不可见，false表示元素可见。...
aria-hidden读屏
weixin_33859231的博客
08-04 500
图标的可访问性现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-onl...
em标签和i标签区别
_江屿_
09-13 3995
em标签和i标签区别
Bootstrap中的属性 aria-hidden、sr-only、aria-labe、alert组件介绍
qq_41968486的博客
08-28 3665
看了两天的bootstrap，发现这就是一个前端的框架，让你做网站的时候套着用，看了看中文官网，bootstrap中文网 分为4个部分： 起步 全局css样式 组件 javascript插件 这几个内容，前两部分看看文档 ，会用就行， 不会的话就跟着敲。 在看全局CSS样式时 有几个属性 需要注意一下~~~~~~~~~·~ -----------------------------分割...
html之aria-hidden="true"
weixin_30838873的博客
07-05 2490
aria-hidden="true"使得带有这个属性的控件对浏览器实现语义化隐藏，也就是帮助残障人士更好的理解，以免混淆 转载于:https://www.cnblogs.com/luojiabao/p/11139497.html...
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
最新发布
博客
05-17 142
HTML,CSS,JavaScript,DOM的理解
<input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="">用css将aria-hidden设置为true
12-06
根据提供的引用内容，我们可以看到`<input>`标签的`aria-hidden`属性是由Vue框架的`disabled`属性控制的。因此，我们需要通过Vue框架来修改`disabled`属性的值，从而改变`aria-hidden`属性的值。 以下是一个示例代码，将`aria-hidden`属性设置为`true`： ```html <template> <div> <input type="checkbox" class="el-checkbox__original" :disabled="true" :aria-hidden="!isHidden"> </div> </template> <script> export default { data() { return { isHidden: true } } } </script> <style> .el-checkbox__original[aria-hidden="false"] { display: none; } </style> ``` 在上面的代码中，我们使用了Vue框架来控制`disabled`属性的值，当`isHidden`为`true`时，`aria-hidden`属性的值为`true`，反之为`false`。同时，我们使用CSS来隐藏`aria-hidden`属性值为`false`的元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值