웹접근성 html 스킵 메뉴 (skipnav / skipmenu)

스킵 메뉴SkipNav(SkipMenu) 란 무엇인가?

홈페이지에서 원하는 영역을 바로 이동할 수 있는 메뉴 바로가기가 바로 스킵 메뉴이다.

비장애인의 경우 자신이 보고 싶은 컨텐츠를 마우스로 보고 클릭하고 이용하지만, 시각 장애인 등의 경우 tab 키, 방향키 등을 사용한 스크린 리더를 이용하여 페이지에서 원하는 정보를 얻을 수 있다.

그렇기에 방대한 양의 페이지 양이라면 홈페이지 하단부의 정보를 얻기 위해 수도 없이 많은 tab 키를 눌러야 할 것이다.

이러한 웹 접근성을 위하여 불필요한 액션을 없애기 위해 스킵 메뉴(skip menu)를 제작한다.

비단 장애인뿐만 아니라 마우스 또는 키보드가 정상적으로 작동하지 않는 경우에 비장애인도 편리하게 사용할 수 있다.

본문 | 메인메뉴 | 하단 바로가기를 가장 많이 사용한다.

스킵 메뉴의 경우 <body> 바로 다음 나오는게 적절하다.

<a> 태그를 이용하여 적절한 위치로 바로 이동할 수 있게한다.

기본적으로 스킵 메뉴는 비장애인 눈에 보이지 않게 제작한다.

:focus 를 사용하여 tab 키를 눌렀을때 나타나게 한다.

색약인을 위해 배경은 검은색, 글자는 흰색으로 가장 강한 명도 대비를 준다.

width, height 값이 0px 인 경우 없는 존재로 인식하여 읽지 않으니 최소값 1px 적용.

z-index 는 최상위 값을 준다.

css 값은 본인이 주기 나름이다.

Leave a Comment