Bootstrap 中的 aria-label 和 aria-labelledby

aira-label
正常情况下，form 表单的 input 组件都有对应的 label 。<form role="form"><div class="form-group"><label for="name">名称</label><input type="text" class="form-control" id="name" placeholder="请输入名称"></div>
</form>当 input 组件获取到焦点时，屏幕阅读器会读出相应的 label 里的文本。但是如果我们没有给输入框设置 label 时，当其获得焦点时，屏幕阅读器会读出 aria-label 属性的值，aria-label 不会在视觉上呈现效果。<form role="form"><div class="form-group"><input type="text" class="form-control" id="name" placeholder="请输入名称" aria-label="名称"></div>
</form>经测试，aria-label 只有加在可被 tab 到的元素上，读屏才会读出其中的内容。aria-labelledby
如果想要屏幕阅读器读的标签文本在其他元素中存在时，可以将其值为该元素的 id。设置 aria-labelledby 的值为某个元素的 id 。那么屏幕阅读器就可以读取它的值。<body><div class="dropdown"><button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">选择你的职业<span class="caret"></span></button><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">教师</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">医生</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">学生</a></li></ul></div>
</body>当 ul 获取到焦点时，屏幕阅读器会读：“选择你的职业”。如果一个元素同时有 aria-labelledby 和 aria-label ，读屏软件会优先读出 aria-labelledby 的内容。总结
这两个属性是为特殊网页阅读器设置的属性，在一些特殊设备上，当浏览到这样的内容设备会将内容读出来。是为了一些有视力障碍的人能够同样”浏览”网页而准备的。

转自https://blog.csdn.net/csdn_yudong/article/details/72627937

Bootstrap 中的 aria-label 和 aria-labelledby相关推荐

bootstrap中导航、导航栏、表单及自定义表单
导航: bootstrap中使用列表封装了水平导航,其类样式如: 类名描述 .nav 给ul或ol,用于清除列表默认样式,并将列表项水平排列 .nav-item 给li,用于布局 .nav-link ...
bootstrap中的模态框（modal，弹出层）
bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...
Bootstrap中文本的样式
在Bootstrap中对文本的对有很多的关注,也给出了很多的样式,至少在我们自己写网页的时候这些可以不用再去编写这些样式,其实在之前我一直没有很好的理解类,这些其实都是类,我们给class进行赋值其实 ...
Bootstrap中模态框多层嵌套时滚动条问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...
echarts中树图的label的点击_ECharts 堆积木（砖块）游戏
最近突发奇想,用 3D 的堆叠柱图,做了一个搭积木的小游戏. 主要思路用一个几乎透明的 series-bar3D 铺满整个 grid3D,作为操作区,监听鼠标点击事件.完成堆积木的操作: 用多层数据 ...
什么是 bootstrap 中的 break point
断点是 Bootstrap 中的触发器,用于触发布局响应按照设备或视口大小的变化而变化. 断点是响应式设计的基石. 使用它们来控制您的布局何时可以适应特定的视口或设备大小. 使用 media quer ...
html页面icon字体无法显示,bootstrap中icon字体图标怎么不显示？
bootstrap中icon字体图标怎么不显示?下面本篇文章给大家介绍一下Bootstrap字体图标不显示问题.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: bootstr ...
bootstrap 中这段代码使bundles 失败
bootstrap 中这段代码使bundles 失败 _:-ms-fullscreen, :root input[type="date"], _:-ms-fullscreen, ...
Bootstrap中DropDown插件显示下拉列表，点击下拉列表区域，不会再自动关闭。
目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns / ...
在Bootstrap中使用类的按钮类型
Bootstrap has 7 different types of buttons with contextual classes from which we can create buttons ...

Bootstrap 中的 aria-label 和 aria-labelledby

Bootstrap 中的 aria-label 和 aria-labelledby相关推荐

最新文章

热门文章