스킵 메뉴 스킵 네비게이션 skip menu skip nav 란?

 

회사에서 처음으로 받은 과제가 html 마크업을 하는 과제였다.
나름대로 지금까지 배운 것들 내가 알고있는 것들을 총동원해서 열심히 마크업 해서 보여드렸다.

하지만 피드백을 들으면 들을수록 총체적 난국;;;;;

정말 내가 혼자 공부하며 배우는 것과 실무는 너무 달랐고
실질적으로 알아야하고 필요한 정보들을 내가 하나도 모르고 있구나라고 느끼며 약간의 충격을 받은 피드백 시간이었다.

그리고 피드백을 받으며 skip menu skip nav라는 것을 처음으로 알게되었다.

skip menu도 몰랐어!!!!!! 나란 사람 그동안 뭘 배운걸까 생각했다^^

 

skip menu skip nav란?

 

: 콘텐츠가 많은 홈페이지에서 tab키로 원하는 부분까지 도달하기 어려운데, 이러한 불편함을 스킵 메뉴를 통해 해결함

: 즉, 사용자 편의 및 웹 접근성을 위해 사용

: 스킵 메뉴를 통해 해당 영역까지 바로 갈 수 있는 기능을 함

: 스킵 메뉴는 tab을 이용하여 마우스가 아닌 키보드로 화면을 제어하고 메뉴 버튼을 누를 수 있게 하는 기능

: 스킵 메뉴는 body 다음에 위치하는 것이 가장 적합함

: 스킵 메뉴는 여러번 사용하는 것이 아니라 처음에 한번만 사용해야함

: 스킵 메뉴는 일반적으로 화면에서 보이지 않게 숨김처리함

: 스킵 메뉴는 a태그로 해당 메뉴의 id를 넣어줌

 

<div class="skip-menu">
    <a href="#nav">주메뉴 바로가기</a>
    <a href="#container">본문 바로가기</a>
    <a href="#footer">푸터 바로가기</a>
</div>

---

skip menu skip nav 스타일

 

: 스킵 메뉴는 기본적으로 페이지를 이용할 때 화면에서 보이지 않게 작업해야함

: 키보드나 스크린리더로 페이지를 tab했을 때 스킵 메뉴가 노출되어야함

: 즉, 페이지에 처음 접근하게 되면 스킵 메뉴를 확인할 수 없게 만들어야 함

 

페이지에 처음 들어가서 tab을 차례대로 눌렀을 때 나타나는 스킵 메뉴의 모습

페이지에 처음 들어가서 tab을 차례대로 눌렀을 때 나타나는 스킵 메뉴의 모습

 

페이지에 처음 들어가서 tab을 차례대로 눌렀을 때 나타나는 스킵 메뉴의 모습

 

.skip-menu {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 9999;

}
.skip-menu a {
    display: block;
    overflow: hidden;
    height: 0;
    color: #000;
    font-weight: bold;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;

}
.skip-menu a:focus {
    height: auto;
    padding: 10px;

}

1. a요소의 height, overflow 속성을 사용하여 기본적으로 화면에서 보이지 않도록 처리
2. a:focus 상태일 때 height, 값이 auto가 되도록 css를 작성

이 두가지 방법을 사용하여 스킵메뉴 숨김처리를 하고 tab을 눌렀을때 나타나도록 만들어줍니다.

---

참고

https://abcdqbbq.tistory.com/94

https://velog.io/@hikoand/TIL-Skip-Navigation%EA%B1%B4%EB%84%88%EB%9B%B0%EA%B8%B0-%EB%A7%81%ED%81%AC