CSSで完璧な円グラフを作る セマンティックとアクセシビリティを両立する実践ガイド

はじめに: CSSだけで円グラフ？しかもアクセシビリティまで？

Webでデータ可視化をするとき、まずChart.jsやD3.jsといったライブラリを思い浮かべる方が多いでしょう。しかし、シンプルな円グラフ1つのために数十KBのライブラリを読み込むのは、時にオーバーエンジニアリングです。特に、セマンティックマークアップとアクセシビリティを考慮すべき実務環境ではなおさらです。

CSSのconic-gradient()プロパティを使えば、ライブラリなしで美しい円グラフを作成できます。しかし重要なのは、「見た目だけきれい」なグラフではなく、すべてのユーザーが理解できるグラフを作ることです。キーボードナビゲーション、スクリーンリーダー、ハイコントラストモードなど、さまざまな環境でもデータを正確に伝える必要があります。

この記事では、CSS円グラフの基本実装から、セマンティックHTMLとWAI-ARIAを活用したアクセシビリティ向上方法までをステップバイステップで解説します。実際のプロジェクトですぐに使えるコードとともに、日本のWeb制作現場で注意すべき点もお伝えします。

参考資料: 本記事は CSS-TricksのOverflowコンテナに関する記事 から着想を得て、アクセシビリティのテーマを拡張したものです。

本論 1: conic-gradient()で円グラフを実装する

1. 基本構造 (HTML)

円グラフは単一の<div>から始めます。ただし、アクセシビリティを考慮して、<figure>と<figcaption>、そしてデータをテキストで表現した代替コンテンツを一緒に提供します。

<!-- セマンティックな円グラフ構造 -->
<figure role="figure" aria-label="部門別予算比率">
  <div class="pie-chart" role="img" aria-label="マーケティング 40%、開発 35%、運用 25%">
    <!-- データをテキストで提供（スクリーンリーダー用） -->
    <div class="sr-only">
      <ul>
        <li>マーケティング: 40%</li>
        <li>開発: 35%</li>
        <li>運用: 25%</li>
      </ul>
    </div>
  </div>
  <figcaption>2025年度 部門別予算分布</figcaption>
</figure>

2. CSSで円グラフを描く

conic-gradient()は円形グラデーションを作り、円グラフのように見せます。各色の開始角度と比率を計算して適用します。

/* 円グラフのスタイリング */
.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /* マーケティング 40% (0deg ~ 144deg)、開発 35% (144deg ~ 270deg)、運用 25% (270deg ~ 360deg) */
  background: conic-gradient(
    #ff6b6b 0deg 144deg,   /* マーケティング: 赤 */
    #4ecdc4 144deg 270deg, /* 開発: 青緑 */
    #ffe66d 270deg 360deg  /* 運用: 黄色 */
  );
}

ワンポイント: 比率計算が面倒なら、CSS変数とcalc()を活用しましょう。例えば--marketing: 40%;と定義し、calc(var(--marketing) * 3.6deg)で角度を計算するとメンテナンスが格段に楽になります。

3. キーボードフォーカス対応

円グラフ自体は装飾的な画像(role="img")なので、キーボードフォーカスを受け取るべきではありません。代わりに、詳細データを表示するボタンやツールチップにフォーカスを提供する方法が適切です。

<button type="button" aria-expanded="false" aria-controls="pie-details">
  予算詳細を見る
</button>
<div id="pie-details" hidden>
  <table>
    <caption>部門別予算詳細</caption>
    <thead>
      <tr><th>部門</th><th>比率</th><th>金額</th></tr>
    </thead>
    <tbody>
      <tr><td>マーケティング</td><td>40%</td><td>4,000万円</td></tr>
      <tr><td>開発</td><td>35%</td><td>3,500万円</td></tr>
      <tr><td>運用</td><td>25%</td><td>2,500万円</td></tr>
    </tbody>
  </table>
</div>

これにより、キーボードユーザーはTabキーで「予算詳細を見る」ボタンにフォーカスし、Enterキーで詳細データを確認できます。

本論 2: アクセシビリティの深化 - ハイコントラストモードとスクリーンリーダー対応

1. ハイコントラストモード (Windows High Contrast Mode)

background画像だけで作った円グラフは、ハイコントラストモードで全ての色が失われ、データをまったく識別できなくなります。この場合は@media (forced-colors: active)を使って代替スタイルを提供する必要があります。

/* ハイコントラストモード対応 */
@media (forced-colors: active) {
  .pie-chart {
    /* 背景画像を削除 */
    background: none;
    /* 代わりに境界線で区別 */
    border: 2px solid CanvasText;
  }
  /* 各セクションを別要素で表示する方法も検討 */
}

より良い方法は、clip-pathを使って各セクションを個別の<div>に分割することです。これにより、ハイコントラストモードでも各セクションの境界線が維持されます。

2. スクリーンリーダーの最適化

先ほどHTMLでrole="img"とaria-labelを使用しましたが、より正確に伝えるためにaria-describedbyで詳細説明をリンクできます。

<div class="pie-chart" 
     role="img" 
     aria-label="部門別予算比率"
     aria-describedby="pie-description">
  <!-- グラフ内容 -->
</div>
<div id="pie-description" hidden>
  円グラフは3つの部分に分かれています。マーケティング40%は赤色、開発35%は青緑色、運用25%は黄色です。
</div>

3. 日本のWeb制作現場での注意点

日本のWeb業界では、まだスクリーンリーダー対応が「オプション」と見なされることが少なくありません。しかし、JIS X 8341-3（高齢者・障害者等配慮設計指針）の準拠が求められる公共案件や大規模サイトでは、上記のアクセシビリティ手法が必須です。

特に、グラフのデータをテキストでも提供するという点は忘れがちです。視覚的なグラフだけでは、すべてのユーザーに情報を伝えられません。Qiitaの記事などでもよく言及される「アクセシビリティは後付けではコストがかかる」という教訓を、ぜひ初期設計に活かしてください。

まとめ: 実務適用のアドバイスと今後の学習

CSS円グラフは、ライブラリ依存を減らし、アクセシビリティを高める優れた方法です。ただし、すべての状況に適しているわけではありません。

メリット

• ライブラリ不要（高速読み込み）
• シンプルなデータ表現に最適
• CSSだけで自由にカスタマイズ可能

デメリット / 制限

• 複雑なインタラクション（ホバー時のツールチップ、アニメーションなど）の実装が難しい
• データが多くなるとメンテナンスが複雑に
• ハイコントラストモードなど特殊環境で追加作業が必要

次のステップとしての学習方向

1. インタラクティブなグラフが必要なら？ → D3.js や Chart.js を学んでみてください。
2. SVGベースのグラフに興味があれば？ → SVGのpathとstroke-dasharrayを活用した円グラフも実装可能です。アクセシビリティ面でさらに有利な場合があります。
3. アクセシビリティ全体のガイド → WAI-ARIA Authoring Practices を参照してください。

合わせて読みたい記事

• "Holotron-12B H Companyの新しいコンピュータ使用AIモデル、NVIDIA Nemotronベースで推論効率2倍向上" - 最新AIモデル動向
• "CSSで完璧な円グラフを作る: セマンティックとアクセシビリティを両立する実践ガイド" - 本記事の完全版