탐색 건너뛰기 "내비 건너뛰기"링크가 중요한 이유!
11621 단어 webdevreactjavascripta11y
문제:
잠시 동안 https://www.nytimes.com/을 살펴보고 머리글, 사이드바, 바닥글 등에 몇 개의 링크가 있는지 확인하십시오..,?
주요 콘텐츠는 일반적으로 웹 페이지의 첫 번째 항목이 아닙니다. 키보드 및 화면 판독기 사용자는 일반적으로 주요 콘텐츠에 도달하기 전에 긴 탐색 링크 목록, 링크 하위 목록, 회사 아이콘, 사이트 검색 및 기타 요소를 탐색해야 합니다.
해결책은 "탐색 건너뛰기"링크입니다.
해결책:
일반적으로 skip nav 링크는 웹사이트의 첫 번째 또는 두 번째 링크에 배치되어 사용자가 몇 번의 탭 동작으로 쉽게 메인 콘텐츠나 원하는 섹션으로 이동할 수 있습니다. 우리는 문제를 해결하기 위해 많은 다른 접근 방식을 보았을 수 있지만 아래 두 가지 접근 방식이 널리 사용되는 것을 볼 수 있습니다.
두 번째 접근 방식과 그 구현에 대해 이야기하겠습니다.
https://www.nytimes.com/이 이 문제를 시각적으로 어떻게 해결했는지 살펴보겠습니다.
클립에서 볼 수 있듯이 링크가 키보드 포커스를 받을 때 탐색 건너뛰기 링크가 표시됩니다.
멋지네요. 이제 사용자가 사이트에서 아래로 선언된 사이트 섹션을 인덱싱하기 위해 사이트로 이동하는 방법을 확인합니다.
CSS와 React의 도움으로 동일한 기능을 구현해 봅시다.
여기서는 아래와 같이 :focus 의사 선택자를 통해 CSS에서만 링크 토글 로직을 제어하고 있습니다. 일반적으로 요소를 숨기고 링크 요소가 포커스를 받을 때만 화면에 링크를 표시합니다. 디스플레이: 없음 또는 가시성: 숨김을 사용하지 않는다는 점에 유의하십시오. 이는 액세스할 수 없게 만듭니다. 기술적으로 이러한 유형의 요소(적용된 디스플레이: 없음 및 가시성: 숨김)는 접근성 트리의 일부가 아닙니다. 따라서 클립 CSS 속성을 사용하고 있습니다.
.skip-nav-link {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.skip-nav-link:focus {
background: white;
clip: auto;
height: auto;
left: 10px;
padding: 1rem;
position: fixed;
top: 0px;
width: auto;
z-index: 1001;
}
React 구현은 매우 간단하고 자명합니다. 이 2개의 구성 요소가 더 나은 SkipNavLink 및 SkipNavContent 작업을 수행합니다.
export const SkipNavLink = ({ id, children = 'Skip to content', ...props }) => {
return (
<a {...props} href={`#${id}`} className="skip-nav-link">
{children}
</a>
);
};
export const SkipNavContent = ({ id, ...props }) => {
return <div id={id} {...props} />;
};
다음은 구성 요소의 사용법입니다.
...
<SkipNavContent id="main-content">
<main>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit ease
</main>
</SkipNavContent>
...
ReactDOM.createPortal(
<React.Fragment>
<SkipNavLink id="main-content">
Skip to main
</SkipNavLink>
<SkipNavLink id="sitemap-links">
Skip to sitemap
</SkipNavLink>
</React.Fragment>,
document.getElementById('skip-links-root')!
)
HTML 페이지 레이아웃 방법에 대한 대략적인 아이디어를 얻으려면.
<body>
<div class="wrapper">
<div id="skip-links-root">
<!-- Skip Nav links -->
</div>
<header>
<nav>
<!-- Nav links -->
</nav>
</header>
<div id="root">
<!-- React content goes here -->
</div>
</div>
</body>
잠시 시간을 내어 작은 변화가 사용자 경험을 얼마나 향상시켰는지 생각해 보십시오.
그게 다야.
행복한 태빙 ⌨️! ❤️
참조:
https://webaim.org/techniques/skipnav/
Reference
이 문제에 관하여(탐색 건너뛰기 "내비 건너뛰기"링크가 중요한 이유!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rajajaganathan/why-skip-nav-link-is-important-14bc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
