링크에서 살펴본 것처럼 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'(기본으로 건너뛰기)이라고 표시되어 있습니다. 링크의 액세스 가능한 이름입니다. 기술 사이트이며 사용자는 아마도 '주요' 기능이 무엇인지 의미합니다
다른 모든 링크 텍스트와 마찬가지로 액세스 가능한 이름에는 사용자가 링크를 통해 이동할 수 있는 위치가 명확하게 표시되어야 합니다. 링크 대상은
확인할 수 있습니다. 이를 테스트하려면 페이지가 로드될 때 Tab 키를 눌러 '기본으로 건너뛰기' 링크를 클릭합니다. 그런 다음 Enter를 눌러 '점프'합니다. 추가할 수도 있습니다.
목차
콘텐츠로 건너뛰기 링크는 스크롤하여 주요 콘텐츠를 표시합니다. 첫 번째 요소는 이 섹션의 제목이 있는 <h1> 제목입니다.
이 경우는 <h1>Marking up navigation</h1>입니다. 메인 제목 다음에 소개 문구가 나오며, 여기에 소개된 내용에 대한 간략한 설명이 나옵니다.
튜토리얼을 확인하세요. 목차 탐색이 코드베이스에서 제목 앞이나 뒤에 오는지 여부는 브라우저의 너비에 따라 다릅니다.
</ph>
브라우저의 너비가 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;를 사용하여 둘 중 하나를 숨깁니다.
하나만 표시하기 위해 동일한 위젯을 두 개 포함하는 것은 안티패턴입니다. 추가 바이트는 무시할 수 있습니다. 다음에서 HTML 콘텐츠 숨기기
CSS display: none를 사용하여 모든 사용자에게 적용하는 것이 적절합니다. 문제는 와이드 화면에서 목차가 #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 배우기 모듈 페이지는 동일한 탐색경로를 사용하여 HTML 강의 계층 구조를 표시합니다.
web.dev의 learn 섹션. 코드는 다음과 유사하며 명확성을 위해 클래스와 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
}
스크린 리더는 '보이지' 않습니다. 이는 스크린 리더에서 탐색경로 링크 사이의 구분자를 숨겨야 한다는 것입니다. 또한 일반 텍스트와 동일하게 배경과 충분히 대비되어야 합니다.
이 버전은 정렬되지 않은 목록과 목록 항목을 사용합니다. 순서가 지정된 목록 항목이 열거되므로 순서가 지정된 목록을 사용하는 것이 좋습니다.
또한 목록이기도 합니다. 일부 CSS 표시 속성 값은 일부 요소에서 의미 체계를 삭제하기 때문에 role="list"가 다시 추가되었습니다.
일반적으로 탐색경로의 홈페이지 링크는 '홈'으로 표시되어야 합니다. 사이트 로고로 표시하는 것이 아니라 정의합니다. 하지만 탐색경로가 문서 상단에 있고 페이지에 로고가 있는 유일한 위치이므로 볼 수 있습니다.
마지막 요소는 맞춤 <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는 display: none를 사용하여 이전에 이 페이지를 방문한 적이 없는 사용자에게 체크박스를 숨깁니다.
data-complete="true" 속성 및 값:
.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! 속성의 스타일은 각기 다르기 때문에 대부분의 섹션이 동일합니다.
뉴스 및 스포츠 글로벌 탐색 헤더의 콘텐츠는 동일하지만 사용자가 현재 있음을 나타내는 아이콘은 대비가 부족하여 스포츠에 없는 경우 시력이 나쁘지 않은 방문자도 이용할 수 있습니다. 두 섹션 모두 아래에 섹션별 로컬 탐색이 있는 탐색
전역 탐색과 마찬가지로 바닥글은 모든 페이지에서 동일해야 합니다. 하지만 그것이 유일한 유사점입니다. 글로벌 탐색 제품 관점에서 사이트의 모든 부분을 탐색할 수 있습니다. 바닥글 내 탐색 요소에는 특정 요구사항이 없습니다. 일반적으로 바닥글에는 법적 진술, 회사 및 경력과 같은 회사 링크가 포함되며 외부 소스(예: 소셜 미디어 아이콘)
이 페이지의 바닥글에는 바닥글 탐색, Google 개발자, 약관 및 정책, 이렇게 세 가지 추가 <nav> 요소가 포함되어 있습니다.
각 문장이 링크이기 때문입니다. 바닥글 탐색에는 GitHub의 web.dev에 참여하는 방법과
web.dev 외부의 Google 및 외부 '연결 방법' 링크를 클릭합니다.
<footer>에 있는 이러한 세 가지 탐색은 <nav> 요소로, 랜드마크 역할의 액세스 가능한 이름을 제공하는 aria-label입니다.
지금까지 살펴본 모든 탐색은 탐색 내의 목록에 중첩된 링크였습니다. 나만의 탐색을 만들기 위해 알아야 할 모든 것을 살펴보았습니다.
다음으로 데이터 테이블을 마크업하는 방법을 살펴보겠습니다.
이해도 확인
탐색에 관한 지식을 테스트합니다.
사이트의 기본 탐색을 마크업하는 데 사용되는 요소는 무엇인가요?
<navigation><breadcrumb><nav>한 페이지에 여러 개의 탐색 요소가 있을 수 있나요?