[웹접근성] Skip 메뉴

header의 존재로 main content까지 불필요한 리딩이 있기 때문에, 사용자가 바로 main으로 넘어갈 수 있도록 body 내 최상단에 skip 메뉴 리스트를 추가한다.

<body>
    <!-- skip menu list -->
    <div class="skip">
        <a href="#main">Skip to main content</a>
        <a href="#footer">Skip to footer</a>
    </div>
    <!-- // skip menu list -->
    <div class="wrap">
        <header></header>
        <main id="main"></main>
        <footer id="footer"></footer>
    </div>
</body>

화면에 숨길 때는, 지난 blind 편에서 언급했듯이 text-indent:-9999px와 같은 방법이 아닌, 살짝~ 가리는 정도를 추천한다.

[css-real] 웹접근성을 고려한 .blind(hidden) 처리

스크린리더와 브라우저별, 그리고 매해 업데이트되는 내용들 때문에 여간 웹 접근성을 지키며 블라인드 처리하기가 쉽지 않다. 그래서 '이 방법으로 해결될 수 있습니다~'라는 방법은 아직 없다

fresh-mint.tistory.com

.skip {
  position: relative;
  z-index: 999;
  a {
    position: absolute;
    top: -30px;
    left: 0;
    background: #333;
    border: 1px solid mediumspringgreen;
    font-size: 14px;
    line-height: 30px;
    padding: 0 10px;
    &:focus {
      top: 0;
    }
  }
}