AI 시대의 웹접근성: 기술 발전과 함께 가야 할 보편적 가치

<!-- 잘못된 예: AI 챗봇 버튼 -->
<div class="chat-button" onclick="openChat()">
  <img src="chat-icon.png">
</div>

<!-- 올바른 예: 접근 가능한 AI 챗봇 버튼 -->
<button
  type="button"
  aria-label="AI 채팅 도우미 열기"
  aria-expanded="false"
  aria-controls="chat-widget"
  onclick="openChat()">
  <img src="chat-icon.png" alt="채팅 아이콘">
</button>

<!-- AI가 만든 코드 (문제가 있어요) -->
<div class="card">
  <img src="product.jpg">
  <div class="title">제품명</div>
  <div class="price">29,900원</div>
  <div class="button" onclick="buy()">구매하기</div>
</div>

<!-- 접근성을 고려한 코드 -->
<article class="card">
  <img src="product.jpg" alt="무선 이어폰 블랙 색상">
  <h3>무선 이어폰</h3>
  <p><strong>가격:</strong> 29,900원</p>
  <button type="button" onclick="buy()">구매하기</button>
</article>

<!-- 나쁜 예 -->
<img src="chart.png">

<!-- 좋은 예 -->
<img
  src="chart.png"
  alt="2024년 월별 매출 추이: 1월 100만원부터 12월 300만원까지 지속 상승">

/* 나쁜 예: 대비율 2.5:1 (WCAG AA 기준 미달) */
.text {
  color: #999999;
  background: #ffffff;
}

/* 좋은 예: 대비율 4.5:1 이상 (WCAG AA 통과) */
.text {
  color: #595959;
  background: #ffffff;
}

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track
    kind="captions"
    src="captions-ko.vtt"
    srclang="ko"
    label="한국어 자막">
  <track
    kind="captions"
    src="captions-en.vtt"
    srclang="en"
    label="English Captions">
</video>

// AI 모달 열기
function openModal() {
  const modal = document.getElementById('modal');
  const closeButton = modal.querySelector('.close-button');

  modal.style.display = 'block';
  modal.setAttribute('aria-hidden', 'false');

  // 모달이 열리면 첫 번째 포커스 가능한 요소로 포커스 이동
  closeButton.focus();

  // 모달 내부에서만 탭 이동 (포커스 트랩)
  trapFocus(modal);
}

// 포커스 트랩 함수
function trapFocus(element) {
  const focusableElements = element.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];

  element.addEventListener('keydown', function(e) {
    if (e.key !== 'Tab') return;

    if (e.shiftKey) {
      // Shift + Tab: 역방향 이동
      if (document.activeElement === firstElement) {
        lastElement.focus();
        e.preventDefault();
      }
    } else {
      // Tab: 정방향 이동
      if (document.activeElement === lastElement) {
        firstElement.focus();
        e.preventDefault();
      }
    }
  });
}

<!-- 페이지 최상단에 배치 -->
<a href="#main-content" class="skip-link">
  본문으로 바로가기
</a>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 9999;
}

.skip-link:focus {
  top: 0; /* 포커스 시 나타남 */
}
</style>

/* 포커스 표시 최소 기준 충족 */
button:focus,
a:focus,
input:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
  /* 최소 2px 두께, 요소 경계에서 2px 떨어진 위치 */
}

/* 대비율 3:1 이상 확보 */
.dark-theme button:focus {
  outline-color: #4d94ff; /* 어두운 배경에서도 충분한 대비 */
}

<!-- 나쁜 예 -->
<form>
  <input type="email" required>
  <span class="error">잘못된 입력</span>
</form>

<!-- 좋은 예 -->
<form>
  <label for="email">이메일 주소</label>
  <input
    type="email"
    id="email"
    aria-describedby="email-error"
    aria-invalid="true"
    required>
  <span id="email-error" class="error" role="alert">
    올바른 이메일 형식이 아닙니다. 예: [email protected]
  </span>
</form>

<!-- 모든 페이지에서 동일한 위치에 도움말 배치 -->
<nav aria-label="주요 메뉴">
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="/about">소개</a></li>
    <li><a href="/services">서비스</a></li>
    <li><a href="/help">도움말</a></li> <!-- 항상 동일한 순서 -->
  </ul>
</nav>

<!-- 나쁜 예: div 남발 -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
</div>
<div class="footer">...</div>

<!-- 좋은 예: 시맨틱 HTML -->
<header>
  <nav aria-label="주요 메뉴">...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

<!-- ARIA 사용 원칙: 시맨틱 HTML이 우선 -->

<!-- 나쁜 예: 불필요한 ARIA -->
<button role="button">클릭</button>

<!-- 좋은 예: 시맨틱 HTML만으로 충분 -->
<button>클릭</button>

<!-- ARIA가 필요한 경우: 커스텀 위젯 -->
<div
  role="tablist"
  aria-label="계정 설정">
  <button
    role="tab"
    aria-selected="true"
    aria-controls="panel-1"
    id="tab-1">
    프로필
  </button>
  <button
    role="tab"
    aria-selected="false"
    aria-controls="panel-2"
    id="tab-2">
    보안
  </button>
</div>

// OpenAI Vision API를 활용한 alt 텍스트 생성
async function generateAltText(imageUrl) {
  const response = await openai.chat.completions.create({
    model: "gpt-4o",
    messages: [
      {
        role: "user",
        content: [
          {
            type: "text",
            text: "이 이미지를 시각장애인이 이해할 수 있도록 상세히 설명해주세요. 100자 이내로 작성하세요."
          },
          {
            type: "image_url",
            image_url: { url: imageUrl }
          }
        ]
      }
    ]
  });

  return response.choices[0].message.content;
}

// 사용 예시
const altText = await generateAltText("https://example.com/chart.png");
// 결과: "2024년 매출 추이를 보여주는 선 그래프. 1월 100만원에서 시작하여 12월 300만원까지 꾸준히 증가하는 추세를 나타냄"

<!-- 접근 가능한 AI 챗봇 위젯 -->
<div
  id="chat-widget"
  role="region"
  aria-label="AI 고객 지원 채팅"
  aria-live="polite">

  <div
    id="chat-messages"
    role="log"
    aria-live="polite"
    aria-atomic="false">
    <!-- 메시지가 여기에 추가됨 -->
  </div>

  <form onsubmit="sendMessage(event)">
    <label for="chat-input" class="visually-hidden">
      메시지 입력
    </label>
    <input
      type="text"
      id="chat-input"
      aria-describedby="chat-help"
      placeholder="메시지를 입력하세요">
    <span id="chat-help" class="visually-hidden">
      AI 봇과 대화할 수 있습니다. 엔터키를 눌러 전송하세요.
    </span>
    <button type="submit">전송</button>
  </form>
</div>

<style>
/* 시각적으로 숨기지만 스크린 리더는 읽을 수 있는 텍스트 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
</style>

// Web Speech API를 활용한 음성 안내
function announceToScreenReader(message) {
  const announcement = document.createElement('div');
  announcement.setAttribute('role', 'status');
  announcement.setAttribute('aria-live', 'polite');
  announcement.classList.add('visually-hidden');
  announcement.textContent = message;

  document.body.appendChild(announcement);

  // 1초 후 제거 (스크린 리더가 읽을 시간 확보)
  setTimeout(() => {
    document.body.removeChild(announcement);
  }, 1000);
}

// 사용 예시
announceToScreenReader('새 메시지가 도착했습니다.');

<div class="search-container">
  <div class="search-icon">🔍</div>
  <div class="search-input" contenteditable="true">검색어 입력</div>
  <div class="ai-suggestions">
    <div onclick="selectSuggestion('React')">React</div>
    <div onclick="selectSuggestion('Vue')">Vue</div>
    <div onclick="selectSuggestion('Angular')">Angular</div>
  </div>
</div>

<div class="search-container" role="search">
  <label for="search-input" class="visually-hidden">
    AI 검색
  </label>

  <div class="search-wrapper">
    <span aria-hidden="true">🔍</span>
    <input
      type="text"
      id="search-input"
      role="combobox"
      aria-expanded="true"
      aria-autocomplete="list"
      aria-controls="suggestions-list"
      aria-activedescendant="suggestion-0"
      placeholder="검색어를 입력하세요"
      onkeydown="handleKeyNavigation(event)"
      oninput="updateSuggestions()">
  </div>

  <ul
    id="suggestions-list"
    role="listbox"
    aria-label="AI 추천 검색어">
    <li
      id="suggestion-0"
      role="option"
      aria-selected="true"
      onclick="selectSuggestion('React')"
      onkeydown="handleSelection(event)">
      React
    </li>
    <li
      id="suggestion-1"
      role="option"
      aria-selected="false"
      onclick="selectSuggestion('Vue')">
      Vue
    </li>
    <li
      id="suggestion-2"
      role="option"
      aria-selected="false"
      onclick="selectSuggestion('Angular')">
      Angular
    </li>
  </ul>
</div>

<script>
function handleKeyNavigation(event) {
  const list = document.getElementById('suggestions-list');
  const options = list.querySelectorAll('[role="option"]');
  const currentIndex = Array.from(options).findIndex(
    opt => opt.getAttribute('aria-selected') === 'true'
  );

  let newIndex = currentIndex;

  switch(event.key) {
    case 'ArrowDown':
      newIndex = Math.min(currentIndex + 1, options.length - 1);
      event.preventDefault();
      break;
    case 'ArrowUp':
      newIndex = Math.max(currentIndex - 1, 0);
      event.preventDefault();
      break;
    case 'Enter':
      selectSuggestion(options[currentIndex].textContent);
      event.preventDefault();
      return;
    case 'Escape':
      document.getElementById('search-input').setAttribute('aria-expanded', 'false');
      list.style.display = 'none';
      return;
  }

  // 선택 상태 업데이트
  options.forEach((opt, idx) => {
    opt.setAttribute('aria-selected', idx === newIndex ? 'true' : 'false');
  });

  // aria-activedescendant 업데이트
  document.getElementById('search-input').setAttribute(
    'aria-activedescendant',
    options[newIndex].id
  );

  // 스크린 리더 안내
  announceToScreenReader(options[newIndex].textContent);
}

function selectSuggestion(value) {
  document.getElementById('search-input').value = value;
  document.getElementById('search-input').setAttribute('aria-expanded', 'false');
  document.getElementById('suggestions-list').style.display = 'none';

  announceToScreenReader(`${value} 선택됨`);
}
</script>