탐색

링크에서 알아본 것처럼 href 속성이 있는 <a> 요소는 사용자가 클릭하거나 탭하여 따라갈 수 있는 링크를 만듭니다. 목록에서 콘텐츠 목록을 만드는 방법을 알아봤습니다. 이 모듈에서는 링크 목록을 그룹화하여 탐색을 만드는 방법을 알아봅니다.

탐색 유형에는 여러 가지가 있으며 이를 표시하는 방법도 여러 가지가 있습니다. 동일한 웹사이트 내의 다른 페이지로 연결되는 텍스트 내의 이름이 지정된 앵커는 로컬 탐색으로 간주됩니다. 사이트 구조 또는 사용자가 현재 페이지로 이동하기 위해 거친 페이지와 관련하여 현재 페이지의 계층 구조를 표시하는 일련의 링크로 구성된 로컬 탐색을 탐색경로라고 합니다.

페이지의 목차는 또 다른 유형의 로컬 탐색입니다. 사이트의 모든 페이지에 대한 계층적 링크가 포함된 페이지를 사이트 맵이라고 합니다. 웹사이트의 최상위 페이지로 연결되는 탐색을 말하며, 이는 모든 페이지에서 발견될 가능성이 높으며, 이를 전역 탐색이라고 합니다. 전역 탐색은 탐색 메뉴, 드롭다운 메뉴, 플라이아웃 메뉴 등 다양한 방법으로 표시할 수 있습니다. 동일한 사이트가 표시 영역 크기에 따라 전역 탐색을 다르게 표시할 수 있습니다.

항상 사용자가 최소한의 클릭으로 사이트의 모든 페이지로 이동할 수 있어야 하며 탐색이 직관적이고 복잡하지 않아야 합니다. 하지만 탐색 요소에는 특별한 요구사항이 없습니다. MachineLearningWorkshop.com은 단일 페이지 웹사이트이므로 오른쪽 상단에 로컬 탐색 메뉴가 있습니다. 멀티페이지 사이트에서는 이 위치에 글로벌 탐색을 배치하는 경우가 많습니다.

HTML 학습의 탐색 모듈
web.dev에서 이 페이지를 방문하면 몇 가지 탐색 기능을 확인할 수 있습니다. 제목 위에 탐색경로, HTML 학습 목차, 화면 너비에 따라 '이 페이지' 목차가 있습니다.

'콘텐츠로 건너뛰기' 링크

일부 사이트에는 '콘텐츠로 건너뛰기' 링크가 있으며, 이 링크는 포커스 순서의 첫 번째 요소인 경우가 많습니다. 예를 들면 다음과 같습니다.

<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 속성을 포함합니다. 이 경우 해당 속성의 값이 &#39;이 페이지&#39; 텍스트와 중복되기 때문입니다. 표시되는 텍스트를 참조하려면 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 챕터 탐색을 알아봅니다.

다음 탐색 구성요소는 대부분의 중형 및 대형 기기에서 왼쪽 사이드바에 필터 표시줄과 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! 속성에는 서로 다른 스타일이 있지만 대부분의 섹션 콘텐츠는 동일합니다.

대비가 명확한 탐색 헤더
회색 배경에 검은색 선택 도구가 포함된 Yahoo! 탐색입니다.

뉴스 및 스포츠 글로벌 탐색 헤더의 콘텐츠는 동일합니다. 그러나 사용자가 스포츠 페이지에 있음을 나타내는 아이콘은 완벽한 시야를 가진 방문자라고 하더라도 액세스할 수 있을 만큼 충분히 대비되지 않습니다. 두 섹션 모두 섹션별 로컬 탐색이 아래에 있는 전역 탐색이 있습니다.

검은색 배경에 흰색 선택 도구가 있는 대비가 좋은 탐색 헤더
다음은 대비가 높은 개선된 버전의 탐색입니다.

전역 탐색과 마찬가지로 바닥글은 모든 페이지에서 동일해야 합니다. 하지만 유일한 유사점입니다. 전역 탐색을 사용하면 제품 관점에서 사이트의 모든 부분으로 이동할 수 있습니다. 바닥글 내의 탐색 요소에는 특별한 요구사항이 없습니다.

일반적으로 바닥글에는 법적 고지, 회사 정보, 채용 페이지와 같은 기업 링크, 소셜 미디어와 같은 관련 외부 링크가 포함됩니다.

이 페이지의 바닥글에는 두 개의 탐색 요소 집합, 즉 관련 web.dev 탐색의 3개 열 집합과 별도의 Google 약관 및 개인 정보 보호 탐색이 포함되어 있습니다. 바닥글 탐색에는 web.dev에 참여하는 방법, web.dev팀에서 제공하는 관련 콘텐츠, 외부 소셜 미디어 링크가 포함됩니다.

다음으로 데이터 표에 마크업을 지정하는 방법을 알아보겠습니다.

이해도 확인

탐색에 대한 지식을 테스트하세요.

사이트의 기본 탐색을 마크업하는 데 사용되는 요소는 무엇인가요?

<navigation>
다시 시도하세요.
<breadcrumb>
다시 시도하세요.
<nav>
정답입니다.

한 페이지에 여러 개의 탐색 요소가 있을 수 있나요?

거짓입니다.
다시 시도하세요.
참입니다.
정답입니다.