[fullcalendar] 앱 접근성 심사 미준수 영역 개선하기

배경설명

• fullcalendar (v.5.11.3) 오픈 라이브러리 활용한 달력 UI에서 앱 접근성 미준수건 검출됨

웹 접근성 이슈

달력 UI 상단 요일, 이벤트, 날짜 텍스트에 스크린리더 초점 접근되지 않음

• 요일 영역 : <a> 태그의 href 속성 미제공
  -> 기능이 없는 case : <a> 태그 삭제 필요!
• 이벤트 및 날짜 영역 : <a> 태그 role="button", 오늘 날짜의 경우 aria-current="date" 추가 필요
  -> 기능이 있는 case : role 속성 추가하여 초점과 정보가 인식되도록 수정 필요!

해결방안

• fullcalendar에서 제공하는 hook 함수 활용하여 javascript 로 html element 속성 제어
• 함수별 호출시점 매핑 (v5 기준, 버전에 따라 함수명이 다를 수 있음)

함수	호출시점
viewDidMount	fullcalendar 달력 UI(월, 주, 일 등)가 완전히 렌더링된 후 호출 (최초 1회만 호출)
eventDidMount	각 이벤트가 달력 UI에 렌더링될 때마다 호출
dayCellDidMount	달력 UI 내 날짜 셀이 렌더링될 때마다 호출

적용소스

var clndObj = new FullCalendar.Calendar(clndEl, {
	...
  	viewDidMount: function() {
  		// 요일 영역 <a> href 속성 추가
    	var headerEls = document.querySelectorAll('.fc-col-header-cell a');
      	headerEls.forEach(function(el) {
          	el.setAttribute('href', 'javascript:void(0);');
        });
    },
  	eventDidMount: function(eventInfo) {
  		// 이벤트 영역 <a> role "button" 속성 추가
      	var eventEl = eventInfo.el;
      	eventEl.setAttribute('role', 'button');
    },
  	dayCellDidMount: function(dayCellInfo) {
  		// 날짜 영역 <a> role 및 aria-current 속성 추가
      	var dayCellEl = dayCellInfo.el;
      	dayCellEl.setAttribute('role', 'button');
      
      	// 오늘 날짜만 aria-current 속성 추가
      	if (DateUtils.getToday() === dayCellInfo.date) {
         	 dayCellEl.setAttribute('aria-current', 'date');
        }
    },
  
  	clndObj.render();
});

결론

• 웹 개발 시 접근성 이슈를 항상 고려하자