[웹접근성 완벽가이드 ③] 웹접근성 코딩예제 모음(WAI-ARIA)

접근성 코딩 예제를 정리입니다. 실무 및 교육에 활용할 수 있도록 각 예제에는 코드와 설명, 접근성 포인트를 함께 포함하였습니다.

웹접근성 코딩 예제 모음 (WAI-ARIA 활용)

1. 커스텀 버튼에 Role과 키보드 접근성 추가

<div role="button" tabindex="0" aria-pressed="false" onclick="toggleLike(this)" onkeydown="if(event.key==='Enter') toggleLike(this)">
  좋아요
</div>

<script>
  function toggleLike(el) {
    const pressed = el.getAttribute("aria-pressed") === "true";
    el.setAttribute("aria-pressed", !pressed);
  }
</script>

접근성 포인트

• role="button": 스크린리더가 버튼으로 인식
• tabindex="0": 키보드 포커스 가능
• aria-pressed: 현재 상태 전달
• onkeydown: 키보드(Enter) 조작 가능

2. 아코디언(접이식 메뉴) 구현

<button aria-expanded="false" aria-controls="panel1" onclick="togglePanel(this)">
  FAQ 보기
</button>
<div id="panel1" hidden>
  이곳은 FAQ 내용입니다.
</div>

<script>
  function togglePanel(btn) {
    const panel = document.getElementById(btn.getAttribute("aria-controls"));
    const expanded = btn.getAttribute("aria-expanded") === "true";
    btn.setAttribute("aria-expanded", !expanded);
    panel.hidden = expanded;
  }
</script>

접근성 포인트

• aria-expanded: 펼침/접힘 상태 전달
• aria-controls: 버튼이 제어하는 대상 ID 연결
• hidden 속성: 보조기술에 보이지 않게 처리
  
  

3. 스크린리더 전용 텍스트

<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
  }
</style>

<button>
  <span class="sr-only">검색하기</span>
  <img src="search-icon.svg" alt="" />
</button>

접근성 포인트

• .sr-only: 시각적으로 숨김 + 스크린리더 읽힘
• alt="": 이미지 설명 제거 (중복 방지)
• 버튼 역할은 명확히 전달

4. 모달 다이얼로그 접근성

<button onclick="openModal()">설정 열기</button>

<div id="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" hidden>
  <h2 id="modalTitle">설정</h2>
  <p>이곳에서 계정 설정을 할 수 있습니다.</p>
  <button onclick="closeModal()">닫기</button>
</div>

<script>
  function openModal() {
    const modal = document.getElementById("modal");
    modal.hidden = false;
  }
  function closeModal() {
    document.getElementById("modal").hidden = true;
  }
</script>

접근성 포인트

• role="dialog": 모달 대화창임을 명시
• aria-modal="true": 모달임을 선언
• aria-labelledby: 제목 참조 연결
  
  

5. 탭 인터페이스

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="tab1" id="tab-btn1">탭 1</button>
  <button role="tab" aria-selected="false" aria-controls="tab2" id="tab-btn2">탭 2</button>
</div>

<div id="tab1" role="tabpanel" aria-labelledby="tab-btn1">탭 1의 내용입니다.</div>
<div id="tab2" role="tabpanel" aria-labelledby="tab-btn2" hidden>탭 2의 내용입니다.</div>

접근성 포인트

• role="tablist": 탭 모음 정의
• role="tab": 개별 탭
• aria-selected: 현재 선택된 탭
• role="tabpanel" + aria-labelledby: 연결된 콘텐츠 영역
  
  

마무리 안내

위 예제들은 HTML 시맨틱 태그에 ARIA 속성을 조합하여 접근성을 강화한 실전 예제입니다.

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.