SCR31：フォーカスのある要素の背景色又はボーダーを変更するために、スクリプトを使用する

フォーカスイベントのリスナーを追加する

JavaScriptを使用して、要素にフォーカスが当たったときに特定のスタイルを適用するためのイベントリスナーを追加します。以下はその例です。

document.addEventListener('DOMContentLoaded', function() {
  var focusableElements = document.querySelectorAll('a, button, input, textarea, select');

  focusableElements.forEach(function(element) {
    element.addEventListener('focus', function() {
      element.style.backgroundColor = 'yellow'; // フォーカス時の背景色
      element.style.border = '2px solid red'; // フォーカス時のボーダー
    });

    element.addEventListener('blur', function() {
      element.style.backgroundColor = ''; // フォーカスが外れたときに元のスタイルに戻す
      element.style.border = '';
    });
  });
});

CSSと組み合わせる

CSSを使用して基本的なスタイルを定義し、JavaScriptでフォーカス時のスタイルを変更します。

/* 基本スタイル */
.focusable {
  transition: background-color 0.3s ease, border 0.3s ease;
}

/* フォーカス時のスタイル */
.focused {
  background-color: yellow !important;
  border: 2px solid red !important;
}

document.addEventListener('DOMContentLoaded', function() {
  var focusableElements = document.querySelectorAll('.focusable');

  focusableElements.forEach(function(element) {
    element.addEventListener('focus', function() {
      element.classList.add('focused');
    });

    element.addEventListener('blur', function() {
      element.classList.remove('focused');
    });
  });
});

アクセシビリティを考慮したフォーカススタイル

フォーカススタイルは視覚的に明確である必要があります。背景色やボーダーの変更に加えて、コントラスト比も考慮する必要があります。

document.addEventListener('DOMContentLoaded', function() {
  var focusableElements = document.querySelectorAll('a, button, input, textarea, select');

  focusableElements.forEach(function(element) {
    element.addEventListener('focus', function() {
      element.style.backgroundColor = '#FFD700'; // 高いコントラストの背景色
      element.style.border = '3px solid #0000FF'; // 高いコントラストのボーダー
    });

    element.addEventListener('blur', function() {
      element.style.backgroundColor = '';
      element.style.border = '';
    });
  });
});