웹 접근성은 모든 사용자가 웹사이트나 애플리케이션을 쉽게 이용할 수 있도록 하는 것을 의미합니다. 자바스크립트로 개발된 달력 컴포넌트도 웹 접근성을 고려해야 합니다. 이 글에서는 웹 접근성을 고려한 자바스크립트 달력 컴포넌트를 개발하는 방법을 알아보겠습니다.
1. 마크업 구조 설계
웹 접근성을 고려한 달력 컴포넌트를 만들기 위해서는 마크업 구조를 잘 설계해야 합니다. 모든 날짜와 버튼에는 명확하고 의미있는 레이블을 제공해야 합니다. 이를 위해 <button> 요소를 사용하고, aria-label 속성을 이용하여 버튼에 직접적인 설명을 제공합니다. 또한, 날짜와 관련된 설명을 제공하기 위해 aria-describedby 속성을 사용할 수도 있습니다.
<div id="calendar" role="application">
<button aria-label="이전 달로 이동">이전</button>
<div role="heading" aria-level="2" id="currentMonth">...</div>
<button aria-label="다음 달로 이동">다음</button>
<table aria-describedby="caption" id="calendarTable">
<caption id="caption">...</caption>
<thead>
<tr>
<th scope="col" abbr="일요일">일</th>
<th scope="col" abbr="월요일">월</th>
<th scope="col" abbr="화요일">화</th>
<th scope="col" abbr="수요일">수</th>
<th scope="col" abbr="목요일">목</th>
<th scope="col" abbr="금요일">금</th>
<th scope="col" abbr="토요일">토</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
</tr>
<!-- 나머지 날짜들 -->
</tbody>
</table>
</div>
2. 키보드 접근성 고려
키보드 사용자를 위해 달력 컴포넌트는 키보드로 조작할 수 있도록 해야 합니다. 컴포넌트 전체에 tabindex 속성을 추가하여 키보드 포커스를 받을 수 있도록 합니다. 이후 사용자가 키보드로 다음/이전 버튼을 선택하면, JavaScript 이벤트를 통해 적절한 동작이 수행되도록 합니다.
const calendar = document.getElementById("calendar");
const prevButton = calendar.querySelector("button[aria-label='이전 달로 이동']");
const nextButton = calendar.querySelector("button[aria-label='다음 달로 이동']");
prevButton.addEventListener("click", moveToPrevMonth);
nextButton.addEventListener("click", moveToNextMonth);
function moveToPrevMonth() {
// 이전 달로 이동하는 로직 작성
}
function moveToNextMonth() {
// 다음 달로 이동하는 로직 작성
}
3. 시각 디자인과 대비 고려
달력 컴포넌트의 시각 디자인은 사용자 경험을 향상시키는 중요한 요소입니다. 그러나 시각 디자인을 구성할 때는 적절한 색상 대비를 고려해야 합니다. 낮은 대비의 색상은 시각적으로 저시력자나 색약자와 같은 사용자에게 어려움을 줄 수 있습니다. 따라서 색상 대비 테스트 도구를 사용하여 적절한 대비를 확인하고, 웹 접근성 지침에 따라 대비를 개선하는 작업을 수행해야 합니다.
4. 사용자 피드백을 제공
달력 컴포넌트는 사용자에게 피드백을 제공해야 합니다. 예를 들어, 날짜를 선택하거나 이동할 때 사용자에게 선택한 날짜를 알려주는 메시지를 표시할 수 있습니다. 성공적인 작업 완료 등의 상태 메시지도 필요할 수 있습니다. 이러한 피드백은 저시력자나 스크린 리더 사용자와 같은 사용자들에게 특히 중요합니다. aria-live 속성을 사용하여 동적인 업데이트를 제공할 수 있습니다.
const dateCells = calendar.querySelectorAll("td"); // 달력 내 각 날짜 셀
const currentMonth = calendar.querySelector("#currentMonth"); // 현재 월 표시 엘리먼트
dateCells.forEach((cell) => {
cell.addEventListener("click", selectDate);
});
function selectDate() {
const selectedDate = ...; // 선택한 날짜 로직 작성
currentMonth.textContent = `${selectedDate.getFullYear()}년 ${selectedDate.getMonth() + 1}월`;
const announce = document.createElement("div");
announce.textContent = `${selectedDate.getDate()}일 선택`;
announce.setAttribute("role", "status");
announce.setAttribute("aria-live", "polite");
announce.setAttribute("aria-atomic", "true");
announce.classList.add("sr-only"); // 스크린 리더에만 읽히도록 숨김 스타일을 적용한 클래스
document.body.appendChild(announce);
}
위의 방법들을 고려하여 웹 접근성을 고려한 자바스크립트 달력 컴포넌트를 개발할 수 있습니다. 접근성은 모든 사용자가 웹을 사용할 수 있는 권리이므로, 개발자는 웹 접근성을 고려한 컴포넌트를 제공함으로써 더 나은 사용자 경험을 제공할 수 있습니다.
참고 자료: