접근성을 고려한 실전 모달 구현기 (Modal)

 

 

 

 

모달은 UI에서 자주 쓰이는 컴포넌트지만,

 

접근성까지 챙긴 구현은 생각보다 드뭅니다.

 

이 글에서는 기본적인 바닐라 자바스크립트 모달 구현법부터,

 

스크린리더와 키보드 사용자도 고려한 접근성 개선 포인트까지 다뤄봅니다.

 

실무에 바로 적용할 수 있는 예제 코드도 함께 제공하니,

 

복잡한 프레임워크 없이 순수 JS로도 충분히 멋진 접근성 모달을 만들어보세요!

 

 

---

✨ 기본 모달 구현

간단한 자바스크립트로 버튼 클릭 시 모달을 띄우고 닫는 기본 구조입니다.

 

✅ HTML 구조

 

<button id="openModal">모달 열기</button>

<div id="modal" class="modal" hidden>
  <div class="modal-content" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <h2 id="modalTitle">모달 제목</h2>
    <p>모달 내용입니다.</p>
    <button id="closeModal">닫기</button>
  </div>
</div>

 

✅ JS 기본 로직

 

const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');

openBtn.addEventListener('click', () => {
  modal.hidden = false;
});

closeBtn.addEventListener('click', () => {
  modal.hidden = true;
});

 

✅ 기본 스타일 (선택)

 

.modal {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: white;
  padding: 2em;
  border-radius: 8px;
}

 

---

♿ 접근성을 반영한 모달 개선 포인트

 

위 코드에 약간의 기능만 추가하면 훨씬 접근성 높은 모달이 됩니다.

 

여기서는 운영 서비스에 실제 적용했던 접근성 사례들을 기반으로 설명합니다.

 

1. 포커스 트랩

 

모달 안에서 Tab 키로 포커스가 순환하도록 설정합니다.

 

모달이 열리면 포커스가 첫 번째 포커스 가능한 요소로 이동하고,

 

Shift + Tab이나 Tab으로 포커스가 바깥으로 나가지 않게 막는 방식입니다.

 

const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
const modalContent = modal.querySelector('.modal-content');

function trapFocus(e) {
  const focusableElements = modalContent.querySelectorAll(focusableSelectors);
  const firstEl = focusableElements[0];
  const lastEl = focusableElements[focusableElements.length - 1];

  if (e.key === 'Tab') {
    if (e.shiftKey && document.activeElement === firstEl) {
      e.preventDefault();
      lastEl.focus();
    } else if (!e.shiftKey && document.activeElement === lastEl) {
      e.preventDefault();
      firstEl.focus();
    }
  }
}

 

2. ESC 키로 닫기

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && !modal.hidden) {
    modal.hidden = true;
    openBtn.focus();
  }
});

 

3. ARIA 속성 적용

• role="dialog": 스크린리더가 대화창임을 인지합니다.
• aria-modal="true": 배경과 분리된 독립 레이어임을 알립니다.
• aria-labelledby="modalTitle": 타이틀을 참조해 제목을 알려줍니다.

 

4. 포커스 복귀

모달을 닫을 때는 다시 트리거 된 요소(예: "모달 열기" 버튼)로 포커스를 되돌려 사용자 흐름을 끊지 않아야 합니다.

 

---

✅ 구조적·시각적 개선 아이디어

 

🎯 1. 애니메이션으로 부드러운 전환 효과 추가

모달이 열리고 닫힐 때 부드러운 트랜지션을 주면 사용자 경험이 훨씬 자연스러워집니다.

.modal[hidden] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal {
  opacity: 1;
  transition: opacity 0.3s ease;
}

 

JS에서는 modal.hidden = false; 대신 modal.classList.add('visible'),

 

닫을 땐 remove('visible')로 토글 하면서 애니메이션을 적용하면 좋아요.

 

🔧 2. 모달 여러 개 대응을 위한 구조 일반화

 

모달이 하나뿐이 아닐 경우를 대비해,

 

JS 구조를 함수형으로 만들어두면 재사용성이 좋아집니다.

function openModal(modalId) {
  const modal = document.getElementById(modalId);
  modal.hidden = false;
  trapFocus(modal); // 포커스 트랩 함수 재활용
}

function closeModal(modalId) {
  const modal = document.getElementById(modalId);
  modal.hidden = true;
}

 

추후 CAD 다운로드나 공지사항 팝업 등에도 동일한 구조로 대응할 수 있어요.

 

🧭 3. 배경 클릭으로 모달 닫기 기능

 

의외로 사용자가 자연스럽게 기대하는 기능 중 하나예요.

modal.addEventListener('click', (e) => {
  if (e.target === modal) {
    modal.hidden = true;
    openBtn.focus();
  }
});

 

🪡 4. CSS 변수 활용한 테마 스타일

 

모달 배경색, 그림자, 여백 등을 CSS 변수로 추출하면

 

여러 환경에 재사용하기 쉬워요.

 

:root {
  --modal-bg: #fff;
  --modal-overlay: rgba(0, 0, 0, 0.4);
}

.modal {
  background-color: var(--modal-overlay);
}
.modal-content {
  background-color: var(--modal-bg);
}

 

🌐 5. 다국어 대응을 위한 텍스트 관리 구조

 

프로젝트에서 다국어 페이지도 있었던 걸로 보이는데요,

 

모달 텍스트도 속성 기반으로 분리해두면 국제화에 유리해요.

 

<p data-text="modal.message">모달 내용입니다.</p>

 

const i18n = {
  ko: {
    'modal.message': '모달 내용입니다.',
  },
  en: {
    'modal.message': 'This is modal content.',
  },
};

function applyLang(lang) {
  document.querySelectorAll('[data-text]').forEach((el) => {
    const key = el.getAttribute('data-text');
    el.textContent = i18n[lang][key] || '';
  });
}

 

 

---

📌 마무리하며

 

접근성은 한 번에 완벽하게 하기보다,

 

꾸준히 개선해가는 여정에 가까워요.

 

이 글이 여러분이 만든 모달 하나하나에

 

더 많은 사용자가 접근할 수 있게 만드는 작은 출발점이 되었으면 합니다.