링크에서 살펴본 것처럼 href 속성이 있는 <a> 요소는 사용자가 클릭하거나 탭하여 따라갈 수 있는 링크를 만듭니다. 목록에서는 콘텐츠 목록을 만드는 방법을 배웠습니다. 이 모듈에서는 링크 목록을 그룹화하여 탐색을 만드는 방법을 알아봅니다.
탐색에는 여러 유형이 있으며 이를 표시하는 방법도 여러 가지가 있습니다. 동일한 웹사이트 내의 다른 페이지로 연결되는 텍스트 내의 명명된 앵커는 로컬 탐색으로 간주됩니다. 사이트 구조와 관련된 현재 페이지의 계층 구조 또는 사용자가 현재 페이지에 도달하기 위해 따라간 페이지를 표시하는 일련의 링크로 구성된 로컬 탐색을 탐색경로라고 합니다.
페이지의 목차는 또 다른 유형의 로컬 탐색입니다. 사이트의 모든 페이지로 연결되는 계층적 링크가 포함된 페이지를 사이트 맵이라고 합니다. 웹사이트의 최상위 페이지로 연결되는 탐색은 모든 페이지에서 찾을 수 있으며 전역 탐색이라고 합니다. 전역 탐색은 탐색 메뉴, 드롭다운 메뉴, 플라이아웃 메뉴 등 다양한 방식으로 표시할 수 있습니다. 동일한 사이트가 표시 영역 크기에 따라 전역 탐색을 다르게 표시할 수 있습니다.
사용자가 최소한의 클릭 수로 사이트의 모든 페이지로 이동할 수 있도록 항상 해야 하며, 탐색이 직관적이고 압도적이지 않도록 해야 합니다. 하지만 탐색 요소에 관한 구체적인 요구사항은 없습니다. 단일 페이지 웹사이트인 MachineLearningWorkshop.com에는 오른쪽 상단에 로컬 탐색 메뉴가 있습니다. 다중 페이지 사이트에서는 보통 여기에 전역 탐색 메뉴를 배치합니다.
'콘텐츠로 건너뛰기' 링크
일부 사이트에는 '콘텐츠로 건너뛰기' 링크가 있으며, 이 링크는 포커스 순서의 첫 번째 요소인 경우가 많습니다. 다음과 같이 표시될 수 있습니다.
<a href="#main" class="skip-link button">Skip to main</a>
클릭하거나 포커스가 있고 사용자가 Enter를 누르면 페이지가 스크롤되고 main ID가 있는 요소(아마도 기본 콘텐츠)에 포커스가 지정됩니다.
<main id="main">
사용성 및 접근성을 개선하려면 사용자가 공유 헤더 및 기본 탐색 항목과 같이 모든 페이지에서 반복되는 콘텐츠 블록을 건너뛸 수 있도록 하는 것이 중요합니다. 건너뛰기 링크를 사용하면 키보드 사용자가 tab를 누를 때 페이지의 새 콘텐츠로 빠르게 이동할 수 있습니다. 이렇게 하면 광범위한 메뉴를 탭하지 않아도 됩니다.
대부분의 디자이너는 페이지 상단에 이러한 링크가 표시되는 것을 좋아하지 않습니다. 이 링크는 숨겨도 됩니다. 하지만 링크가 포커스를 받으면(키보드 사용자가 페이지에서 링크를 탭할 때 발생) 링크가 사용자에게 표시되어야 합니다.
.visually-hidden:not(:focus):not(:active)와 유사한 선택기를 사용하여 포커스가 없고 활성 상태가 아닌 콘텐츠만 숨깁니다.
모든 링크 텍스트와 마찬가지로 이름은 링크가 사용자를 어디로 안내하는지 명확하게 나타내야 합니다. 링크 타겟은 페이지의 기본 콘텐츠 시작 부분이어야 합니다.
목차
기본 콘텐츠의 첫 번째 요소는 이 페이지의 제목인 <h1>Navigation</h1>이 포함된 <h1> 제목입니다. 기본 제목 뒤에는 이 튜토리얼의 콘텐츠에 관한 간단한 설명이 나옵니다.
작은 화면에서는 목차가 제목 뒤에 표시됩니다. 큰 화면에서는 오른쪽 정렬된 사이드바에 표시됩니다.
탐색 섹션에 가장 적합한 요소는 <nav>입니다. 섹션에 navigation(랜드마크 역할) 역할이 있음을 스크린 리더와 검색엔진에 자동으로 알립니다.
탐색의 목적에 대한 간단한 설명을 위해 aria-label 속성을 포함합니다. 이 경우 속성 값이 '이 페이지에서'라는 텍스트와 중복되기 때문입니다. 표시되는 텍스트를 참조하려면 aria-labelledby를 대신 사용하세요.
id를 사용하면 다음과 같이 표시됩니다.
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
...
</nav>
중복을 줄이는 것 외에도 표시되는 텍스트는 번역 서비스에 의해 번역되지만 속성 값은 번역되지 않을 수 있습니다. 가능한 경우 적절한 라벨을 제공하는 텍스트가 있으면 속성 텍스트를 사용하는 대신 해당 텍스트를 참조하세요.
'이 페이지' 탐색은 목차입니다. aria-label를 사용하려면 표시되는 텍스트를 반복하는 대신 해당 컨텍스트를 제공하세요.
<nav aria-label="Table of Contents">
<p>On this page</p>
...
</nav>
요소에 접근성 있는 이름을 제공하려면 요소의 이름을 포함하지 않아야 합니다. 스크린 리더는 사용자에게 요소의 이름을 제공합니다.
예를 들어 <nav> 요소를 사용할 때는 '탐색'이라는 단어를 포함하지 마세요. 이 정보는 이미 시맨틱 요소에 포함되어 있기 때문입니다.
탐색 항목이 목록에 중첩될 필요는 없지만 목록을 사용하면 스크린 리더 사용자가 목록 항목 수, 즉 탐색에 있는 링크 수를 알 수 있습니다.
<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>
탭 순서 변경 방지
목차는 제목 뒤에, 작은 화면에서는 오른쪽 정렬된 사이드바에 표시될 수 있습니다. 두 개의 동일한 탐색 세트를 포함하여 하나만 표시하는 것은 안티 패턴입니다.
CSS를 사용하여 1254px보다 넓은 페이지에서 탐색을 사이드바로 표시했습니다.
사용자는 기기를 변경하거나 글꼴 크기를 늘릴 때 콘텐츠가 반응형으로 바뀌고 위치가 변경되는 데 익숙하지만, 탭 순서가 변경되는 것은 예상하지 않습니다. 페이지 레이아웃은 사이트 전체에서 접근 가능하고 예측 가능하며 일관되어야 합니다. 여기서는 목차의 위치를 예측할 수 없습니다.
페이지 탐색경로
탐색경로는 사용자가 웹사이트에서 현재 위치를 파악하는 데 도움이 되는 보조 탐색 기능을 제공합니다. 탐색경로는 일반적으로 현재 문서의 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 강의의 계층 구조를 보여줍니다.
코드는 다음과 비슷해야 합니다.
<nav aria-label="breadcrumbs">
<ol role="list">
<li>
<a href="/">web.dev</a>
</li>
<li>
<a href="/learn">Learn</a>
</li>
<li>
<a href="/learn/html">HTML</a>
</li>
</ol>
</nav>
<nav> 요소(랜드마크 역할)는 보조 기술에 탐색경로를 페이지의 탐색 요소로 표시하도록 지시합니다.
aria-label와 함께 제공되는 '탐색 경로'의 접근성 이름은 동일한 문서에서 이 탐색을 다른 탐색 랜드마크와 구분합니다.
각 링크 사이에는 콘텐츠 구분자가 있습니다. 이러한 구분자는 CSS로 생성하여 두 번째부터 각 목록 항목 앞에 표시할 수 있습니다.
[aria-label^="breadcrumbs" 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
}
스크린 리더는 이러한 아이콘을 '보지' 않습니다. 이는 권장사항입니다. 탐색 경로 링크 사이의 구분자는 스크린 리더에서 숨겨야 합니다. 또한 페이지의 다른 텍스트 및 시각적 요소와 마찬가지로 배경과 충분한 대비를 이루어야 합니다.
샘플 코드에서는 순서가 지정된 목록을 사용합니다. 항목이 열거되므로 순서가 지정되지 않은 목록보다 순서가 지정된 목록이 더 좋습니다. 일부 CSS 표시 속성 값은 일부 요소에서 시맨틱을 삭제하므로 role="list"가 추가되었습니다.
일반적으로 탐색경로의 홈페이지 링크는 사이트 이름이나 사이트 로고가 아닌 '홈'이라고 표시되어야 합니다. 브레드크럼이 문서 상단에 있으므로 이 안티패턴이 사용된 이유를 알 수 있습니다.
현재 페이지인 탐색은 탐색 경로에 포함되지 않습니다.
현재 페이지
현재 페이지가 탐색 경로에 포함된 경우 텍스트는 링크가 아니어야 하며 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 학습의 각 섹션으로 연결되는 링크가 있습니다. 이러한 링크와 필터 표시줄은 위치 탐색입니다.
휴대기기에서 이 사이트를 방문하거나 화면이 좁은 경우 이 페이지를 로드하면 사이드바가 숨겨집니다. 상단 탐색 메뉴에서 을 사용하여 액세스할 수 있습니다.
와이드 화면의 영구 로컬 탐색과 좁은 화면의 로컬 탐색의 주요 차이점은 기본 상단 탐색으로 돌아간 다음 탐색을 닫는 화살표입니다.
이 문서의 링크는 로컬 탐색의 다른 링크와 동일하게 표시됩니다. 하지만 시각 장애가 없는 사용자에게 현재 페이지임을 나타내기 위해 다른 링크와 약간 다른 모양을 가질 수 있습니다. 이 시각적 차이는 CSS로 만들어야 합니다.
aria-current="page" 속성을 사용하여 현재 페이지를 식별할 수도 있습니다. 이렇게 하면 링크가 현재 페이지로 연결된다는 정보가 보조 기술에 제공됩니다.
이상적으로는 로컬 탐색 내 이 목록 항목의 HTML이 다음과 유사해야 합니다.
<li>
<a aria-current="page" aria-selected="true" href="/learn/html/navigation">
Navigation
</a>
</li>
전체 탐색
전역 탐색은 웹사이트의 최상위 페이지로 연결되며 사이트의 모든 페이지에서 동일합니다.
사이트의 전역 탐색은 사이트의 모든 하위 섹션 또는 기타 메뉴로 연결되는 링크의 중첩 목록을 여는 탭으로 구성될 수도 있습니다.
제목이 지정된 섹션, 버튼, 검색 위젯이 포함될 수 있습니다. 이러한 추가 기능은 필수가 아닙니다. 탐색은 모든 페이지에 표시되어야 하며 모든 페이지에서 동일해야 합니다. 물론 현재 페이지로 연결되는 링크에는 aria-current="page"가 있어야 합니다.
전역 탐색은 애플리케이션이나 웹사이트의 어느 곳으로든 이동할 수 있는 일관된 수단을 제공합니다. Google 웹사이트에는 페이지 상단에 전역 탐색이 없습니다. Yahoo! 모든 주요 Yahoo! 속성의 스타일은 서로 다르지만 대부분 섹션의 콘텐츠는 동일합니다.
뉴스 및 스포츠 전역 탐색 헤더의 콘텐츠는 동일합니다. 하지만 사용자가 스포츠 페이지에 있음을 보여주는 아이콘은 시력이 완벽한 방문자에게도 접근성이 떨어질 만큼 대비가 충분하지 않습니다. 두 섹션 모두 섹션별 로컬 탐색이 아래에 있는 전역 탐색이 있습니다.
전역 탐색과 마찬가지로 바닥글은 모든 페이지에서 동일해야 합니다. 하지만 이것이 유일한 유사점입니다. 전역 탐색을 사용하면 제품 관점에서 사이트의 모든 부분으로 이동할 수 있습니다. 바닥글 내 탐색 요소에는 특별한 요구사항이 없습니다.
일반적으로 바닥글에는 회사에 관한 법적 고지, 회사 소개 페이지, 소셜 미디어와 같은 관련 외부 소스 링크와 같은 회사 링크가 포함됩니다.
이 페이지의 바닥글에는 두 가지 탐색 요소가 있습니다. 관련 web.dev 탐색의 3열 세트와 별도의 Google 약관 및 개인정보 보호 탐색입니다. 바닥글 탐색에는 web.dev에 참여하는 방법, web.dev팀에서 제공하는 관련 콘텐츠, 외부 소셜 미디어 링크가 포함됩니다.
다음으로 데이터 테이블을 마크업하는 방법을 살펴보겠습니다.
이해도 확인
탐색에 대한 지식을 테스트합니다.
사이트의 기본 탐색을 마크업하는 데 사용되는 요소는 무엇인가요?
<navigation><breadcrumb><nav>한 페이지에 여러 탐색 요소가 있을 수 있나요?