文档章节

aria链接跳转和文本说明问题

droden
 droden
发布于 2017/04/07 23:01
字数 301
阅读 8
收藏 0
  1. 分别去掉数字a链接的aria-label属性和值,分别其加上aria-labelledby和href属性并赋值,给class="d_tit"的p标签加上id值如:id="tabs2"
  2. 把此模块的第一个数字a链接对应的class="d_picBox"的div的id值去掉,添加到 此模块内对应的class="d_txt"的p标签上
  3. 分别给其余数字a链接对应的class="d_txt"的p标签,加上ID,例如:id="002" 此demo以第二个数字a链接为例,实现的最终效果为:当focus到第二个数字a链接,读屏工具读出title:“Seat Pitch”,当点击回车时读出具体文本内容:“The pitch is 74 to 80 inches. Seats can lie flat at 180°, giving you more comfort during your journey.”

<a class="d_btn fl d_active" href="#002" aria-labelledby="tabs2">2</a>

<div class="d_eachText d_active"> <p class="d_tit" id="tabs2">Seat Pitch</p> <p id="002" class="d_txt">The pitch is 74 to 80 inches. Seats can lie flat at 180°, giving you more comfort during your journey.</p> </div>

注:其余模块解决方案参考此demo

https://www.hainanairlines.com/HUPortal/dyn/portal/DisplayPage?COUNTRY_SITE=US&SITE=CBHZCBHZ&LANGUAGE=US&PAGE=BSEE

© 著作权归作者所有

共有 人打赏支持
上一篇: tomcat 使用
下一篇: NODEJS nodejs
droden
粉丝 11
博文 62
码字总数 92768
作品 0
东城
程序员
私信 提问
WAI-ARIA无障碍网页应用属性完全展示

一、你至少应该知道ARIA是什么东西! WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助...

林文安
2012/06/01
0
0
What is HTML5 ARIA

http://stackoverflow.com/questions/3474099/what-is-html5-aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA http://www.w3.org/TR/aria-in-html/ 问:What is the......

cyper
2015/11/20
0
0
Accessibility 我们能做些什么(下)

在上篇的 不能永远忽略的 Accessibility (上) 中了解到了真正的 Accessibility 的是什么以及为什么要关注它,同样,想必你也看到了它那些看了也不知道具体该怎么做的规范吧,那对于一个前端工...

半生不熟_
2018/11/06
0
0
bootstrap中aria-hidden=true的作用

http://stackoverflow.com/questions/21199141/bootstrap-modal-close-button-aria-hidden-true 最后一个人回答得不错: ARIA Attributes are used to make the web more accessible to thos......

cyper
2015/11/20
0
0
无视觉桌面访问 (NVDA)2017.2 发布

就在昨天,无视觉桌面访问(NVDA)迎来了他的2017的第二个稳定版,下面是更新日志. 此版本的亮点包括在Windows 10创作者更新中完全支持音频闪避;修复浏览模式下的几个选择问题,包括全选的问题;...

星空06
2017/05/30
2.5K
18

没有更多内容

加载失败,请刷新页面

加载更多

基于 DataLakeAnalytics 的数据湖实践

随着软硬件各方面条件的成熟,数据湖(Data Lake)已经越来越受到各大企业的青睐, 与传统的数仓实践不一样的是,数据湖不需要专门的“入仓”的过程,数据在哪里,我们就从哪里读取数据进行分析...

迷你芊宝宝
28分钟前
1
0
ubuntu查看防火墙状态

1.查看防火墙当前状态 sudo ufw status 2.开启防火墙 sudo ufw enable 3.关闭防火墙 sudo ufw disable 4.查看防火墙版本 sudo ufw version 5.默认允许外部访问本机 sudo ufw default all...

Frost729
30分钟前
1
0
Gradle插件使用过程记录

Android中基于Gradle进行编译打包的过程,下面记录一下如何进行Gradle插件开发的过程: 首先在项目中新建的一个名为buildSrc的module,为什么叫这个名字请看官方文档。然后将Java文件夹以及r...

JerryLin123
36分钟前
1
0
RSA 2019安全大会:企业资产管理成行业新风向标,云上安全占优势

美国时间3月4-8日,国际知名信息安全峰会RSA Conference在美国旧金山开幕,云安全及云可以为企业提供更可靠的资产管理方式成为大会热点。 此次峰会共吸引全球700多家机构参展,其中近42%为云...

阿里云云栖社区
37分钟前
2
0
重磅推出TabLayout高级窗口组件

TabLayout是在APICloud现有窗口系统基础上升级而来的高级窗口组件,符合Material Design规范,可通过简单的配置为窗口实现原生的导航栏和TabBar,它将帮助您节省30%以上的重复编码工作量,同...

API_Cloud
42分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部