問題一覧に戻る
上級テストとベストプラクティス
問題102: アクセシビリティ

ARIA属性とセマンティックHTMLを使ったアクセシブルなReactコンポーネントの構築方法を学びます。適切なラベリング、エラーアナウンス、キーボードナビゲーションサポートを使用します。スクリーンリーダーや支援技術で動作する包括的なアプリケーションを作成するのに必須です。フォームコントロールとインタラクティブ要素のWCAGガイドラインに従います。

import React, { useState } from 'react';

function AccessibleForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  
  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) {
      setError('Invalid email');
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      {/* ラベルのfor属性 */}
      <label ="email">Email:</label>
      <input
        id="email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        {/* 無効状態インジケーター */}
        aria-={!!error}
        {/* エラー説明リンク */}
        aria-={error ? 'email-error' : undefined}
      />
      {error && (
        <span id="email-error" role="">
          {error}
        </span>
      )}
      <button 
        type="submit"
        {/* アクセシブルラベル */}
        aria-="Submit email form"
      >
        Submit
      </button>
    </form>
  );
}

export default AccessibleForm;