本文演示了如何使用HTML，CSS和JavaScript创建重叠的条形图，重点关注可访问性最佳实践。作者使用语义上丰富的HTML（描述列表）来构建图表，从而使屏幕阅读器更容易访问。 Flexbox具有有效的布局和图表元素的定位。 JavaScript根据数据属性动态设置条高度，以确保准确的视觉表示。本文重点介绍了颜色对比度对可访问性的重要性，并提供了改进键盘导航的代码（使用 Tabindex ）和屏幕读取器公告（ aria-label ， aria-hidded ）。作者还讨论了使用传奇来澄清图表的数据表示形式，并提供了一种视觉隐藏的技术，以防止冗余的屏幕阅读器公告。总体方法优先考虑视觉吸引力和可访问性，使图表可用于更广泛的受众群体。
基础是一个结构良好的HTML，利用 <dl> </dl> （描述列表）元素，比未订购的列表更好地读取了读者，以获取更高的上下文。该结构整洁地分开了Y轴标签，X轴标签和数据栏本身。每个条的高度由 data-centerage 属性确定，并用JavaScript动态调整。
css样式使用Flexbox来有效布局。 .chart 容器是一个灵活的行，而y轴标签则作为列排列。酒吧本身也可以灵活地布置，从而确保空间的分布。重叠是通过战略性定位条和使用 z-index 来控制堆叠顺序的重叠。
可访问性是核心重点。该教程强调了足够的颜色对比，以满足WCAG AA标准，从而提供了特定的颜色组合和对比度。 JavaScript将 Tabindex =“ 0” 添加到每个栏，启用键盘导航。至关重要的是， aria-label 属性清楚地确定了屏幕读取器的每个条的目的（例如，“估算”，“实际”），而 aria-hidden 用于防止不必要的不必要的公告公告。使用一种视觉隐藏的技术来隐藏冗余数据，同时仍使屏幕阅读器可以访问。
本文以完整，易于访问且视觉上引人入胜的重叠条形图结束，展示了数据可视化开发的最佳实践方法。作者鼓励替代方法并进一步讨论可访问性的最佳实践。
以上是重叠的条形图的详细内容。更多信息请关注PHP中文网其他相关文章！
