웹 접근성
개선 사례

<!-- ✅ 이미지 내용을 구체적으로 설명 -->
<img src="banner_main.jpg"
     alt="5G 요금제 여름 특가, 최대 50% 할인">

<!-- ✅ 맥락에 맞는 구체적 alt -->
<img src="event.jpg"
     alt="7월 한정 요금제 출시 이벤트">

<!-- ✅ 장식용 이미지는 alt="" 빈 값 처리 -->
<!-- ✅ 오래된 브라우저/보조공학기기 대응 role 추가 -->
<img src="divider.png"
     alt="" role="presentation">

<!-- ✅ type + aria-label 명시 -->
<button type="button"
        class="btn-close"
        aria-label="팝업 닫기">
  <img src="icon-close.svg" alt="">
</button>

<!-- ✅ 맥락을 담은 aria-label -->
<button type="button"
        aria-label="5G 요금제 더보기">더보기</button>
<button type="button"
        aria-label="인터넷 요금제 더보기">더보기</button>

<!-- ✅ role + aria 속성 + 포커스 이동 -->
<div class="modal" id="modal"
     role="dialog"
     aria-modal="true"
     aria-labelledby="modal-title">
  <h2 id="modal-title"
      tabindex="-1">제목</h2>
  <button type="button"
          aria-label="모달 닫기">닫기</button>
</div>

<script>
function openModal() {
  const modal = document.getElementById('modal');
  modal.style.display = 'block';
  modal.querySelector('#modal-title').focus();
}
</script>

<!-- ✅ for-id로 label과 input 연결 -->
<div class="form-group">
  <label for="input-name">이름</label>
  <input type="text"
         id="input-name"
         placeholder="홍길동">
</div>

<!-- ✅ label + placeholder 함께 제공 -->
<label for="input-email">이메일</label>
<input type="email"
       id="input-email"
       placeholder="example@email.com">

<!-- ✅ visually-hidden: 화면엔 숨기고 보조기술엔 전달 -->
<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: 0;
  }
</style>

<a href="/cart">
  <img src="icon-cart.svg" alt="">
  <span class="visually-hidden">장바구니</span>
</a>

<!-- ✅ aria-describedby + role="tooltip" -->
<div class="tooltip-wrap">
  <button type="button"
          aria-label="요금제 안내"
          aria-describedby="tooltip-plan">
    ?
  </button>
  <span id="tooltip-plan"
        role="tooltip">
    요금제 상세 안내입니다.
  </span>
</div>

<style>
  /* hover + focus-within 모두 대응 */
  .tooltip-wrap:hover .tooltip,
  .tooltip-wrap:focus-within .tooltip {
    display: block;
  }
</style>

<!-- ✅ ARIA role로 탭 구조 명시 -->
<div role="tablist"
     aria-label="요금제 종류">
  <button type="button"
          role="tab"
          aria-selected="true"
          aria-controls="panel-5g">
    5G 요금제
  </button>
  <button type="button"
          role="tab"
          aria-selected="false"
          aria-controls="panel-lte">
    LTE 요금제
  </button>
</div>
<div id="panel-5g"
     role="tabpanel">
  5G 요금제 내용
</div>

<!-- ✅ aria-expanded + aria-controls -->
<div class="accordion">
  <button type="button"
          class="accordion-btn"
          aria-expanded="false"
          aria-controls="faq-panel-1">
    자주 묻는 질문
  </button>
  <div id="faq-panel-1"
       hidden>
    답변 내용
  </div>
</div>

<!-- JS: 클릭 시 상태 토글 -->
btn.setAttribute('aria-expanded', 'true');
panel.removeAttribute('hidden');

<!-- ✅ caption + thead + scope 적용 -->
<table>
  <caption>5G 요금제 비교표</caption>
  <thead>
    <tr>
      <th scope="col">요금제명</th>
      <th scope="col">월정액</th>
      <th scope="col">데이터</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5G 베이직</td>
      <td>55,000원</td>
      <td>10GB</td>
    </tr>
  </tbody>
</table>

<!-- ✅ 새 창 — hidden 텍스트로 새창 안내 -->
<a href="https://external.com"
   target="_blank">
  요금제 안내 바로가기
  <span class="visually-hidden">(새 창으로 열림)</span>
</a>

<!-- ✅ 팝업 — button 태그로 명확히 구분 -->
<button type="button"
        aria-haspopup="dialog">
  팝업으로 자세히 보기
</button>

<!-- ✅ 페이지 이동 — 앵커 id 연결 -->
<a href="#section-plan">
  요금제 자세히 보기
</a>