ヘルスケアインデータ可視化のためのアクセシビリティ（WCAG）完全ガイド

npx create-react-app accessible-health-chart
cd accessible-health-chart

// src/BarChart.js
import React from 'react';

const BarChart = ({ data }) => {
  const maxValue = Math.max(...data.map(d => d.value));
  const chartHeight = 200;

  return (
    <svg width="400" height={chartHeight + 40} aria-hidden="true">
      {data.map((d, i) => {
        const barHeight = (d.value / maxValue) * chartHeight;
        return (
          <g key={d.label}>
            <rect
              x={i * 60 + 10}
              y={chartHeight - barHeight}
              width="40"
              height={barHeight}
              fill="#8884d8"
            />
            <text x={i * 60 + 30} y={chartHeight + 20} textAnchor="middle">
              {d.label}
            </text>
          </g>
        );
      })}
    </svg>
  );
};

export default BarChart;

// src/App.js
import React from 'react';
import './App.css';
import BarChart from './BarChart';

function App() {
  const healthData = [
    { label: 'Steps', value: 8500 },
    { label: 'Sleep', value: 7.5 },
    { label: 'Heart Rate', value: 72 },
  ];

  return (
    <div className="App">
      <header className="App-header">
        <h1>Weekly Health Metrics</h1>
        <BarChart data={healthData} />
      </header>
    </div>
  );
}

export default App;

// src/BarChart.js
import React from 'react';

const BarChart = ({ data }) => {
  const maxValue = Math.max(...data.map(d => d.value));
  const chartHeight = 200;

  return (
    <div className="chart-container">
      <svg
        width="400"
        height={chartHeight + 40}
        role="img"
        aria-labelledby="chartTitle"
        aria-describedby="chartDesc"
      >
        <title id="chartTitle">Weekly Health Metrics Bar Chart</title>
        <desc id="chartDesc">
          A bar chart showing weekly health metrics including steps, sleep, and heart rate.
        </desc>
        {data.map((d, i) => {
          const barHeight = (d.value / maxValue) * chartHeight;
          return (
            <g
              key={d.label}
              role="listitem"
              aria-label={`${d.label}: ${d.value}`}
              tabIndex="0"
            >
              <rect
                x={i * 60 + 10}
                y={chartHeight - barHeight}
                width="40"
                height={barHeight}
                fill="#8884d8"
              />
              <text
                x={i * 60 + 30}
                y={chartHeight + 20}
                textAnchor="middle"
                aria-hidden="true"
              >
                {d.label}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
};

export default BarChart;

// Add a patterns definition to your SVG
<defs>
  <pattern id="pattern-stripe"
      width="4" height="4"
      patternUnits="userSpaceOnUse"
      patternTransform="rotate(45)">
    <rect width="2" height="4" fill="white"></rect>
  </pattern>
</defs>

// In the map function, apply patterns conditionally
<rect
  // ... other properties
  fill={i % 2 === 0 ? '#8884d8' : 'url(#pattern-stripe)'}
/>

// src/useKeyboardNav.js
import { useEffect, useRef } from 'react';

const useKeyboardNav = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const items = Array.from(container.querySelectorAll('[tabindex="0"]'));
    if (items.length === 0) return;

    const handleKeyDown = (e) => {
      const activeIndex = items.findIndex(item => item === document.activeElement);
      if (activeIndex === -1) return;

      let nextIndex = activeIndex;
      if (e.key === 'ArrowRight') {
        nextIndex = activeIndex + 1;
      } else if (e.key === 'ArrowLeft') {
        nextIndex = activeIndex - 1;
      }

      if (nextIndex >= 0 && nextIndex < items.length) {
        e.preventDefault();
        items[nextIndex].focus();
      }
    };

    container.addEventListener('keydown', handleKeyDown);

    return () => {
      container.removeEventListener('keydown', handleKeyDown);
    };
  }, [containerRef]);

  return containerRef;
};

export default useKeyboardNav;

// src/BarChart.js
import React from 'react';
import useKeyboardNav from './useKeyboardNav';

const BarChart = ({ data }) => {
  const containerRef = useKeyboardNav();
  // ... rest of the component
  return (
    <div className="chart-container" ref={containerRef}>
      {/* ... SVG code */}
    </div>
  );
};

export default BarChart;

// src/BarChart.js
import React from 'react';
import useKeyboardNav from './useKeyboardNav';

const BarChart = ({ data }) => {
  const containerRef = useKeyboardNav();
  const maxValue = Math.max(...data.map(d => d.value));
  const chartHeight = 200;

  return (
    <div className="chart-container" ref={containerRef}>
      <svg
        width="400"
        height={chartHeight + 40}
        role="img"
        aria-labelledby="chartTitle"
        aria-describedby="chartDesc"
      >
        <title id="chartTitle">Weekly Health Metrics Bar Chart</title>
        <desc id="chartDesc">
          A bar chart showing weekly health metrics including steps, sleep, and heart rate.
        </desc>
        {data.map((d, i) => {
          const barHeight = (d.value / maxValue) * chartHeight;
          return (
            <g
              key={d.label}
              role="listitem"
              aria-label={`${d.label}: ${d.value}`}
              tabIndex="0"
            >
              <rect
                x={i * 60 + 10}
                y={chartHeight - barHeight}
                width="40"
                height={barHeight}
                fill="#8884d8"
              />
              <text
                x={i * 60 + 30}
                y={chartHeight + 20}
                textAnchor="middle"
                aria-hidden="true"
              >
                {d.label}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
};

export default BarChart;