アクセス可能なエラー通知

ウェブ機能: :user-valid と :user-invalid

問題

標準の HTML5 検証では、:invalid または :user-invalid を介して視覚的なフィードバックが提供されますが、aria-invalid などのユーザー補助属性とは自動的に同期されません。

標準の :invalid スタイルを使用している場合、ユーザーが現在空の必須フィールドにタブ移動した瞬間に、スクリーン リーダーが「無効なエントリ」と読み上げることがあります。これは、インタラクションが発生する前にエラーが通知されるため、支援技術を使用しているユーザーにとって不便なエクスペリエンスとなります。

ソリューション

プログラム状態（aria-invalid="true"）は、視覚状態（:user-invalid）が適用されるのとまったく同じタイミングで適用される必要があります。:user-invalid はブラウザの内部の「ユーザー操作」フラグに依存しているため、JavaScript を使用して、標準の操作イベント中にこのセレクタが一致することを確認できます。

詳しくは、MDN aria-invalid をご覧ください。

実装戦略

  1. ビジュアル レイヤ: CSS :user-invalid を使用して枠線やアイコンを表示します。
  2. ユーザー補助レイヤ: aria-invalid と aria-errormessage を使用して、支援技術（AT）に状態を伝えます。
  3. ビジュアル レイヤとユーザー補助レイヤをブリッジする: blur イベントと input イベントをリッスンし、要素が :user-invalid と一致するかどうかを確認して、それに応じて ARIA 属性を更新する軽量の JavaScript ユーティリティを作成します。

実装ガイド

1. HTML 構造

aria-errormessage（またはより広範なサポートの場合は aria-describedby）を使用して、入力をエラー メッセージにリンクします。

<form>
  <div class="field">
    <label for="email">Email</label>
    <input 
      type="email" 
      id="email" 
      required 
      aria-errormessage="email-error"
    >
    <span id="email-error" class="error-msg">
      Please enter a valid email address.
    </span>
  </div>
</form>

2. CSS

ネイティブ疑似クラス :user-invalid を使用して、エラー メッセージの表示を制御します。

.error-msg {
  display: none;
  color: #d93025;
}

/* Show error message when input is user-invalid */
input:user-invalid ~ .error-msg {
  display: block;
}

/* Optional: Visual cues on the input itself */
input:user-invalid {
  border-color: #d93025;
}

3. JavaScript

「UserInvalidChanged」イベントはないため、標準のフォーム イベントにフックして状態を確認します。

const updateAriaState = (event) => {
  const input = event.target;
  if (!input.matches?.('input, textarea, select')) return;

  // Check if the browser currently considers this input "user-invalid"
  const isUserInvalid = input.matches(':user-invalid');
  
  if (isUserInvalid) {
    input.setAttribute('aria-invalid', 'true');
  } else {
    input.removeAttribute('aria-invalid');
  }
};

// Listen on the document to handle dynamically added fields.
// 'blur' and 'focus' do not bubble, so we must use the capture phase (true).
document.addEventListener('blur', updateAriaState, true);
document.addEventListener('focus', updateAriaState, true);

// Also update on input if we've already shown the error, 
// so the error clears immediately when fixed.
document.addEventListener('input', (event) => {
  const input = event.target;
  if (!input.matches?.('input, textarea, select')) return;

  const hasAriaInvalid = input.hasAttribute('aria-invalid');
  const ariaInvalid = input.getAttribute('aria-invalid');
  if (hasAriaInvalid && ariaInvalid === 'true') {
    updateAriaState(event);
  }
});

フォールバックとブラウザのサポート

特徴検出

CSS と JavaScript でサポートを確認できます。

JavaScript の確認:

if (!CSS.supports('selector(:user-invalid)')) {
  // Fallback logic here
}

代替広告の CSS

フォールバック ロジックがネイティブの動作と視覚的に区別できないようにするには、疑似クラスとフォールバック クラスの両方にエラー スタイルを適用する必要があります。

/* Apply error styles to both native selector and fallback class */
input:user-invalid,
input.user-invalid-fallback {
  border-color: #d93025;
  background-color: #fce8e6;
}

/* Show error message for both cases */
input:user-invalid ~ .error-msg,
input.user-invalid-fallback ~ .error-msg {
  display: block;
}

代替ロジック

:user-invalid がない場合は、WeakMap を使用して操作状態を手動で追跡します。

const UserInvalidFallback = (() => {
  const dirtyState = new WeakMap();

  const updateState = (input) => {
    const isValid = input.checkValidity();

    // Update both visual and ARIA state
    input.classList.toggle('user-invalid-fallback', !isValid);
    input.classList.toggle('user-valid-fallback', isValid);

    if (!isValid) {
      input.setAttribute('aria-invalid', 'true');
    } else {
      input.removeAttribute('aria-invalid');
    }
  };

  const handleEvent = (event) => {
    const input = event.target;

    if (event.type === 'reset' && input.matches?.('form')) {
      const controls = input.elements || [];
      for (const control of controls) {
        dirtyState.delete(control);
        control.classList.remove('user-invalid-fallback');
        control.classList.remove('user-valid-fallback');
        control.removeAttribute('aria-invalid');
      }
      return;
    }

    if (!input.matches?.('input, textarea, select')) return;

    if (event.type === 'input' || event.type === 'change') {
      const state = dirtyState.get(input) || { hasInteracted: false, hasBlurred: false };
      state.hasInteracted = true;
      dirtyState.set(input, state);
      if (state.hasBlurred) {
        updateState(input);
      }
    } else if (event.type === 'blur') {
      const state = dirtyState.get(input) || { hasInteracted: false, hasBlurred: false };
      state.hasBlurred = true;
      dirtyState.set(input, state);
      if (state.hasInteracted) {
        updateState(input);
      }
    }
  };

  const init = () => {
    if (CSS.supports('selector(:user-invalid)')) return;

    document.addEventListener('blur', handleEvent, true); // Capture phase required
    document.addEventListener('input', handleEvent, true);
    document.addEventListener('change', handleEvent, true);
    document.addEventListener('reset', handleEvent, true); // Capture resets
  };

  return { init };
})();

// Initialize globally
UserInvalidFallback.init();

その他の注意事項

  1. aria-live と aria-errormessage の比較:

    • aria-errormessage は入力をテキストに接続しますが、スクリーン リーダーは表示時にすぐに読み上げない場合があります（入力にフォーカスした場合のみ）。
    • エラーが表示されたときに（ぼかしなど）即時に読み上げる必要がある場合は、エラー メッセージ コンテナに role="alert" または aria-live="polite" を追加することを検討してください。ただし、ユーザーがフィールドにフォーカスして修正する際に「二重読み上げ」が発生しないように、十分にテストしてください。

  2. 国際化:

    • エラー メッセージ（#email-error）のテキスト コンテンツが翻訳されていることを確認します。ロジックは同じです。