웹 접근성은 모든 사용자가 웹 콘텐츠에 동일하게 접근하고 이용할 수 있도록 하는 것을 의미합니다. 이는 장애를 가진 사용자를 포함하여 모든 사용자를 대상으로 합니다. 이 중에서도 자바스크립트 이벤트 핸들링은 접근성을 고려해야 하는 중요한 부분입니다. 이 글에서는 접근성을 고려한 자바스크립트 이벤트 핸들링 방법에 대해 알아보겠습니다.
1. 키보드 이벤트 핸들링
키보드로 이벤트를 조작할 수 있는 웹 접근성은 시각적으로 제한된 사용자나 키보드 사용이 편리한 사용자에게 중요합니다. 키보드 이벤트를 처리할 때는 다음과 같은 접근성을 고려해야 합니다.
-
keydown이벤트보다는keypress이벤트를 사용하면 더 좋은 접근성을 제공할 수 있습니다.keydown이벤트는 눌린 키를 처리하기 전에 발생하므로 눌린 키의 역할을 알 수 없습니다. 반면keypress이벤트는 눌린 키를 식별할 수 있습니다. -
키보드로 접근 가능한 요소에 대한 이벤트 핸들러 등록에는
input요소, 버튼 등을 사용하는 것이 좋습니다. 이는 키보드 포커스 이동과 같은 접근성을 고려한 기능을 제공할 수 있습니다. -
단축키를 제공할 때는 겹치지 않는 단축키 조합을 사용해야 합니다. 예를 들어, 키보드의
Ctrl+C와Ctrl+V는 이미 복사 및 붙여넣기 기능으로 사용되므로 이와 겹치지 않도록 조합해야 합니다.
2. 마우스 이벤트 핸들링
시각적으로 요소가 선택 가능한 경우 마우스 이벤트를 처리해야 합니다. 접근성을 고려하여 마우스 이벤트를 처리하는 방법에는 다음과 같은 것들이 있습니다.
-
click이벤트 이외에도keydown이벤트와 같은 키보드 이벤트를 통해 요소를 선택할 수 있도록 해야 합니다. 이는 마우스를 사용할 수 없는 사용자에게 동일한 기능을 제공할 수 있는 방법입니다. -
mouseover와mouseout이벤트 대신focus와blur이벤트를 활용하여 요소에 포커스되거나 포커스가 해제되는 것을 감지할 수 있습니다. 이는 키보드 사용이 편리한 사용자에게 더 나은 접근성을 제공합니다. -
마우스 이벤트 핸들러 등록에는
<button>요소,<a>요소와 같은 클릭 가능한 요소를 사용하는 것이 좋습니다. 이는 클릭 가능성과 접근성을 고려한 기능을 제공할 수 있습니다.
3. 참고 자료
#접근성 #자바스크립트