링크에서 알아본 것처럼 href 속성이 있는 <a> 요소는 사용자가 클릭하거나 탭하여 팔로우할 수 있는 링크를 만듭니다. 목록에서 콘텐츠 목록을 만드는 방법을 알아봤습니다. 이 섹션에서는 링크 목록을 그룹화하여 탐색을 만드는 방법을 알아봅니다.
탐색에는 여러 유형과 표시 방법이 있습니다. 동일한 웹사이트 내의 다른 페이지로 연결되는 텍스트 내에 이름이 지정된 앵커는 로컬 탐색으로 간주됩니다. 사이트의 구조와 관련하여 현재 페이지의 계층 구조를 표시하는 일련의 링크 또는 사용자가 현재 페이지로 이동하기 위해 이동한 페이지를 탐색경로라고 합니다. 페이지의 목차는 로컬 탐색의 또 다른 유형입니다. 사이트의 모든 단일 페이지에 대한 계층적 링크가 포함된 페이지를 사이트맵이라고 합니다. 모든 페이지에서 발견되는 웹사이트의 최상위 페이지로 연결되는 탐색 섹션을 글로벌 탐색이라고 합니다. 전체 탐색은 탐색 메뉴, 드롭다운 메뉴, 플라이아웃 메뉴를 비롯한 여러 가지 방식으로 표시할 수 있습니다. 동일한 사이트에서 표시 영역 크기에 따라 전역 탐색이 다르게 표시될 수 있습니다.
항상 사용자가 최소한의 클릭으로 사이트의 모든 페이지로 이동할 수 있도록 해야 하며, 탐색이 직관적이고 부담스럽지 않도록 해야 합니다. 탐색 요소에 관한 구체적인 요구사항은 없습니다. 단일 페이지 웹사이트인 MachineLearningWorkshop.com의 오른쪽 상단에는 로컬 탐색 메뉴가 있습니다. 여러 페이지 사이트에서 전체 탐색 메뉴를 여기에 자주 배치합니다.
web.dev에서 이 페이지를 보면 몇 가지 탐색 기능을 확인할 수 있습니다. 제목 위에는 탐색경로, 제목 뒤에 있는 '이 페이지의' 목차, 화면 너비에 따라 메뉴 버튼을 클릭하면 항상 표시되거나 표시되는 'HTML 알아보기' 목차가 있습니다. 페이지의 첫 번째 요소는 사이드바와 현재 위치 링크를 건너뛸 수 있도록 #main에 대한 숨겨진 링크입니다.
'콘텐츠로 건너뛰기' 링크
페이지의 첫 번째 요소는 내부 링크입니다.
<a href="#main" class="skip-link button">Skip to main</a>
이를 클릭하거나, 또는 포커스가 있고 사용자가 Enter를 누르면 페이지를 스크롤하고 기본 콘텐츠(id가 main인 랜드마크 <main>)에 포커스를 맞춥니다.
<main id="main">
이전 섹션을 모두 읽었다 하더라도 이 사이트의 링크를 보지 못했을 수 있습니다. 포커스가 있는 경우에만 표시됩니다.
사용성과 접근성을 개선하려면 사용자가 모든 페이지에서 반복되는 콘텐츠 블록을 건너뛸 수 있도록 하는 것이 중요합니다.
건너뛰기 링크가 포함되어 있으므로 로드 시 키보드 사용자가 tab를 누르면 광범위한 링크를 탭할 필요 없이 사이트의 주요 콘텐츠로 빠르게 건너뛸 수 있습니다. 이 페이지에서 건너뛰기 링크는 섹션 전체 사이드바 탐색과 현재 위치 탐색을 건너뛰고 사용자를 페이지 제목으로 바로 연결합니다.
대부분의 디자이너는 페이지 상단에 링크가 있는 것을 마음에 들어 하지 않습니다. 링크에 포커스가 있으면(키보드 사용자가 페이지의 링크를 통해 탭할 때) 링크가 모든 사용자에게 표시되어야 한다는 점을 기억하면서 링크를 뷰에서 숨기는 것은 괜찮습니다.
.visually-hidden:not(:focus):not(:active)와 유사한 선택기를 사용하여 포커스가 없고 비활성 상태인 콘텐츠만 숨깁니다.
링크 텍스트에는 'Skip to main(기본으로 건너뛰기)'이라고 표시되어 있습니다. 링크의 액세스 가능한 이름입니다. 이는 기술 사이트이며 사용자는 '기본'의 의미를 알고 있을 것입니다.
모든 링크 텍스트와 마찬가지로 액세스 가능한 이름은 링크가 사용자가 이동하는 위치를 명확하게 나타내야 합니다. 링크 대상은 페이지 주요 콘텐츠의
시작 부분이어야 합니다. 페이지를 로드하려면 탭하여 '기본으로 건너뛰기' 링크로 이동합니다. 그런 다음 Enter를 눌러 기본 콘텐츠로 '이동'하는지 확인합니다.
목차
콘텐츠로 건너뛰기 링크는 기본 콘텐츠를 스크롤하여 보여줍니다. 첫 번째 요소는 이 섹션의 제목이 있는 <h1> 제목입니다.
이 경우는 <h1>Marking up navigation</h1>입니다. 기본 제목 다음에는 소개 문구(이 튜토리얼의 콘텐츠에 대한 간략한 설명)가 나옵니다. 목차 탐색이 코드베이스에서 제목 앞 또는 뒤에 오는지 여부는 브라우저의 너비에 따라 다릅니다.
브라우저의 너비가 80em보다 넓은 경우 목차는 마크업의 제목 앞에 옵니다. 이는 다음과 유사합니다(마크업을 단순화하기 위해 클래스 이름 삭제됨).
<nav aria-label="On this page">
<div>On this page</div>
<div>
<ul>
<li>
<a href="#skip">Skip to content link</a>
</li>
<li>
<a href="#toc">Table of contents</a>
</li>
<li>
<a href="#bc">Page breadcrumbs</a>
</li>
<li>
<a href="#ln">Local navigation</a>
</li>
<li>
<a href="#global">Global navigation</a>
</li>
</ul>
</div>
</nav>
<nav>는 탐색 섹션에 사용하기에 가장 적합한 요소입니다. 섹션에 랜드마크 역할인 navigation 역할이 있다고 스크린 리더와 검색엔진에 자동으로 알립니다.
aria-label 속성을 포함하면 탐색 목적에 관한 간단한 설명이 제공됩니다. 이 경우 속성 값이 페이지에 표시되는 텍스트와 중복되므로 aria-labelledby를 사용하여 표시되는 텍스트를 참조하는 것이 좋습니다.
비시맨틱 <div>를 단락 <p>로 변경한 후 참조할 수 있도록 id를 추가할 수 있습니다. 그런 다음 aria-labelledby를 사용합니다.
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
중복을 줄이는 것 외에도, 표시되는 텍스트는 번역 서비스에 의해 번역되지만 속성 값은 번역되지 않을 수 있습니다. 가능한 경우 적절한 라벨을 제공하는 텍스트가 있는 경우 속성 텍스트보다 이 텍스트를 사용하는 것이 좋습니다.
이 탐색은 목차입니다. aria-label를 사용하려면 표시되는 텍스트를 반복하지 말고 해당 정보를 제공하세요.
<nav aria-label="Table of Contents">
<p>On this page</p>
요소에 액세스 가능한 이름을 제공할 때 요소의 이름을 포함하지 마세요. 스크린 리더는 사용자에게 이 정보를 제공합니다.
예를 들어 <nav> 요소를 사용하는 경우 'navigation'을 포함하지 마세요. 이 정보는 시맨틱 요소를 사용할 때 포함됩니다.
링크 자체가 순서가 지정되지 않은 목록에 있습니다. 목록에 중첩될 필요는 없지만 목록을 사용하면 스크린 리더 사용자는 목록 항목 및 링크가 탐색에서 개별 목록인 목록 항목 수를 알 수 있습니다.
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
<ul role="list">
<li>
<a href="#skip">Skip to content link</a>
</li>
<li>
<a href="#toc">Table of contents</a>
</li>
<li>
<a href="#bc">Page breadcrumbs</a>
</li>
<li>
<a href="#ln">Local navigation</a>
</li>
<li>
<a href="#global">Global navigation</a>
</li>
</ul>
</nav>
브라우저의 너비가 80em 미만인 경우 제목 및 소개 문구 아래에 '이 페이지' 위젯이 표시됩니다. 이 작업은 두 개의 목차 탐색 구성요소를 포함하고 미디어 쿼리를 기반으로 CSS display: none;를 사용하여 다른 구성요소를 숨겨 실행됩니다.
하나의 위젯만 표시하기 위해 두 개의 동일한 위젯을 포함하는 것은 피해야 할 패턴입니다. 추가 바이트는 무시해도 좋습니다. CSS display: none를 사용하여 모든 사용자로부터 HTML 콘텐츠를 숨기는 것이 적절합니다. 문제는 넓은 화면에서는 목차가 #main 앞에 오고 좁은 화면에서는 목차가 #main 내에 중첩된다는 점입니다. 키보드를 사용하여 콘텐츠로 건너뛰면 넓은 화면에서 목차를 건너뜁니다. 사용자는 기기를 변경하거나 글꼴 크기를 늘렸을 때 콘텐츠가 반응하고 위치를 바꾸는 데 익숙하지만 탭 순서가 변경될 때는 탭 순서가 변경되지 않을 것이라고 예상합니다. 페이지 레이아웃은 사이트 전체에서 액세스 가능하고 예측 가능하며 일관되어야 합니다. 여기에서 목차의 위치를 예측할 수 없습니다.
페이지 탐색경로
탐색경로는 사용자가 웹사이트 내 위치를 파악하는 데 도움이 되는 보조 탐색을 제공합니다. 일반적으로 현재 문서의 URL 계층 구조와 사이트 구조에서 현재 페이지의 위치를 표시합니다. 사용자의 입장에서 보는 사이트 구조는 서버의 파일 구조와 다를 수 있습니다. 괜찮습니다. 사용자는 파일을 구성하는 방법을 알 필요가 없지만 콘텐츠를 탐색할 수 있어야 합니다.
탐색경로는 사용자가 사이트 구성을 탐색하고 이해하는 데 도움이 되므로 back 기능을 사용하여 이전 페이지로 이동하기 위해 방문한 이전 페이지로 돌아가지 않고도 상위 섹션으로 빠르게 이동할 수 있습니다.
web.dev와 마찬가지로 사이트에 단순한 계층적 디렉터리 구조가 있는 경우 탐색경로 탐색은 홈 링크 또는 호스트 이름으로 구성되며, 여기에는 URL 경로 이름에 포함된 각 디렉터리의 색인 파일 링크가 포함됩니다. 현재 페이지를 포함할지 여부는 선택사항이며 약간의 주의가 필요합니다.
const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"
탐색경로의 섹션에서는 현재 페이지에서 홈페이지로 돌아오는 경로를 보여주며, 그 사이의 각 수준을 보여줍니다.
모든 HTML 알아보기 모듈 페이지에는 동일한 탐색경로가 있으며 web.dev의 learn 섹션 내에 있는 HTML 강의의 계층 구조를 표시합니다. 코드는 다음과 유사하며 명확성을 위해 클래스와 SVG 세부정보가 삭제되었습니다.
<nav aria-label="breadcrumbs">
<ul role="list">
<li>
<a href="/">
<svg aria-label="web.dev" role="img">
<use href="#webDevLogo" />
</svg>
</a>
</li>
<li>
<a href="/learn">Learn</a>
</li>
<li>
<a href="/learn/html">Learn HTML!</a>
</li>
</ul>
<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
<svg aria-label="share" role="img">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
</nav>
이 탐색경로는 권장사항을 따릅니다. 랜드마크 역할인 <nav> 요소를 사용하므로 보조 기술이 탐색경로를 페이지의 탐색 요소로 표시합니다.
aria-label와 함께 제공되는 '탐색경로'의 액세스 가능한 이름은 현재 문서의 다른 탐색 랜드마크와 구분됩니다.
링크 사이에는 CSS에서 생성된 콘텐츠 구분자가 있습니다. 구분자는 두 번째 <li>로 시작하는 각 목록 항목 앞에 옵니다.
[aria-label^="breadcrumb" i] li + li::before {
content: "";
display: block;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
rotate: 45deg;
opacity: .8
}
스크린 리더에서는 이 구분자를 '보이지' 않습니다. 따라서 탐색경로 링크 사이의 구분자는 스크린 리더에서 숨겨집니다. 또한 일반 텍스트와 같이 배경과 충분히 대비되어야 합니다.
이 버전은 정렬되지 않은 목록과 목록 항목을 사용합니다. 순서가 지정된 목록 항목이 열거되므로 순서가 지정된 목록을 사용하는 것이 좋습니다.
또한 목록입니다. role="list"가 다시 추가되었습니다. 일부 CSS 디스플레이 속성 값이 일부 요소에서 시맨틱을 삭제하기 때문입니다.
일반적으로 탐색경로의 홈페이지 링크는 사이트 이름이 라벨로 포함된 사이트 로고가 아니라 '홈'으로 표시되어야 합니다. 그러나 탐색경로는 문서 상단에 있고 페이지에서 로고만 발생하므로 이 안티패턴이 사용된 이유를 알 수 있습니다.
마지막 요소는 맞춤 <share-action> 요소입니다. 맞춤 요소는 섹션 15에서 설명합니다. 이 맞춤 요소는 탐색경로의 일부가 아니지만 <nav>에 관련 없는 요소를 포함하는 것은 괜찮습니다. 단, 모든 페이지에서 일관성이 있는 경우에는 가능합니다.
현재 페이지
이 페이지에서는 현재 '탐색' 페이지가 탐색경로에 포함되어 있지 않습니다. 현재 페이지가 탐색경로에 포함된 경우 텍스트는 링크가 아닌 것이 좋으며 aria-current="page"는 현재 페이지의 목록 항목에 포함되어야 합니다. 이 속성이 포함되어 있지 않은 경우 뒤에 오는 제목이 아이콘이나 다른 기호가 있는 현재 페이지임을 나타내는 것이 좋습니다.
디자인이 변경되면 탐색경로의 대체 버전을 사용할 수 있습니다.
<nav aria-label="breadcrumbs">
<ol role="list">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/learn">Learn</a>
</li>
<li>
<a href="/learn/html">Learn HTML!</a>
</li>
<li aria-current="page">
Navigation
</li>
</ol>
</nav>
탐색경로는 선형 단계에 적합하지 않습니다. 예를 들어 사용자가 현재 페이지로 이동하기 위해 이동한 경로 목록이나 레시피에서 이 지점까지 이어지는 단계 목록은 <nav> 내에 중첩될 수 있지만 탐색경로로 라벨이 지정되면 안 됩니다.
로컬 탐색
이 페이지에는 다른 탐색 구성요소가 있습니다. 넓은 화면을 사용 중인 경우 왼쪽에 'HTML 알아보기' 로고, 검색창, HTML 알아보기의 20개 섹션으로 연결되는 링크가 포함된 사이드바가 표시됩니다. 각 링크에는 챕터 번호와 섹션 제목, 이미 방문한 섹션의 오른쪽에 체크표시가 포함되어 있습니다(이는 다른 페이지로 이동했다가 돌아온 경우일 수 있음). 검색 및 지역 헤더와 함께 HTML 알아보기의 모든 섹션에 대한 링크가 위치 탐색 메뉴입니다.
태블릿이나 휴대기기에서 이 사이트를 방문하거나 화면이 좁은 경우 이 페이지를 로드하면 사이드바가 숨겨집니다. 상단 탐색 메뉴의 햄버거 메뉴를 통해 표시할 수 있습니다. 즉, 헤더는 role="navigation"가 설정된 맞춤 <web-header> 요소입니다.
넓은 화면에서 영구적인 로컬 탐색과 나타났다가 사라질 수 있는 좁은 화면의 로컬 탐색의 주요 차이점은 숨길 수 있는 버전의 닫기 버튼 표시입니다. 이 아이콘은 display: none;인 와이드 화면에서 숨겨집니다.
이 문서의 링크 010은 로컬 탐색의 다른 링크와 약간 다르게 표시되어 사용자에게 현재 페이지임을 나타냅니다. 이러한 시각적 차이는 CSS를 통해 만들어집니다. 현재 페이지는 aria-current="page" 속성으로도 식별됩니다. 이를 통해 보조 기술에 현재 페이지로 연결되는 링크임을 알립니다. 이 로컬 탐색 내에 있는 이 목록 항목의 HTML은 다음과 유사합니다.
<li>
<a aria-current="page" href="/learn/html/navigation" data-complete="true">
<span>010</span>
<span>Navigation</span>
<svg aria-label="Check" role="img">
<use href="#checkmark" />
</svg>
</a>
</li>
이 페이지를 처음 방문하는 것이 아니라면 체크표시가 표시되지 않습니다. 이전에 이 페이지를 방문한 경우 data-complete 커스텀 속성이 true로 설정되고 체크표시가 표시됩니다. 각 링크에는 체크표시가 포함되어 있지만 CSS는 data-complete="true" 속성 및 값이 없으므로 이전에 이 페이지를 방문한 적이 없는 사용자의 체크박스를 숨깁니다. display: none
.course .stack-nav a:not([data-complete="true"]) svg {
display: none;
}
display가 none 이외의 값으로 설정되면 role는 보조 기술에 인라인 SVG가 이미지이고 aria-label는 <img>에서 alt 속성 역할을 한다는 것을 알립니다.
전체 탐색
전체 탐색은 웹사이트의 최상위 페이지로 이동하는 탐색 섹션이며, 사이트의 모든 페이지에서 동일합니다.
사이트의 전체 탐색은 사이트의 모든 하위 섹션이나 기타 메뉴로 연결되는 링크의 중첩 목록을 여는 탭으로 구성할 수도 있습니다.
여기에는 제목이 지정된 섹션, 버튼, 검색 위젯이 포함될 수 있습니다. 이러한 추가 기능은 필수 사항이 아닙니다. 탐색이 모든 페이지에 표시되고 모든 페이지에서 동일해야 합니다. 물론 현재 페이지로 연결되는 모든 링크에는 aria-current="page"가 있어야 합니다.
글로벌 탐색을 통해 애플리케이션이나 웹사이트에서 어디든 일관된 방식으로 이동할 수 있습니다. Google의 페이지 상단에는 글로벌 탐색 기능이 없습니다 Yahoo!에서는 모든 주요 Yahoo! 속성의 스타일은 다르지만 대부분의 섹션의 콘텐츠는 동일합니다.
뉴스와 스포츠 글로벌 탐색 헤더의 콘텐츠는 동일하지만, 사용자가 현재 스포츠를 즐기는 것을 나타내는 아이콘의 대비는 시력이 나쁘지 않은 방문자가더라도 액세스할 수 있을 만큼 충분히 대비되지 않습니다. 두 섹션 모두 글로벌 탐색이 있고 그 아래에 섹션별 로컬 탐색이 있습니다.
글로벌 탐색과 마찬가지로 바닥글은 모든 페이지에서 동일해야 합니다. 하지만 그것이 유일한 유사점입니다. 전체 탐색을 사용하면 제품 관점에서 사이트의 모든 부분을 탐색할 수 있습니다. 바닥글 내의 탐색 요소에는 특정 요구사항이 없습니다. 일반적으로 바닥글에는 회사에 관한 법적 진술, 경력 개발과 같은 회사 링크가 포함되며 소셜 미디어 아이콘과 같은 외부 소스로 연결될 수 있습니다.
이 페이지의 바닥글에는 세 가지 추가 <nav> 요소(바닥글 탐색, Google 개발자, 약관 및 정책)가 포함되며 각 요소는 링크로 제공됩니다. 바닥글 탐색에는 GitHub의 web.dev에 참여하는 방법, web.dev 외부에서 Google에서 제공하는 기타 교육 콘텐츠, 외부 '연결 방법' 링크가 포함됩니다.
<footer>의 이러한 세 개의 탐색은 <nav> 요소로, 이러한 랜드마크 역할에 액세스 가능한 이름을 제공하는 aria-label를 포함합니다.
지금까지 살펴본 모든 탐색은 탐색 메뉴의 목록에 중첩된 링크였습니다. 자체 탐색을 만드는 데 알아야 할 모든 사항을 살펴보았습니다.
다음으로 데이터 테이블을 마크업하는 방법을 살펴보겠습니다.
학습 내용 확인하기
탐색에 관한 지식을 테스트합니다.
사이트의 기본 탐색을 마크업하는 데 사용되는 요소는 무엇인가요?
<navigation><breadcrumb><nav>한 페이지에 여러 탐색 요소가 있을 수 있나요?