웹 접근성 기초

웹 접근성 기초 (Web Accessibility / ARIA)

비장애인은 햄버거 아이콘(줄 3개)을 보면 "아, 저걸 누르면 메뉴가 열리겠구나" 하고 눈으로 보고 직관적으로 압니다.
하지만 눈이 보이지 않아 화면 낭독기(스크린 리더)를 사용하는 시각 장애인은 어떨까요? 컴퓨터는 햄버거 모양의 그림판을 보고 스스로 "메뉴"라고 말해주지 못합니다.
이럴 때 시각장애인에게 정확한 길과 정보를 알려주는 것이 바로 ARIA(Accessible Rich Internet Applications) 속성들입니다.

1. 스크린 리더와 맹인 안내견 비유

단순히 예쁜 웹사이트를 넘어, 모든 사람이 차별 없이 사용할 수 있는 따뜻한 웹을 만드는 것은 선진국형 프론트엔드 개발자의 필수 소양입니다.

☰

ARIA 적용 전 (위험)

낭독기: "버튼입니다."
(무슨 기능인지 전혀 모름)

➡️

🦮

☰

ARIA 적용 후 (안전)

aria-label="메뉴 열기"

안내견(낭독기):
"메뉴 열기 버튼입니다!"

2. 반드시 알아야 할 접근성 속성 (A11y)

태그명 및 속성	설명 및 역할
`aria-label="이름"`	눈에 보이는 텍스트가 없는 아이콘 버튼 등에 사용됩니다. 스크린 리더에게 "이 버튼은 메뉴 열기 용도입니다" 라고 귀뜸해주는 보이지 않는 대체 텍스트입니다.
`aria-hidden="true"`	예쁘게 꾸미려고 넣은 장식용 아이콘이나 의미 없는 도형을 낭독기가 "이상한 기호"라며 읽지 않도록 쉿! 하고 음소거 시켜 무시하게 만듭니다.
`role="button"`	부득이하게 `<button>` 대신 `<div>`나 `<span>`으로 커스텀 버튼을 만들었을 때, 보조 기기에게 "내 본질은 사실 클릭되는 버튼이야!" 라고 명시적으로 선언합니다.
`aria-expanded="..."`	아코디언 메뉴나 드롭다운이 현재 펼쳐져 있는지(true) 닫혀 있는지(false)의 상태 변화를 시각장애인에게 실시간으로 알려줍니다.

<div class="a11y-container">
  <h2>접근성 (A11y) 체크리스트</h2>

  <!-- 1. aria-label: 시각장애인용 아이콘 대체 텍스트 -->
  <div class="card">
    <h3>1. 이름이 없는 아이콘 버튼 (aria-label)</h3>
    <p class="desc">눈이 보이는 사람에겐 햄버거 메뉴지만, 스크린 리더에겐 이름이 없습니다.</p>
    
    <div class="demo-box">
      <!-- 이 버튼은 시각장애인에게 "메뉴 열기 버튼"으로 읽힙니다 -->
      <button class="icon-btn" aria-label="메뉴 열기">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </button>
      <span class="sr-read">낭독기: "메뉴 열기"</span>
    </div>
  </div>

  <!-- 2. aria-hidden: 불필요한 장식 숨기기 -->
  <div class="card">
    <h3>2. 시각적 장식 숨기기 (aria-hidden)</h3>
    <p class="desc">낭독기가 장식용 이모티콘을 "자물쇠 기호 보안이 강화..." 라고 읽지 않도록 막습니다.</p>
    
    <div class="demo-box">
      <!-- 자물쇠 아이콘은 시각 장애인에게 읽히지 않고 건너뜁니다 -->
      <span aria-hidden="true" class="deco-icon">🔒</span>
      <span class="secure-text">결제 정보가 안전하게 보호됩니다.</span>
    </div>
  </div>

  <!-- 3. role: 태그의 본질 알려주기 -->
  <div class="card">
    <h3>3. 가짜 버튼 구출하기 (role="button")</h3>
    <p class="desc">어쩔 수 없이 div로 버튼을 만들었다면, 본질을 알려주고 키보드 접근(tabindex)을 허용해야 합니다.</p>
    
    <div class="demo-box">
      <!-- div지만 스크린 리더는 '버튼'으로 인식하고, 키보드 Tab 키로 선택 가능해집니다 -->
      <div class="fake-btn" role="button" tabindex="0" onclick="alert('클릭됨!')" onkeydown="if(event.key==='Enter') alert('키보드로 실행됨!')">
        나는 div로 만든 커스텀 버튼
      </div>
    </div>
  </div>
</div>

🔒 localhost:8000/preview