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

最新推荐文章于 2024-12-30 17:05:54 发布

Cassy_Wu

最新推荐文章于 2024-12-30 17:05:54 发布

阅读量934

点赞数

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

本文链接：https://blog.youkuaiyun.com/Cassy_Wu/article/details/107943885

版权

本文介绍了如何使用JS创建可折叠区域，并确保文字阅读障碍者能够通过键盘操作访问。利用aria-expanded属性辅助无障碍访问，并展示了不依赖图标，仅用CSS画三角形并切换方向的方法。提供在线例子供查看和源码分析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

实现效果
画重点 ^ – ^

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

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