Như bạn đã tìm hiểu trong các đường liên kết, phần tử <a> có thuộc tính href sẽ tạo các đường liên kết mà người dùng có thể truy cập bằng cách nhấp vào hoặc
nhấn. Trong danh sách, bạn đã tìm hiểu cách tạo danh sách nội dung. Trong phần này, bạn sẽ khám phá cách nhóm các danh sách
liên kết với nhau để tạo sự điều hướng.
Có một số loại điều hướng và một số cách để hiển thị các thao tác đó. Quảng cáo cố định được đặt tên trong văn bản liên kết đến các trang khác trong cùng một trang web được coi là điều hướng cục bộ. Thành phần điều hướng cục bộ bao gồm một loạt các đường liên kết hiển thị hệ thống phân cấp của trang hiện tại trong mối quan hệ với cấu trúc của trang web, hoặc các trang mà người dùng truy cập để chuyển đến trang hiện tại, được gọi là breadcrumb (tập hợp liên kết phân cấp). Mục lục của trang là một loại điều hướng cục bộ khác. Trang chứa các liên kết phân cấp đến mỗi trang trên một trang web được gọi là sơ đồ trang web. Phần điều hướng dẫn đến các trang cấp cao nhất của trang web và xuất hiện trên mỗi trang được gọi là điều hướng chung. Điều hướng chung có thể được hiển thị theo nhiều cách khác nhau, bao gồm thanh điều hướng, trình đơn thả xuống và trình đơn bay ra. Cùng một trang web có thể hiển thị phần điều hướng chung theo cách khác, tuỳ thuộc vào kích thước khung nhìn.
Luôn đảm bảo người dùng có thể chuyển đến bất kỳ trang nào trên trang web của bạn với ít lượt nhấp nhất, đồng thời đảm bảo hệ thống điều hướng là trực quan và không quá choáng ngợp. Tuy nhiên, không có yêu cầu cụ thể nào đối với các thành phần điều hướng. MachineLearningWorkshop.com, là trang web một trang, có thanh điều hướng cục bộ ở trên cùng bên phải; đây là nơi các trang web nhiều trang thường đặt điều hướng toàn cục.
Nếu đang xem trang này trên web.dev, bạn có thể phát hiện một số tính năng điều hướng. Có một breadcrumb (tập hợp liên kết phân cấp) phía trên tiêu đề "trên trang này" mục lục sau tiêu đề và phần "Tìm hiểu HTML" mục lục mà, tuỳ thuộc vào chiều rộng của màn hình, sẽ luôn được hiển thị hoặc hiển thị khi người dùng nhấp vào nút trình đơn. Phần tử đầu tiên trên trang là một đường liên kết ẩn đến #main, cho phép bạn bỏ qua cả thanh bên và các đường liên kết đường dẫn.
"Chuyển đến nội dung" đường liên kết
Phần tử đầu tiên trên trang là một đường liên kết nội bộ:
<a href="#main" class="skip-link button">Skip to main</a>
Khi người dùng nhấp vào hoặc nhấn vào Enter, trang này sẽ cuộn trang và tập trung vào nội dung chính:
điểm mốc <main> với id là main:
<main id="main">
Có thể bạn chưa từng thấy đường liên kết trên trang web này, ngay cả khi bạn đã đọc tất cả các phần trước đó. Thành phần này chỉ hiển thị khi được lấy tiêu điểm:
Để cải thiện khả năng hữu dụng và khả năng tiếp cận, bạn phải cho phép người dùng bỏ qua các khối nội dung lặp lại trên mỗi trang.
Liên kết bỏ qua được đưa vào để khi người dùng bàn phím nhấn tab khi tải, họ có thể nhanh chóng chuyển đến nội dung chính của trang web, tránh
thông qua các mối liên kết mở rộng. Trên trang này, liên kết bỏ qua sẽ bỏ qua điều hướng thanh bên ở phạm vi toàn mục và điều hướng đường dẫn,
đưa người dùng đến thẳng tiêu đề trang.
Hầu hết các nhà thiết kế không thích việc có một đường liên kết ở đầu trang. Bạn có thể ẩn đường liên kết khỏi chế độ xem trong khi ghi nhớ
khi đường liên kết được lấy làm tiêu điểm, điều này xảy ra khi người dùng bàn phím mở thẻ qua đường liên kết trên trang, thì liên kết đó phải hiển thị cho tất cả người dùng.
Chỉ ẩn nội dung ở trạng thái không làm tâm điểm và không hoạt động bằng cách sử dụng bộ chọn tương tự như .visually-hidden:not(:focus):not(:active).
Văn bản liên kết có nội dung "chuyển sang trang chính". Đây là tên có thể truy cập của liên kết. Đây là một trang web kỹ thuật và người dùng có thể biết "trang web chính" nào có nghĩa là gì.
Giống như mọi văn bản đường liên kết, tên thành phần hỗ trợ tiếp cận phải chỉ rõ nơi đường liên kết đó đưa người dùng đến. Mục tiêu liên kết phải là phần đầu của
nội dung chính của trang. Để kiểm tra điều này, khi trang tải, hãy nhấn phím tab để chuyển đến thẻ "Chuyển đến trang chính" . Sau đó, nhấn Enter để đảm bảo nút "nhảy" vào nội dung chính.
Mục lục
Đường liên kết chuyển đến nội dung sẽ cuộn nội dung chính vào chế độ xem. Phần tử đầu tiên là tiêu đề <h1> có tiêu đề của phần này.
Trong trường hợp này là <h1>Marking up navigation</h1>. Tiêu đề chính đứng trước dòng giới thiệu, một đoạn mô tả ngắn gọn về nội dung của cuốn sách này
của chúng tôi. Việc điều hướng trong mục lục có đứng trước hay sau tiêu đề trong cơ sở mã hay không phụ thuộc vào chiều rộng của trình duyệt.
Nếu trình duyệt của bạn rộng hơn 80em, thì Mục lục sẽ xuất hiện trước tiêu đề trong phần đánh dấu và tương tự như sau (tên lớp đã bị xoá để đơn giản hoá việc đánh dấu):
<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> là phần tử phù hợp nhất để sử dụng cho các phần điều hướng: phần tử này tự động thông báo cho trình đọc màn hình và công cụ tìm kiếm
một phần có vai trò navigation (một vai trò mốc).
Bao gồm thuộc tính aria-label
cung cấp nội dung mô tả ngắn gọn về mục đích của điều hướng. Trong trường hợp này, vì giá trị của thuộc tính này không cần thiết cho
văn bản hiển thị trên trang, bạn nên sử dụng aria-labelledby
để tham chiếu văn bản hiển thị.
Chúng ta có thể thay đổi <div> phi ngữ nghĩa thành một đoạn <p>, sau đó thêm id để có thể tham chiếu đoạn văn đó. Sau đó, chúng ta sẽ sử dụng aria-labelledby:
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
Ngoài việc giảm tình trạng dư thừa, các dịch vụ dịch thuật cũng dịch văn bản hiển thị, trong khi giá trị thuộc tính thì không. Nếu có thể, hãy ưu tiên sử dụng văn bản so với văn bản thuộc tính nếu có văn bản cung cấp nhãn phù hợp.
Trình đơn điều hướng này là mục lục. Nếu bạn muốn sử dụng aria-label, hãy cung cấp thông tin đó thay vì lặp lại văn bản hiển thị:
<nav aria-label="Table of Contents">
<p>On this page</p>
Khi cung cấp tên thành phần hỗ trợ tiếp cận cho một phần tử, đừng thêm tên của phần tử đó. Trình đọc màn hình cung cấp thông tin đó cho người dùng.
Ví dụ: khi sử dụng phần tử <nav>, đừng thêm "navigation"; thông tin đó được đưa vào khi sử dụng các phần tử ngữ nghĩa.
Các đường liên kết nằm trong một danh sách không theo thứ tự. Mặc dù các mục này không nhất thiết phải được lồng vào một danh sách, nhưng việc sử dụng danh sách sẽ cho phép người dùng trình đọc màn hình biết số lượt chuyển đổi các mục danh sách và do đó liên kết là một danh sách riêng lẻ trong điều hướng.
<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>
Nếu trình duyệt của bạn có chiều rộng nhỏ hơn 80 em, phần "Trên trang này" tiện ích con nằm dưới tiêu đề và dòng giới thiệu. Điều này được thực hiện bằng cách thêm
hai thành phần điều hướng bảng nội dung và ẩn một thành phần bằng CSS display: none; dựa trên truy vấn đa phương tiện.
Việc đưa vào 2 tiện ích giống hệt nhau để chỉ hiển thị một tiện ích là phản mẫu. Số byte thừa là không đáng kể. Đang ẩn nội dung HTML khỏi
tất cả người dùng sử dụng CSS display: none đều phù hợp. Vấn đề là trên màn hình rộng, mục lục xuất hiện trước #main;
còn trên màn hình hẹp hơn, mục lục được lồng trong #main. Sử dụng bàn phím để chuyển đến nội dung bỏ qua trong bảng
nội dung trên một màn hình rộng. Mặc dù người dùng đã quen với việc nội dung có tính thích ứng và thay đổi vị trí khi họ thay đổi thiết bị hoặc
thì họ sẽ không muốn thứ tự thẻ thay đổi khi họ làm vậy. Bố cục trang phải dễ truy cập, dễ dự đoán và
và nhất quán trên một trang web. Trong trường hợp này, không thể dự đoán vị trí của mục lục.
Đường dẫn trang
Đường dẫn cung cấp điều hướng thứ cấp để giúp người dùng hiểu được vị trí của họ trên trang web. Chúng thường hiển thị hệ thống phân cấp URL của tài liệu hiện tại và vị trí của trang hiện tại trong cấu trúc trang web. Cấu trúc trang web từ góc độ người dùng có thể khác từ cấu trúc tệp trên máy chủ. Điều đó là bình thường. Người dùng không cần biết cách bạn sắp xếp các tệp nhưng họ thực sự cần biết cách để điều hướng qua nội dung của bạn.
Breadcrumb giúp người dùng điều hướng và hiểu được cách tổ chức trang web của bạn, cho phép họ nhanh chóng điều hướng đến bất kỳ tổ chức nào cấp trên
mà không phải quay lại từng trang được truy cập trước đó để truy cập trang hiện tại bằng chức năng back.
Nếu trang web có cấu trúc thư mục phân cấp đơn giản, như trong trường hợp của web.dev, thì điều hướng breadcrumb (tập hợp liên kết phân cấp) thường sẽ bao gồm của liên kết đến trang chủ hoặc tên máy chủ, cùng với một liên kết đến tệp chỉ mục của từng thư mục trong tên đường dẫn của URL. Việc bao gồm trang hiện tại là không bắt buộc và cần chú ý thêm.
const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"
Các phần của breadcrumb (tập hợp liên kết phân cấp) cho thấy đường dẫn từ trang hiện tại trở lại trang chủ, cho thấy từng cấp độ ở giữa.
Mỗi trang mô-đun Tìm hiểu HTML đều có cùng một điều hướng breadcrumb (tập hợp liên kết phân cấp), hiển thị hệ phân cấp của các bài học HTML trong
Phần learn/web.dev. Mã này tương tự như sau, đã xoá các lớp và chi tiết SVG để cho rõ ràng:
<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>
Đường dẫn này tuân theo các phương pháp hay nhất. Phần tử này sử dụng phần tử <nav> (một vai trò mang tính mốc), do đó, công nghệ hỗ trợ sẽ hiển thị breadcrumb (tập hợp liên kết phân cấp) dưới dạng một phần tử điều hướng trên trang.
Tên truy cập của "breadcrumb" (đường dẫn) (được cung cấp cùng với aria-label) giúp phân biệt đường dẫn này với các mốc điều hướng khác trong tài liệu hiện tại.
Giữa các đường liên kết có những dòng phân cách nội dung do CSS tạo. Các dòng phân cách đứng trước mỗi mục trong danh sách, bắt đầu bằng <li> thứ hai.
[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
}
Trình đọc màn hình sẽ không "thấy" chúng, và phương pháp hay nhất là: dấu phân cách giữa các đường liên kết breadcrumb (tập hợp liên kết phân cấp) nên được ẩn khỏi trình đọc màn hình. Hình ảnh cũng phải có đủ độ tương phản với nền, giống như văn bản thông thường.
Phiên bản này sử dụng danh sách và mục trong danh sách không theo thứ tự. Ưu tiên danh sách có thứ tự vì các mục trong danh sách có thứ tự được liệt kê.
Ngoài ra, đây còn là một danh sách: role="list" được thêm lại vì một số giá trị thuộc tính hiển thị CSS xoá ngữ nghĩa khỏi một số phần tử.
Nói chung, liên kết đến trang chủ trong breadcrumb (tập hợp liên kết phân cấp) phải có nội dung là "trang chủ" thay vì là biểu trưng trang web với tên của trang web như nhãn. Nhưng vì đường dẫn nằm ở đầu tài liệu và là nơi duy nhất xuất hiện biểu trưng trên trang nên nó hợp lý về lý do sử dụng phản mẫu này.
Phần tử cuối cùng là phần tử <share-action> tuỳ chỉnh. Các phần tử tuỳ chỉnh sẽ được thảo luận trong phần 15. Mặc dù phần tử tuỳ chỉnh này
không thuộc breadcrumb (tập hợp liên kết phân cấp), bao gồm cả một phần tử không liên quan trong <nav>, miễn là nội dung được đưa vào nhất quán trên tất cả các trang.
Trang hiện tại
Trên trang này, trang hiện tại, "Điều hướng", không được bao gồm trong breadcrumb (tập hợp liên kết phân cấp). Khi trang hiện tại được đưa vào trong một
breadcrumb (tập hợp liên kết phân cấp), văn bản không nên là đường liên kết và nên đưa aria-current="page" vào
mục danh sách. Nếu không có tiêu đề này, sẽ rất hữu ích nếu bạn cho biết rằng tiêu đề theo sau là trang hiện tại có
hoặc biểu tượng khác.
Nếu thiết kế thay đổi, bạn có thể sử dụng phiên bản thay thế của breadcrumb (tập hợp liên kết phân cấp):
<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>
Breadcrumb không dành cho các bước tuyến tính. Ví dụ: danh sách đường dẫn mà người dùng đã thực hiện để đến trang hiện tại hoặc
danh sách các bước đã thực hiện cho đến thời điểm này trong một công thức có thể được lồng trong <nav>, nhưng không được gắn nhãn là breadcrumb (tập hợp liên kết phân cấp).
Điều hướng cục bộ
Có một thành phần điều hướng khác trên trang này. Nếu bạn đang ở trên màn hình rộng, có một thanh bên ở bên trái chứa "Tìm hiểu HTML" biểu trưng, thanh tìm kiếm và đường liên kết đến từng phần trong số 20 phần trong Tìm hiểu HTML. Mỗi đường liên kết đều chứa số chương, tiêu đề mục và dấu kiểm ở bên phải trên các mục mà bạn đã truy cập — có thể là mục này nếu bạn đã rời đi và quay lại. Các đường liên kết đến tất cả các phần trong Tìm hiểu HTML, cùng với tiêu đề tìm kiếm và tiêu đề cục bộ, là điều hướng vị trí.
Nếu bạn đang truy cập trang web này trên máy tính bảng/thiết bị di động hay có màn hình hẹp hơn, thì khi bạn tải trang này, thanh bên sẽ bị ẩn. Bạn có thể hiển thị phần này thông qua trình đơn ba đường kẻ trong thanh điều hướng ở trên cùng (vâng, tiêu đề là một phần tử <web-header> tuỳ chỉnh đã đặt role="navigation").
Điểm khác biệt chính giữa điều hướng cục bộ cố định trên màn hình rộng và điều hướng cục bộ trên màn hình hẹp hơn có thể xuất hiện và biến mất, là hiển thị nút đóng trên phiên bản có thể bị ẩn. Biểu tượng này bị ẩn trên các màn hình rộng bằng display: none;.
Đường liên kết đến tài liệu này, mục 010, có hình thức hơi khác so với các đường liên kết khác trong thanh điều hướng cục bộ để cho người dùng nhìn thấy biết đây là trang hiện tại. Sự khác biệt về hình ảnh này được tạo bằng CSS. Trang hiện tại cũng được xác định bằng thuộc tính aria-current="page". Điều này giúp các công nghệ hỗ trợ biết rằng trang này là một đường liên kết đến trang hiện tại. HTML cho mục danh sách này trong điều hướng cục bộ này tương tự như:
<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>
Nếu đây không phải là lần đầu tiên bạn truy cập vào trang này, thì dấu kiểm sẽ không xuất hiện. Nếu trước đây bạn đã truy cập trang này,
Thuộc tính tuỳ chỉnh của data-complete được đặt thành true và dấu kiểm sẽ xuất hiện. Dấu kiểm đi kèm
trong mỗi đường liên kết, nhưng CSS sẽ ẩn hộp đánh dấu đối với những người dùng chưa từng truy cập vào trang này bằng display: none khi không có
Thuộc tính và giá trị data-complete="true":
.course .stack-nav a:not([data-complete="true"]) svg {
display: none;
}
Khi bạn đặt display thành một giá trị không phải là none, role sẽ thông báo cho công nghệ hỗ trợ rằng SVG cùng dòng là một hình ảnh,
và aria-label đóng vai trò là thuộc tính alt trên <img>.
Điều hướng toàn cục
Điều hướng chung là phần điều hướng dẫn đến các trang cấp cao nhất của trang web giống nhau trên mọi trang của trang web.
Điều hướng chung của trang web cũng có thể được tạo thành từ các tab mở ra danh sách liên kết lồng nhau liên kết đến tất cả các phần phụ của trang web hoặc các trình đơn khác.
Trang này có thể bao gồm các phần, nút và tiện ích tìm kiếm có tiêu đề. Các tính năng bổ sung này không bắt buộc. Yêu cầu là
điều hướng xuất hiện trên mọi trang và giống nhau trên mọi trang; bằng aria-current="page" trên mọi đường liên kết đến trang hiện tại.
Điều hướng toàn cục cung cấp phương tiện nhất quán để di chuyển đến bất cứ đâu trong ứng dụng hoặc trang web. Google không có điều hướng ở đầu trang. Chiến dịch trên Yahoo! làm. Trong khi tất cả các cửa hàng Yahoo! thuộc tính có các kiểu khác nhau, thì nội dung cho hầu hết các phần đều giống nhau.
Nội dung của tiêu đề điều hướng toàn cầu về tin tức và thể thao giống nhau, nhưng biểu tượng cho biết người dùng hiện đang về thể thao không đủ độ tương phản để tiếp cận được; ngay cả với những khách truy cập có thị lực kém. Cả hai phần đều có phần mở rộng chung điều hướng bằng điều hướng cục bộ theo mục cụ thể bên dưới.
Tương tự như điều hướng chung, chân trang phải giống nhau trên tất cả các trang. Nhưng đó là điểm tương đồng duy nhất. Điều hướng toàn cục cho phép điều hướng đến tất cả các phần của trang web từ góc độ sản phẩm. Các phần tử điều hướng trong chân trang không có yêu cầu cụ thể. Nhìn chung, chân trang sẽ chứa các đường liên kết đến doanh nghiệp, chẳng hạn như tuyên bố pháp lý, giới thiệu về công ty và sự nghiệp, đồng thời có thể dẫn người dùng đến chẳng hạn như biểu tượng mạng xã hội.
Chân trang này chứa ba phần tử <nav> bổ sung: phần điều hướng ở chân trang, nhà phát triển của Google, các điều khoản và chính sách,
trong đó mỗi đường liên kết là một đường liên kết. Phần điều hướng ở chân trang trình bày cách đóng góp cho web.dev trên GitHub, các nội dung hướng dẫn khác do
Google bên ngoài web.dev và thông tin "cách kết nối" bên ngoài .
Ba thành phần điều hướng này trong <footer> là phần tử <nav> có aria-label cung cấp tên dễ tiếp cận cho các vai trò mốc này.
Tất cả các thành phần điều hướng mà chúng ta thấy đều là các đường liên kết được lồng vào danh sách trong một điều hướng. Chúng tôi đã đề cập đến tất cả những gì bạn cần biết để tạo các thành phần điều hướng của riêng bạn.
Tiếp theo, chúng ta sẽ xem xét cách đánh dấu bảng dữ liệu.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về điều hướng.
Phần tử nào dùng để đánh dấu phần điều hướng chính của một trang web?
<navigation><breadcrumb><nav>Có thể có nhiều phần tử điều hướng trên một trang?