FE Lab — 프론트엔드 면접 인터랙티브 학습

01 · Concept

웹 접근성 (Web Accessibility)

웹 접근성은 모든 사용자가 장애 여부와 관계없이 웹 콘텐츠를 동등하게 이용할 수 있도록 보장하는 것입니다.

시맨틱 HTML을 사용하면 브라우저와 보조 기술이 문서 구조를 올바르게 해석할 수 있습니다. ARIA 속성은 동적 UI의 역할, 상태, 관계를 보조 기술에 전달합니다. 키보드 접근성을 보장하면 마우스를 사용할 수 없는 사용자도 모든 기능에 접근할 수 있습니다. WCAG 2.1 AA 수준을 목표로 구현하는 것이 권장됩니다.

02 · Interactive Demo

접근성 시각화

시맨틱 HTML vs div 비교, ARIA 속성 적용, 키보드 네비게이션을 테스트하세요.

div 남용 (Bad)

<div class="header">
  <div class="logo">사이트명</div>
  <div class="nav">
    <div class="nav-item">홈</div>
    <div class="nav-item">소개</div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">제목</div>
    <div class="content">본문...</div>
  </div>
</div>
<div class="footer">© 2024</div>

시맨틱 HTML (Good)

<header>
  <h1>사이트명</h1>
  <nav>
    <a href="/">홈</a>
    <a href="/about">소개</a>
  </nav>
</header>
<main>
  <article>
    <h2>제목</h2>
    <p>본문...</p>
  </article>
</main>
<footer>© 2024</footer>

스크린 리더 인식 결과

📢 group: "사이트명" (구조 불명)

📢 group: "홈" "소개" (역할 불명)

📢 group: "제목" "본문..." (역할 불명)

03 · Code Example

코드 예시

실제 코드로 동작 원리를 확인하세요.

// 시맨틱 태그로 문서 구조를 명확하게 전달
<header>
  <h1>사이트 제목</h1>
  <nav aria-label="메인 네비게이션">
    <ul>
      <li><a href="/">홈</a></li>
      <li><a href="/about">소개</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>글 제목</h2>
    <time datetime="2024-01-01">2024년 1월 1일</time>
    <p>본문 내용...</p>
    <figure>
      <img src="chart.png" alt="2024년 매출 현황 차트" />
      <figcaption>2024년 분기별 매출</figcaption>
    </figure>
  </article>

  <aside>
    <h3>관련 글</h3>
    <ul>...</ul>
  </aside>
</main>

<footer>
  <p>© 2024 Company. All rights reserved.</p>
</footer>

04 · Interview Point

면접 핵심 질문

웹 접근성은 장애인, 고령자 등 모든 사용자가 웹 콘텐츠를 동등하게 이용할 수 있도록 보장하는 것입니다. 시각, 청각, 운동, 인지 장애를 가진 사용자도 스크린 리더, 키보드, 음성 인식 등의 보조 기술로 웹을 사용할 수 있어야 합니다.WCAG (Web Content Accessibility Guidelines)가 국제 표준이며, 한국은 "한국형 웹 콘텐츠 접근성 지침 2.2"를 따릅니다.

ARIA (Accessible Rich Internet Applications)는 HTML의 접근성을 보완하는 속성 집합입니다.
1. 역할(role) — 요소의 목적을 정의합니다: role="navigation", role="alert", role="dialog" 등.
2. 속성(properties) — 요소의 특성을 설명합니다: aria-label, aria-describedby.
3. 상태(states) — 현재 상태를 전달합니다: aria-expanded, aria-hidden, aria-disabled.

첫 번째 규칙: 네이티브 HTML 요소로 충분하면 ARIA를 사용하지 마세요. <button>이 div role="button"보다 항상 낫습니다.

1. 모든 인터랙티브 요소에 Tab으로 접근 가능해야 합니다. 네이티브 요소(<button>, <a>)를 우선 사용하세요.
2. 포커스 표시(focus indicator)를 제거하지 마세요. :focus-visible로 키보드 포커스만 스타일링할 수 있습니다.
3. 포커스 트랩 — 모달, 드롭다운 등에서 포커스가 밖으로 빠져나가지 않도록 합니다.
4. Skip Navigation — 반복되는 네비게이션을 건너뛸 수 있는 링크를 제공합니다.
5. Roving tabindex — 그룹 내에서 Arrow 키로 이동하고 하나만 tabIndex=0을 유지합니다.