重疊的條形圖

本文演示瞭如何使用HTML，CSS和JavaScript創建重疊的條形圖，重點介紹可訪問性最佳實踐。作者使用語義上豐富的HTML（描述列表）來構建圖表，從而使屏幕閱讀器更容易訪問。 Flexbox具有有效的佈局和圖表元素的定位。 JavaScript根據數據屬性動態設置條高度，以確保准確的視覺表示。本文強調了顏色對比度對可訪問性的重要性，並提供了改進鍵盤導航（使用tabindex ）和屏幕讀取器公告（ aria-label ， aria-hidden ）的代碼。作者還討論了使用傳奇來澄清圖表的數據表示形式，並提供了一種視覺隱藏的技術，以防止冗餘的屏幕閱讀器公告。總體方法優先考慮視覺吸引力和可訪問性，使圖表可用於更廣泛的受眾。

創建視覺吸引力且可訪問的數據可視化對於有效的溝通至關重要。該教程詳細介紹了重疊條形圖的構建，這是一種比較數據集的強大工具。關鍵是利用HTML的語義功能，CSS的佈局功率（特別是Flexbox）和JavaScript進行動態元素操縱。

基金會是一個結構良好的HTML利用<dl></dl>（描述列表）元素，比無序列表更語義選擇，為屏幕閱讀器提供更好的上下文。該結構整潔地分開了Y軸標籤，X軸標籤和數據欄本身。每個條的高度由使用JavaScript動態調整的data-percentage屬性確定。

CSS樣式使用Flexbox進行有效的佈局。 .chart容器是一個靈活的行，而Y軸標籤則作為列排列。酒吧本身也可以靈活地佈置，從而確保空間的分佈。通過戰略定位條和使用z-index來控制堆疊順序，可以實現重疊。

可訪問性是核心重點。該教程強調了足夠的顏色對比，以滿足WCAG AA標準，從而提供了特定的顏色組合和對比度。 JavaScript將tabindex="0"添加到每個欄中，啟用鍵盤導航。至關重要的是， aria-label屬性清楚地確定了屏幕讀取器的每個條的目的（例如，“估算”，“實際”），而aria-hidden則用於防止不必要的不​​必要的元素公告。一種視覺隱藏的技術被用來隱藏冗餘數據，同時仍使屏幕閱讀器訪問它。

本文以完整，易於訪問且在視覺上引人入勝的重疊條形圖結束，展示了一種最佳實踐方法來可視化開發。作者鼓勵替代方法並進一步討論可訪問性最佳實踐。

以上是重疊的條形圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！