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

最新推荐文章于 2023-03-31 16:53:55 发布

VIP文章 Cassy_Wu

最新推荐文章于 2023-03-31 16:53:55 发布

阅读量767

点赞数

分类专栏： # accessbility实现（无障碍网页）文章标签： html js css css3 jquery

本文链接：https://blog.csdn.net/Cassy_Wu/article/details/107943885

版权

实现效果

实现效果
画重点 ^ – ^

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

当文字阅读障碍者 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;

最低0.47元/天解锁文章

Cassy_Wu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS可折叠区域及accessbility实现（无障碍网页）

实现效果源码<!DOCTYPE html><html><head> <title>collapsible menu</title></head><style type="text/css"> .collapsibleMenu{ width: 400px; color: #0072ac; margin-bottom: 20px; } .isCollapsible{ display: blo
复制链接

扫一扫