키보드 접근성 A to Z: 모든 사용자가 키보드로 사용할 수 있는 웹사이트 만들기

<!-- 포커스 가능한 요소들 -->
<button>클릭하세요</button>
<a href="#">링크</a>
<input type="text">
<select>
  <option>선택</option>
</select>

[1] 검색 입력창
    ↓
[2] 검색 버튼
    ↓
[3] 첫 번째 검색 결과
    ↓
[4] 두 번째 검색 결과

[1] 푸터의 링크
    ↓
[2] 왼쪽 사이드바
    ↓
[3] 메인 콘텐츠
    ↓
[4] 헤더

<!-- tabindex 값에 따른 우선순위 -->
<!-- 1부터 32767까지 지정 가능 (작을수록 우선) -->
<button tabindex="1">첫 번째</button>
<button tabindex="2">두 번째</button>

<!-- 0: 자동 순서에 포함 (권장) -->
<div tabindex="0" role="button">포커스 가능한 div</div>

<!-- -1: 자동 순서에서 제외하되 프로그래매틱 포커스 가능 -->
<div tabindex="-1" id="modal-content">모달 콘텐츠</div>

<!-- 문서 최상단: 첫 Tab에 잡히도록 배치 -->
<a class="skip-link" href="#main">본문 바로가기</a>

<main id="main" tabindex="-1">
  ...
</main>

<style>
.skip-link {
  position: absolute;
  left: -999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: #fff;
  outline: 3px solid #4A90E2;
}
</style>

// 기본적인 키 이벤트 처리
element.addEventListener('keydown', (event) => {
  console.log('키 코드:', event.code);
  console.log('키 값:', event.key);

  // 특정 키 확인
  if (event.key === 'Enter') {
    // Enter 처리
  }
});

// 올바른 키 핸들링 예제
button.addEventListener('keydown', (event) => {
  // 기본 동작 확인 (브라우저 기본 동작 방지 필요할 때만)
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault();
    handleButtonClick();
  }
});

// ❌ 나쁜 예: 무분별한 자동 포커스
input.addEventListener('blur', () => {
  // 사용자가 의도하지 않은 포커스 이동
  someOtherElement.focus();
});

// ✅ 좋은 예: 사용자 의도에 따른 포커스 이동
button.addEventListener('click', () => {
  // 모달 열린 후 첫 포커스 가능 요소로 이동
  modal.showModal();
  modal.querySelector('input').focus();
});

function createFocusTrap(modalElement) {
  const focusableElements = modalElement.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );

  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];

  modalElement.addEventListener('keydown', (event) => {
    if (event.key !== 'Tab') return;

    if (event.shiftKey) {
      // Shift+Tab: 뒤로 이동
      if (document.activeElement === firstElement) {
        event.preventDefault();
        lastElement.focus();
      }
    } else {
      // Tab: 앞으로 이동
      if (document.activeElement === lastElement) {
        event.preventDefault();
        firstElement.focus();
      }
    }
  });
}

class Modal {
  constructor(element) {
    this.element = element;
    this.previouslyFocusedElement = null;
  }

  open() {
    // 열기 전 현재 포커스 저장
    this.previouslyFocusedElement = document.activeElement;

    this.element.showModal();
    this.element.querySelector('input').focus();
  }

  close() {
    this.element.close();

    // 원래 포커스로 복원
    if (this.previouslyFocusedElement && this.previouslyFocusedElement.focus) {
      this.previouslyFocusedElement.focus();
    }
  }
}

class Dropdown {
  constructor(triggerButton, menu) {
    this.trigger = triggerButton;
    this.menu = menu;
    this.items = menu.querySelectorAll('[role="menuitem"]');
    this.currentIndex = -1;

    this.setupListeners();
  }

  setupListeners() {
    // 트리거 키 처리
    this.trigger.addEventListener('keydown', (event) => {
      if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
        event.preventDefault();
        this.open();
        this.focusItem(0);
      }
    });

    // 메뉴 키 처리
    this.menu.addEventListener('keydown', (event) => {
      switch (event.key) {
        case 'ArrowDown':
          event.preventDefault();
          this.focusNext();
          break;
        case 'ArrowUp':
          event.preventDefault();
          this.focusPrev();
          break;
        case 'Home':
          event.preventDefault();
          this.focusItem(0);
          break;
        case 'End':
          event.preventDefault();
          this.focusItem(this.items.length - 1);
          break;
        case 'Enter':
          event.preventDefault();
          this.selectCurrent();
          break;
        case 'Escape':
          event.preventDefault();
          this.close();
          this.trigger.focus();
          break;
      }
    });
  }

  focusItem(index) {
    if (index < 0 || index >= this.items.length) return;

    this.currentIndex = index;
    this.items[index].focus();

    // 시각적 강조
    this.items.forEach((item, i) => {
      item.setAttribute('aria-selected', i === index);
    });
  }

  focusNext() {
    const nextIndex = this.currentIndex + 1;
    if (nextIndex < this.items.length) {
      this.focusItem(nextIndex);
    }
  }

  focusPrev() {
    const prevIndex = this.currentIndex - 1;
    if (prevIndex >= 0) {
      this.focusItem(prevIndex);
    }
  }

  open() {
    this.menu.classList.add('visible');
  }

  close() {
    this.menu.classList.remove('visible');
    this.currentIndex = -1;
  }

  selectCurrent() {
    if (this.currentIndex >= 0) {
      this.items[this.currentIndex].click();
    }
    this.close();
  }
}

class TreeWidget {
  constructor(rootElement) {
    this.root = rootElement;
    this.setupListeners();
  }

  setupListeners() {
    this.root.addEventListener('keydown', (event) => {
      const item = event.target.closest('[role="treeitem"]');
      if (!item) return;

      switch (event.key) {
        case 'ArrowRight':
          event.preventDefault();
          this.expandItem(item);
          break;
        case 'ArrowLeft':
          event.preventDefault();
          this.collapseItem(item);
          break;
        case 'ArrowDown':
          event.preventDefault();
          this.focusNextItem(item);
          break;
        case 'ArrowUp':
          event.preventDefault();
          this.focusPrevItem(item);
          break;
        case 'Home':
          event.preventDefault();
          this.focusFirstItem();
          break;
        case 'End':
          event.preventDefault();
          this.focusLastItem();
          break;
        case '*': // 모든 항목 확장
          event.preventDefault();
          this.expandAll();
          break;
      }
    });
  }

  expandItem(item) {
    item.setAttribute('aria-expanded', 'true');
    const children = item.nextElementSibling;
    if (children) {
      children.style.display = 'block';
    }
  }

  collapseItem(item) {
    item.setAttribute('aria-expanded', 'false');
    const children = item.nextElementSibling;
    if (children) {
      children.style.display = 'none';
    }
  }

  // ... 기타 메서드
}

/* ❌ 절대 금지: 포커스 아웃라인 제거 후 대체 없음 */
button:focus {
  outline: none;
}

/* ✅ 권장: 명확한 포커스 스타일 */
button:focus {
  outline: 3px solid #4A90E2;
  outline-offset: 2px;
}

/* 포괄적 포커스 스타일 */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  :focus-visible {
    outline-color: #58A6FF;
  }
}

/* 고대비 모드 지원 */
@media (prefers-contrast: more) {
  :focus-visible {
    outline-width: 4px;
    outline-offset: 3px;
  }
}

/* :focus - 모든 포커스 상태 */
button:focus {
  background: blue;
}

/* :focus-visible - 키보드 포커스만 */
button:focus-visible {
  outline: 3px solid blue;
}

/* 결과: 마우스 클릭은 파란색 배경만, 키보드 Tab은 파란색 아웃라인 표시 */

class AccessibleDragDrop {
  constructor(items, container) {
    this.items = items;
    this.container = container;
    this.selectedItem = null;
    this.sourceIndex = null;

    this.setupListeners();
  }

  setupListeners() {
    // 각 항목에 대해 위치 변경 메뉴 제공
    this.items.forEach((item, index) => {
      item.setAttribute('draggable', 'true');
      item.setAttribute('role', 'button');
      item.setAttribute('tabindex', '0');

      // 마우스 드래그
      item.addEventListener('dragstart', (e) => {
        this.sourceIndex = index;
      });

      item.addEventListener('drop', (e) => {
        e.preventDefault();
        if (this.sourceIndex !== null) {
          this.moveItem(this.sourceIndex, index);
        }
      });

      // 키보드 내비게이션
      item.addEventListener('keydown', (e) => {
        const currentIndex = Array.from(this.items).indexOf(item);

        switch (e.key) {
          case 'ArrowUp':
          case 'ArrowLeft':
            if (currentIndex > 0) {
              e.preventDefault();
              this.moveItem(currentIndex, currentIndex - 1);
              this.items[currentIndex - 1].focus();
            }
            break;
          case 'ArrowDown':
          case 'ArrowRight':
            if (currentIndex < this.items.length - 1) {
              e.preventDefault();
              this.moveItem(currentIndex, currentIndex + 1);
              this.items[currentIndex + 1].focus();
            }
            break;
        }
      });
    });
  }

  moveItem(fromIndex, toIndex) {
    const items = Array.from(this.items);
    const [movedItem] = items.splice(fromIndex, 1);
    items.splice(toIndex, 0, movedItem);

    // DOM 업데이트
    this.container.innerHTML = '';
    items.forEach(item => this.container.appendChild(item));
    this.items = this.container.querySelectorAll('[draggable]');
    this.setupListeners();
  }
}

<!-- 각 항목마다 이동 버튼 제공 -->
<div class="list-item">
  <span>항목 1</span>
  <button aria-label="위로 이동">▲</button>
  <button aria-label="아래로 이동">▼</button>
</div>

/* ❌ 절대 금지 */
* {
  outline: none;
}

/* 또는 */
button:focus {
  outline: 0;
}

// ❌ 문제: div에 click만 있으면 키보드 미지원
div.addEventListener('click', handleClick);

// ✅ 올바름: button이나 keydown도 처리
button.addEventListener('click', handleClick);
button.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    handleClick();
  }
});

/* ❌ 문제: display: none하면 포커스도 불가능 */
.hidden {
  display: none;
}

/* ✅ 시각적으로는 숨기되 포커스는 가능 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

// ❌ 문제: 사용자가 천천히 키보드로 입력하면 타임아웃
const timeout = setTimeout(() => {
  closeForm();
}, 5000);

// ✅ 사용자가 활동 중이면 타임아웃 연장
document.addEventListener('keydown', () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => closeForm(), 5000);
});

1. 마우스를 치워둔다
2. 키보드만으로 웹사이트를 탐색한다:
   - Tab으로 모든 기능에 접근할 수 있는가?
   - 포커스 위치가 보이는가?
   - 탭 순서가 논리적인가?
   - 타이핑 속도가 느려도 작동하는가?
3. 스크린 리더와 함께 사용해본다

// axe DevTools, WAVE, Lighthouse 사용
// 또는 프로그래매틱 테스트:

test('모든 버튼이 키보드로 활성화 가능', () => {
  const buttons = document.querySelectorAll('button');
  buttons.forEach(button => {
    const keyboardActivated = new KeyboardEvent('keydown', {
      key: 'Enter'
    });
    button.dispatchEvent(keyboardActivated);
    // 활성화 확인
  });
});