1976s

HTML Skip Accessibility

Skip Navigation Links는 웹사이트의 접근성을 개선하는 데 도움이 되는 기능입니다. 이 기능은 주로 스크린 리더 사용자와 키보드 사용자를 위해 고안되었습니다.

 

 

스크린 리더는 시각 장애인이 웹사이트를 탐색할 수 있도록 도와주는 소프트웨어입니다. 스크린 리더 사용자들은 웹페이지의 콘텐츠를 음성으로 듣거나 브라우저의 컨텐츠 구조를 탐색할 수 있습니다. 웹페이지에 접근할 때, 스크린 리더는 일반적으로 웹페이지의 상단에서부터 내용을 읽어 나가지만, 네비게이션 메뉴, 검색 창 등의 반복적인 콘텐츠가 상단에 위치하는 경우, 콘텐츠로 빠르게 이동하기 어려울 수 있습니다.

 

Skip Navigation Links를 제공하면 스크린 리더 사용자들은 해당 링크를 선택함으로써 반복적인 네비게이션 요소를 건너뛰고 바로 주요 콘텐츠로 이동할 수 있습니다. 이는 시각적으로 보이지 않는 사용자들에게 콘텐츠에 직접적으로 접근할 수 있는 방법을 제공하는 데 도움이 됩니다.

 

또한 키보드 사용자들도 Skip Navigation Links를 사용하여 마우스를 사용하지 않고 바로 주요 콘텐츠로 점프할 수 있으므로 키보드 접근성에서 사용됩니다. 참고로 여러개의 건너뛰기 버튼을 만들 필요는 없습니다.

 

건너뛰기 링크 만들기

<a class="screen-reader-text" href="#content" title="Skip to content">Skip to content</a>

...

<main id="content">
...
</smain>

"Skip to content"을 눌러 id="content"로 바로 이동하는 버튼입니다.

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

다른 링크 건너뛰기를 숨기는 방법

https://webaim.org/techniques/css/invisiblecontent/

WebAIM: CSS in Action - Invisible Content Just for Screen Reader Users

어떤 메시지를 적는것이 좋을까요?

• Skip navigation
• Skip main navigation
• Skip navigation links
• Skip to main content
• Skip to content

마무리

웹사이트의 접근성은 가능한 모든 사용자들이 웹 콘텐츠에 접근하고 이해할 수 있도록 하는 데 중요한 요소이며, Skip Navigation Links 기능은 이를 지원하는 방법 중 하나입니다. 웹 개발자들은 웹사이트를 만들 때 접근성을 고려하여 구현하고, 모든 사용자들이 웹사이트를 편리하게 이용할 수 있도록 합니다.

 

참고

WCAG 2.4.1 (Bypass Blocks - Level A)