: 제공되는 모든 웹콘텐츠 기능은 누구나 운용할 수 있어야 한다.
: 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
혹시 가위의 손잡이는 왜 이렇게 생겼는지 생각해보신 적이 있으신가요?
한 쪽이 길고 한 쪽이 짧은 가위 손잡이
위 가위는 일반적인 오른손잡이 사용자를 위해 디자인된 가위입니다. 네 손가락과 엄지손가락을 넣는 곳이 정해져있기 때문에 왼손잡이가 이 가위를 사용하게 되면 가위 날이 반대로 바뀌어 가위가 잘 안 드는 불편함을 느끼게 됩니다. 하지만 왼손잡이가 아니라면 불편함을 느끼시지 못하셨을 것입니다. 이처럼 우리는 익숙하게 사용하는 도구에 대해 다른 관점에서 생각해보는 것을 간과 할 수 있습니다.
우리가 흔히 컴퓨터의 입력장치인 마우스를 당연한 도구로 생각하는 것과 비슷한 맥락입니다. 하지만 마우스의 조작은 생각보다 섬세한 컨트롤을 요구하고 사람에 따라서는 마우스의 사용 자체가 불가능한 경우도 존재합니다. 즉, 개발자로서 웹사이트를 제작할 때 마우스뿐 아니라 키보드를 이용해 페이지를 조작하는 사용자를 고려하여 입력장치의 접근성을 넓혀줘야 합니다. 마우스로 할 수 있는 웹사이트의 모든 기능과 접근은 마찬가지로 키보드를 활용해 컨트롤이 가능해야 하며, 원치 않는 방향으로 컨트롤되지 않도록 해야 합니다.
기본적으로 키보드의 이동은 Tab으로 이루어지며 이전 단계로 돌아가기는 Shift + Tab을, 링크 이동과 같은 상호작용은 Enter를 사용합니다.
이제 아래와 같은 상황들에 경우 웹개발자의 입장에서 어떤 부분들을 고려해야 하는지 살펴보겠습니다.
마우스를 올렸을 때 노출되도록 만들어지는 콘텐츠들이 몇 가지가 있습니다. 이런 경우 키보드로 해당 콘텐츠에 접근했을 때 동일한 인터렉션을 제공해 주어야 합니다. 이 부분은 JavaScript의 focus 이벤트를 활용해 구현해볼 수 있습니다.
contents.addEventListener('focus', function(){
console.log("focus되었을 때 contents에 동작되기를 기대하는 함수");
})
드롭 다운 메뉴란 사용자의 상호작용을 통해 하위 메뉴가 펼쳐지는 형태의 메뉴를 이야기합니다. 마우스 오버 시 하위 메뉴가 나오는 콘텐츠라면 키보드로 접근했을 때에도 하위 메뉴가 펼쳐지도록 구현해야 합니다.
예시) 드롭 다운 메뉴 - 마우스를 올렸을 때 나타나는 하위 메뉴를 가진다.