웹사이트에 "주 콘텐츠로 건너뛰기"탐색 링크를 추가하여 접근성 향상
그것이 무엇인지 잘 모르거나 본 적이 없다면 초점을 받을 때까지 거의 항상 숨겨져 있기 때문일 것입니다. 아래는 Amazon.com의 예입니다. 홈페이지를 열고 탭을 누르면 로고 위에 "메인 콘텐츠로 건너뛰기"라는 텍스트와 함께 녹색 링크가 표시됩니다. Enter 키를 누르면 아래 섹션으로 이동합니다.
"메인 콘텐츠로 건너뛰기" 링크 만들기
페이지 상단에 "메인 콘텐츠로 건너뛰기"링크(건너뛰기 링크)를 배치하여 조기에 스크린 리더에게 알리고 키보드 사용자가 탐색하는 첫 번째 항목입니다(일반적으로 탭 키). 그렇지 않으면 사용자가 관련 없는 링크를 탐색하느라 시간을 낭비할 수 있습니다.
많은 설계자들은 눈에 보이는 건너뛰기 탐색 링크의 미적 영향에 대해 걱정합니다. 그렇기 때문에 처음에는 숨기는 것이 일반적이 되었습니다. 이렇게 해도 되지만 키보드 사용자에게 숨기는 기술을 사용하지 않도록 주의해야 합니다.
display:none를 사용합니다.처음에는 링크를 숨기고 포커스가 있을 때 홈 로고 위에 표시하는 가장 일반적인 방법을 보여 드리겠습니다. 이렇게:
HTML이 짧습니다. 페이지 내의 대상 ID를 가리키는
href가 있는 링크가 필요합니다. 대상 ID의 이름을 maincontent로 지정합니다. 그런 다음 기본 콘텐츠가 어디에 있든 대상 ID 값과 함께 id 속성을 추가합니다. 이것은 아래에 설명되어 있습니다.<body>
<header>
<a class="skiplink" href="#maincontent">Skip to main content</a>
<!-- Main navigation goes here-->
</header>
<main id="maincontent">
<!-- Content goes here-->
</main>
</body>
처음에는 건너뛰기 링크를 숨기고 싶습니다. 가장 간단한 해결책은 링크를 화면 밖에 배치하는 것입니다. 아래에서 페이지의 왼쪽 상단 모서리에 링크를 배치하고
transform: translateY(-100%) 을 사용하여 화면에서 맨 위로 이동합니다. 음수 Y 변환은 위로 이동합니다..skiplink {
position: absolute;
left: 0;
top: 0;
transform: translateY(-100%);
transition: transform 0.3s;
}
.skiplink:focus {
transform: translateY(0%);
}
이 숨기기 기술은 다른 레이아웃에서 가장 잘 작동한다는 것을 알았습니다. 이 기술에는 몇 가지 변형이 있습니다. 자세한 내용은 기사CSS in Action: Invisible Content Just for Screen Reader Users를 참조하십시오.
transition 도 추가했음을 알 수 있습니다. 이는 링크를 화면에 표시할 때 사용자가 링크를 찾을 수 있도록 평소보다 약간 느리게 발생하기 위함입니다.건너뛰기 링크를 표시하기 위해 사용자가 요소를 탭할 때 트리거되는
focus pseudo-class을 사용합니다. 초기 Y 변환을 재설정하여 링크가 화면 왼쪽 상단에 표시되도록 합니다.WebAIM (Institute for Disability Research, Policy, and Practice) recommends this approach 혼란스러운 시력 사용자도 해결합니다.
링크를 매우 작게 만들고 포커스 크기를 복원하는 몇 가지 예를 보았습니다. 내가 찾은 유일한 설명은 "사용자가 절대 위치 지정을 비활성화한 특별한 경우"입니다. 왜 그리고 어떻게 누군가가 이것을 정확히 할 것인지 모르겠습니다!
.skiplink {
position: absolute;
left: 0;
top: 0;
transform: translateY(-100%);
transition: transform 0.3s;
/*additional properties if absolute positioning is deactivated */
width:1px;
height:1px;
overflow:hidden;
}
.skiplink:focus {
transform: translateY(0%);
/*additional properties if absolute positioning is deactivated */
width:auto;
height:auto;
}
유일한 단점은 링크가 포커스를 잃을 때 전환이 약간 이상하게 보인다는 것입니다. 그렇지 않으면 결과는 동일합니다. 이것을 포함할지 말지는 당신에게 달려 있습니다!
다음은 실제로 이를 시연하기 위한 합리적으로 현실적인 레이아웃의 코드펜입니다.
짧고 달다!
일반적으로 여러 건너뛰기 링크는 불필요합니다.
페이지에 섹션이 많거나 깊게 중첩된 탐색 링크가 있는 경우 어떻게 됩니까?
개발자는 이러한 각 섹션에 탐색 건너뛰기 링크를 제공해야 합니까, 아니면 각 탐색 수준을 건너뛰어야 합니까?
WebAim says "In most cases, a single skip link is sufficient."
추가 자료
Web Content Accessibility Guidelines (WCAG) 2 - Section 2.4.1 (Bypass Blocks - Level A)은 탐색 건너뛰기 링크를 나타내며 "여러 웹 페이지에서 반복되는 콘텐츠 블록을 우회하는 메커니즘을 사용할 수 있습니다."라고 명시되어 있습니다.
읽어 주셔서 감사합니다! 언제든지 내RSS feed를 구독하고 이 기사를 소셜 미디어에서 다른 사람들과 공유하세요. 💌
ko-fi에서 커피를 사서 감사를 표할 수 있습니다. 🙂
Reference
이 문제에 관하여(웹사이트에 "주 콘텐츠로 건너뛰기"탐색 링크를 추가하여 접근성 향상), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/robole/add-a-skip-to-main-content-navigation-link-to-your-website-to-improve-accessibility-5gc2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
