25、网页交互与无障碍效果实现技巧

网页交互与无障碍效果实现技巧

在网页开发中，实现交互性和无障碍访问效果是非常重要的。下面将介绍一些常见问题及对应的解决方案。

1. 显示隐藏页面部分

在网页中，有时需要根据需求隐藏或显示页面的某个部分。

问题 ：需要根据需要隐藏或显示页面部分。
解决方案 ：
如果页面部分很可能会被用到，可以将其嵌入页面，并在需要时显示：

var msg = document.getElementById("msg");
msg.style.display="block";
msg.setAttribute("aria-hidden", "false");

不需要时隐藏：

var msg = document.getElementById("msg");
msg.style.display="none";
msg.setAttribute("aria-hidden", "true");

分析 ：
不同类型的元素有不同的 CSS 显示设置，设置 display: none 会将元素从文档布局中完全移除，视觉上元素消失且不占用页面空间。 aria-hidden 属性可为辅助技术设备提供精确指令，与 CSS 的 display