Thao tác

Như bạn đã tìm hiểu trong phần đường liên kết, phần tử <a> có thuộc tính href sẽ tạo ra những đường liên kết mà người dùng có thể truy cập bằng cách nhấp hoặc nhấn. Trong phần danh sách, bạn đã tìm hiểu cách tạo danh sách nội dung. Trong mô-đun này, bạn sẽ khám phá cách nhóm các danh sách đường liên kết với nhau để tạo thành một thành phần điều hướng.

Có một số loại thành phần điều hướng và một số cách để hiển thị các thành phần đó. Các điểm neo đượ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à thành phần điều hướng cục bộ. Thanh điều hướng cục bộ bao gồm một chuỗi các đường liên kết, hiển thị hệ thống phân cấp của trang hiện tại so với cấu trúc của trang web hoặc các trang mà người dùng đã truy cập để đến trang hiện tại, được gọi là đường dẫn breadcrumb.

Mục lục của trang là một loại điều hướng cục bộ khác. Một trang chứa các đường liên kết phân cấp đến từng trang trên một trang web được gọi là sơ đồ trang web. Thanh điều hướng dẫn đến các trang cấp cao nhất của trang web (thường xuất hiện trên mọi trang) được gọi là thanh điều hướng chung. Thanh điều hướng chung có thể xuất hiện theo nhiều cách, bao gồm cả thanh điều hướng, trình đơn thả xuống và trình đơn bật lên. Cùng một trang web có thể hiển thị chế độ điều hướng chung theo nhiều cách, tuỳ thuộc vào kích thước khung hiển thị.

Luôn đảm bảo rằng người dùng có thể chuyển đến bất kỳ trang nào trên trang web của bạn chỉ bằng một vài lượt nhấp, đồng thời đảm bảo rằng hệ thống điều hướng trực quan và không quá phức tạp. Tuy nhiên, không có yêu cầu cụ thể nào đối với các phần tử điều hướng. MachineLearningWorkshop.com là một trang web một trang, có một 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 chung.

Đường liên kết "Chuyển đến nội dung"

Một số trang web có đường liên kết "chuyển đến nội dung", thường là phần tử đầu tiên trong thứ tự tiêu điểm. Mã có thể có dạng như sau:

<a href="#main" class="skip-link button">Skip to main</a>

Khi được nhấp vào hoặc khi có tiêu điểm và người dùng nhấn Enter, nút này sẽ cuộn trang và đặt tiêu điểm vào phần tử có mã nhận dạng main, có lẽ là nội dung chính.

<main id="main">

Để cải thiện khả năng sử dụng và khả năng tiếp cận, bạn cần 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, chẳng hạn như tiêu đề chung và các mục điều hướng chính. Khi người dùng bàn phím nhấn tab, họ có thể nhanh chóng chuyển đến nội dung mới trên trang nhờ đường liên kết bỏ qua. Điều này giúp họ không phải nhấn phím Tab để chuyển qua một trình đơn mở rộng.

Hầu hết nhà thiết kế không thích việc có một đường liên kết như vậy ở đầu trang. Bạn có thể ẩn đường liên kết đó. Tuy nhiên, hãy nhớ rằng khi đường liên kết nhận được tiêu điểm (điều này xảy ra khi người dùng bàn phím nhấn phím Tab qua đường liên kết trên trang), đường liên kết đó phải hiển thị cho người dùng.

Chỉ ẩn nội dung ở trạng thái không được lấy tiêu đ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).

Giống như mọi văn bản liên kết, tên phải cho biết rõ ràng nơi đường liên kết sẽ đưa người dùng đến. Mục tiêu của đường liên kết phải là phần đầu của nội dung chính trên trang.

Mục lục

Phần tử đầu tiên của nội dung chính là tiêu đề <h1> có tiêu đề của trang này: <h1>Navigation</h1>. Tiêu đề chính sẽ theo sau bằng một nội dung mô tả ngắn gọn về nội dung của hướng dẫn này.

Trên các màn hình nhỏ hơn, mục lục sẽ xuất hiện sau tiêu đề. Trên màn hình lớn, thông tin này sẽ xuất hiện trong một thanh bên được căn phải.

Phần tử tốt nhất để sử dụng cho các mục điều hướng là <nav>. Thẻ này tự động thông báo cho trình đọc màn hình và công cụ tìm kiếm rằng một phần có vai trò là navigation, một vai trò mốc.

Thêm thuộc tính aria-label để có nội dung mô tả ngắn gọn về mục đích của thành phần điều hướng. Trong trường hợp này, giá trị của thuộc tính đó sẽ dư thừa so với văn bản "Trên trang này". Để tham chiếu văn bản hiển thị, hãy sử dụng aria-labelledby.

Khi dùng id, mã có thể như sau:

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
...
</nav>

Ngoài việc giảm sự dư thừa, văn bản hiển thị sẽ được dịch bằng các dịch vụ dịch, trong khi các giá trị thuộc tính có thể không được dịch. Nếu có thể, nếu có văn bản cung cấp nhãn phù hợp, hãy tham khảo văn bản đó thay vì sử dụng văn bản thuộc tính.

Thanh điều hướng "Nội dung trên trang này" là mục lục. Nếu bạn muốn sử dụng aria-label, hãy cung cấp ngữ cảnh đó thay vì lặp lại văn bản hiển thị:

<nav aria-label="Table of Contents">
  <p>On this page</p>
...
</nav>

Để cung cấp tên hỗ trợ tiếp cận cho một phần tử, bạn không nên thêm tên của phần tử. Trình đọc màn hình cung cấp tên của phần tử cho người dùng. Ví dụ: khi sử dụng phần tử <nav>, đừng thêm từ "navigation" (điều hướng) vì thông tin đó đã được thêm vào các phần tử ngữ nghĩa.

Mặc dù các mục điều hướng không nhất thiết phải được lồng trong một danh sách, nhưng việc sử dụng danh sách sẽ giúp người dùng trình đọc màn hình biết có bao nhiêu mục trong danh sách và do đó có bao nhiêu đường liên kết trong thành phần đ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>

Tránh thay đổi thứ tự thẻ

Mục lục có thể xuất hiện sau tiêu đề, trên màn hình nhỏ hơn hoặc trong một thanh bên được căn phải. Việc đưa vào hai bộ điều hướng giống hệt nhau, chỉ để hiển thị một bộ, sẽ là một mẫu phản hồi không phù hợp.

Chúng tôi đã dùng CSS để hiển thị trình đơn điều hướng dưới dạng một thanh bên trên những trang có chiều rộng lớn hơn 1254 px.

Mặc dù người dùng đã quen với việc nội dung có khả năng thích ứng và thay đổi vị trí khi họ thay đổi thiết bị hoặc tăng kích thước phông chữ, nhưng họ không mong đợi thứ tự thẻ thay đổi khi họ làm như vậy. Bố cục trang phải dễ truy cập, dễ dự đoán và nhất quán trên toàn bộ trang web. Ở đây, vị trí của mục lục không thể dự đoán được.

Tập hợp liên kết phân cấp trên trang

Đường dẫn breadcrumb cung cấp thông tin điều hướng phụ để giúp người dùng biết họ đang ở đâu trên một trang web. Breadcrumb thường cho biết 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 theo góc độ của người dùng có thể khác với cấu trúc tệp trên máy chủ và điều đó không sao cả. 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ọ cần có thể di chuyển qua nội dung của bạn.

Đường liên kết dạng đánh dấu cung cấp cho người dùng thông tin chi tiết về cấu trúc trang web của bạn. Điều này giúp người dùng chuyển đến bất kỳ mục nào ở cấp trên mà không cần phải quay lại từng trang đã truy cập trước đó bằng cách sử dụng hàm back.

Nếu trang web có cấu trúc thư mục phân cấp (như trường hợp của web.dev), thì thành phần điều hướng theo đường liên kết thường bao gồm một đường liên kết đến trang chủ hoặc tên máy chủ và một đường liên kết đến tệp chỉ mục của mỗi thư mục trong đường dẫn URL. Bạn không bắt buộc phải thêm trang hiện tại và cần chú ý thêm một chút.

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 đường dẫn breadcrumb cho biết đườ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 Learn HTML đều có cùng một đường dẫn điều hướng, hiển thị hệ phân cấp của các bài học HTML trong phần Learn của web.dev.

Mã sẽ tương tự như sau:

<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>

Phần tử <nav> (vai trò là điểm đánh dấu) cho biết công nghệ hỗ trợ sẽ trình bày đường dẫn breadcrumb dưới dạng một phần tử điều hướng trên trang. Tên có thể truy cập của "đường dẫn", được cung cấp bằng aria-label, giúp phân biệt thành phần điều hướng này với các điểm đánh dấu điều hướng khác trong cùng một tài liệu.

Giữa mỗi đường liên kết là một dấu phân cách nội dung. Bạn có thể tạo các dấu phân cách này bằng CSS để hiển thị trước mỗi mục trong danh sách, bắt đầu từ mục thứ hai.

[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
}

Trình đọc màn hình không "nhìn thấy" các biểu tượng này, đây là phương pháp hay nhất. Trình đọc màn hình không được đọc dấu phân cách giữa các đường liên kết trong đường dẫn. Các phần tử này cũng phải có độ tương phản đủ cao so với nền, giống như mọi văn bản và phần tử trực quan khác trên trang.

Mã mẫu của chúng tôi sử dụng danh sách có thứ tự, tốt hơn danh sách không có thứ tự vì các mục được liệt kê. role="list" được thêm vào vì một số giá trị thuộc tính hiển thị CSS sẽ xoá ngữ nghĩa khỏi một số phần tử.

Thông thường, đường liên kết đến trang chủ trong một đường dẫn hiển thị phải có nội dung là "trang chủ" thay vì tên trang web hoặc biểu trưng của trang web. Vì đường dẫn xuất hiện ở đầu tài liệu, nên việc sử dụng mẫu chống này là hợp lý.

Trang hiện tại, Điều hướng, không có trong đường dẫn.

Trang hiện tại

Khi trang hiện tại nằm trong một đường dẫn, tốt nhất là văn bản không nên là một đường liên kết và bạn nên thêm aria-current="page" vào mục danh sách của trang hiện tại. Nếu không có, bạn nên cho biết tiêu đề tiếp theo là trang hiện tại bằng một biểu tượng hoặc ký hiệu khác.

Hãy xem phiên bản thay thế của đường dẫn với bài tập này:

<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>

Đường liên kết dạng đánh dấu có thể không giống với các bước tuyến tính mà người dùng đã thực hiện để truy cập vào trang hiện tại. Danh sách các bước đã thực hiện cho đến thời điểm này có thể được lồng trong một <nav>, nhưng không được gắn nhãn là đường dẫn.

Thanh điều hướng cục bộ

Thành phần điều hướng tiếp theo xuất hiện trên hầu hết các thiết bị có kích thước trung bình và lớn trong một thanh bên trái, có thanh bộ lọc và đường liên kết đến từng phần trong Learn HTML. Các đường liên kết này và thanh bộ lọc là vị trí điều hướng.

Nếu bạn truy cập trang này trên thiết bị di động hoặc 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ể truy cập vào phần này bằng menu trong trình đơn điều hướng trên cùng.

Điểm khác biệt chính giữa chế độ điều hướng cục bộ cố định trên màn hình rộng và chế độ điều hướng cục bộ trên màn hình hẹp là mũi tên dẫn về chế độ điều hướng chính ở trên cùng, sau đó đóng chế độ điều hướng.

Đường liên kết đến tài liệu này trông giống như các đường liên kết khác trong thanh điều hướng cục bộ. Tuy nhiên, đường liên kết này có thể có một chút khác biệt so với các đường liên kết khác để cho người dùng nhìn thấy biết rằng đây là trang hiện tại. Bạn nên tạo sự khác biệt về hình ảnh này bằng CSS.

Bạn cũng có thể xác định trang hiện tại bằng thuộc tính aria-current="page". Điều này thông báo cho các công nghệ hỗ trợ rằng đường liên kết dẫn đến trang hiện tại.

Lý tưởng nhất là HTML cho mục danh sách này trong chế độ điều hướng cục bộ sẽ có dạng như sau:

<li>
  <a aria-current="page" aria-selected="true" href="/learn/html/navigation">
    Navigation
  </a>
</li>

Điều hướng chung

Thanh điều hướng chung dẫn đến các trang cấp cao nhất của trang web và giống nhau trên mọi trang của một trang web. Thanh điều hướng chung của một trang web cũng có thể bao gồm các thẻ mở danh sách liên kết lồng nhau, liên kết đến tất cả các mục con của một trang web hoặc các trình đơn khác. Trang này có thể bao gồm các phần có tiêu đề, nút và tiện ích tìm kiếm. Bạn không bắt buộc phải sử dụng các tính năng bổ sung này. Điều kiện bắt buộc là trình đơn điều hướng phải xuất hiện trên mọi trang và giống nhau trên mọi trang, tất nhiên là có aria-current="page" trên mọi đường liên kết đến trang hiện tại.

Thanh điều hướng chung cung cấp một phương thức nhất quán để di chuyển đến bất kỳ vị trí nào trong ứng dụng hoặc trang web. Trang web của Google không có thanh điều hướng chung ở đầu trang. Yahoo! có. Mặc dù tất cả các tài sản chính của Yahoo! đều có nhiều kiểu dáng khác nhau, nhưng nội dung của hầu hết các phần đều giống nhau.

Nội dung của tiêu đề điều hướng chung cho tin tức và thể thao là giống nhau. Tuy nhiên, biểu tượng cho biết người dùng đang ở trên trang thể thao không có độ tương phản đủ để có thể truy cập, ngay cả đối với những khách truy cập có thị lực hoàn hảo. Cả hai phần đều có một thành phần điều hướng chung với một thành phần điều hướng cục bộ dành riêng cho phần bên dưới.

Tương tự như thành phần đ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. Thanh điều hướng chung cho phép điều hướng đến tất cả các phần của trang web, theo 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ể.

Thông thường, chân trang bao gồm các đường liên kết của công ty, chẳng hạn như tuyên bố pháp lý, thông tin về công ty, trang tuyển dụng và các đường liên kết đến các nguồn bên ngoài có liên quan, chẳng hạn như mạng xã hội.

Phần chân trang của trang này có 2 nhóm phần tử điều hướng: một nhóm gồm 3 cột điều hướng liên quan đến web.dev và một nhóm điều hướng riêng biệt về các điều khoản và quyền riêng tư của Google. Phần điều hướng ở chân trang bao gồm cách đóng góp cho web.dev, nội dung liên quan do nhóm web.dev cung cấp và các đường liên kết đến mạng xã hội bên ngoài.

Tiếp theo, chúng ta sẽ xem xét việc đánh dấu bảng dữ liệu.

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về tính năng chỉ đường.