JS可折叠区域及accessbility实现（无障碍网页）

实现效果

画重点 ^ – ^

如何让文字阅读障碍者能够顺利的访问可折叠区域？

当文字阅读障碍者 tab 到a标签的时候，按enter就能触发我们绑定的click事件。（同样也可以使用button实现同样的效果）
通过改变aria-expanded的值来告诉屏幕阅读器，当前的区域是展开还是闭合的。在上面的例子中，默认设置展开。就需要给一个默认初始值aria-expanded="true“

如果在不引入icon的情况下用纯css画三角形？

通过改变border来实现一个三角形，然后在点击事件里面通过transform: rotate旋转来获取一个向上和向下的三角形

.arrow{width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 15px solid #0072ac;position: absolute;right: 10px;top: 14px;}

例子查看： http://jsrun.net/qwLKp/edit

源码

<!DOCTYPE html>
<html>
<head><title>collapsible menu</title>
</head>
<style type="text/css">.collapsibleMenu{width: 400px;color: #0072ac;margin-bottom: 20px;}.isCollapsible{display: block;padding: 10px;text-decoration: none;color: #0072ac;background-color: #fff;border: 1px solid #ccc;border-radius: 5px;position: relative;cursor: pointer;}.isCollapsible span {transition: transform .2s ease;}.isCollapsible ~ ul {margin-top: 0;list-style: none;border: 1px solid #ccc;border-radius: 5px;padding: 10px 30px;}.isCollapsible ~ ul li {margin-bottom: 10px;}.arrow{width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 15px solid #0072ac;position: absolute;right: 10px;top: 14px;}
</style>
<script type="text/javascript" src="./jquery-3.5.1.min.js"></script>
<script type="text/javascript">$().ready(function() {$('.isCollapsible').on('click', function (e) {e.preventDefault();let expandAttr = $( this ).attr('aria-expanded');let nearEl = $(this).next();let newAttr;if(expandAttr){newAttr = !(expandAttr === 'true');}$( this ).attr('aria-expanded', newAttr);if(newAttr){nearEl.show();$( this ).children('span').css('transform', 'rotate(0deg)');}else{nearEl.hide();$( this ).children('span').css('transform', 'rotate(180deg)');}})});
</script>
<body><div class="collapsibleMenu"><a aria-expanded="true" class="isCollapsible" href="#">可折叠菜单<span class="arrow"></span></a><ul><li>Link 1</li><li>Link 2</li><li>Link 3</li><li>Link 4</li></ul></div><div class="collapsibleMenu"><a aria-expanded="true" class="isCollapsible" href="#">可折叠菜单<span class="arrow"></span></a><ul><li>todo item - 1</li><li>todo item - 2</li><li>todo item - 3</li><li>todo item - 4</li></ul></div>
</body>
</html>

JS可折叠区域及accessbility实现（无障碍网页）相关推荐

HTML5 无障碍网页设计开发指南
无障碍网页标准规范张赐荣一.无障碍网页 1.1无障碍网页无障碍网页特别针对残障人士的需要 1.2 ARIA是什麽? ARIA是W3C的 Web无障碍推进组织发布的可访问富互联网应用实现指南.WA ...
JS如何获取屏幕、浏览器及网页高度宽度？
目的在浏览器中,用JS获取高度和宽度都各有3种,分别包括屏幕,浏览器和网页的.用来解决各种计算定位问题!以至于我各种记不住,写个随笔方便查询. 屏幕宽高说明:顾名思义,屏幕宽高是指显示器的分辨率. ...
WAI-ARIA无障碍网页应用属性完全展示
WAI-ARIA无障碍网页应用属性完全展示这篇文章发布于 2012年03月14日,星期三,23:11,归类于 css相关. 阅读 97781 次, 今日 39 次 by zhangxinxu fro ...
WAI-ARIA无障碍网页应用属性完全展示(转)
http://www.zhangxinxu.com/wordpress/?p=2277 一.你至少应该知道ARIA是什么东西! WAI-ARIA指无障碍网页应用.主要针对的是视觉缺陷,失聪,行动不便的 ...
无障碍网页设计（WCAG2.0）
无障碍化是指无论健全人还是残疾人,年轻人还是老年人都可以平等地获取互联网上的信息和服务.无障碍化网站建设不单可以增加网站的受益群体,更是一个有情怀.有担当的互联网企业的责任,也是一个互联网从业人员应该 ...
JS延迟加载百度分享代码，提高网页速度
相信大家经常在一些网站上看到有快捷分享到各大流行网站的按钮,目前流行的有JiaThis.百度分享.Bshare等,目前用百度分享的居多. 发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固 ...
html+css+js 制作 PC 端酷狗音乐网页
突然翻出来之前用 html+css+js 做的酷狗音乐的网页,纪念一下:只是排了个页面哈,还加了轮播图效果,有点小瑕疵,哈哈,那时候还挺认真的~
HTML生日快乐代码 (粉色主题)（HTML5+CSS3+JS）520表白代码/七夕情人节网页/告白/求婚/生日快乐
html+css+js 生日快乐网站模板(多页面功能版本+音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码(HTML5+CSS3+JS) 程序员爱情❤520/表白/七夕情人节/求婚❤专 ...
HTML生日快乐代码 (粉色主题)（HTML5+CSS3+JS）520表白代码/七夕情人节网页/告白/求婚/生日快乐...
html+css+js 生日快乐网站模板(多页面功能版本+音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码(HTML5+CSS3+JS) 程序员爱情❤520/表白/七夕情人节/求婚❤专 ...

JS可折叠区域及accessbility实现（无障碍网页）

实现效果

如何让文字阅读障碍者能够顺利的访问可折叠区域？

如果在不引入icon的情况下用纯css画三角形？

例子查看： http://jsrun.net/qwLKp/edit

源码

JS可折叠区域及accessbility实现（无障碍网页）相关推荐

最新文章

热门文章