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 đườ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 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ẽ tìm hiểu cách nhóm các danh sách đường liên kết lại với nhau để tạo thành phần điều hướng.

Có một số loại thao tác và nhiều cách để hiển thị các thao tác đó. Thẻ liên kết đượ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ộ. Đ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 liên quan đến cấu trúc của trang web, hoặc các trang mà người dùng đã theo để đến trang hiện tại, được gọi là 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 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 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ị điều hướng toàn cục theo cách khác nhau, tuỳ thuộc vào kích thước khung nhìn.

Hãy 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 thao tác điều hướng trực quan và không quá tải. 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à một 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 thành phần điều hướng chung.

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 phía trên tiêu đề, mục lục "trên trang này" sau tiêu đề và mục lục "Tìm hiểu HTML" mà tuỳ thuộc vào chiều rộng màn hình của bạn, sẽ luôn xuất hiện hoặc xuất hiện chỉ với thao tác 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à đường liên kết đến đường dẫn.

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

Phần tử đầu tiên trên trang là đường liên kết nội bộ:

<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 vào Enter, cuộn trang và đặt tiêu điểm vào nội dung chính: một mốc <main> có id là main:

<main id="main">

Có thể bạn chưa từng nhìn thấy đường liên kết đó trên trang web này, ngay cả khi bạn đã đọc hết các phần trước. Mã này chỉ được hiển thị khi có tâm điểm:

Để cải thiện khả năng hữu dụng và khả năng tiếp cận, điều quan trọng là 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. Đường liên kết bỏ qua cũng đượ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 việc phải sử dụng phím tab thông qua các đường liên kết rộng. Trên trang này, đường liên kết bỏ qua bỏ qua thành phần điều hướng bằng thanh bên trên toàn mục và đường dẫn điều hướng, đưa người dùng đến thẳng tiêu đề trang.

Hầu hết các nhà thiết kế đều không thích hình thức đường liên kết ở đầu trang. Bạn có thể ẩn đường liên kết khỏi chế độ xem và nhớ rằng khi đường liên kết trở thành tâm điểm, điều này sẽ xảy ra khi người dùng bàn phím sử dụng đường liên kết trên trang, thì đường 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 được 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 tới màn hình chính". Đây là tên có thể truy cập của đường liên kết. Đây là một trang web kỹ thuật và người dùng có thể biết "chính" có nghĩa là gì. Giống như tất cả văn bản liên kết, tên có thể truy cập phải chỉ rõ nơi liên kết đưa người dùng đến. Mục tiêu liên kết phải là điểm mở đầu trong 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 đường liên kết "Chuyển đến trang chính". Sau đó, nhấn Enter để đảm bảo thành phần này "chuyển" đến nội dung chính.

Mục lục

Đường liên kết bỏ qua đến nội dung sẽ cuộn nội dung chính đến khung hiển thị. 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>. Theo sau tiêu đề chính là dòng giới thiệu, nội dung mô tả ngắn về nội dung của hướng dẫn này. Việc mục lục điều hướng xuất hiện trước hay sau tiêu đề trong cơ sở mã tuỳ 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 mã đánh dấu và tương tự như sau (tên các lớp đã bị xoá để đơn giản hoá mã đá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ử tốt nhất để sử dụng cho các phần điều hướng: phần tử này sẽ 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.

Khi thêm thuộc tính aria-label, nội dung mô tả ngắn gọn về mục đích điều hướng sẽ được cung cấp. Trong trường hợp này, vì giá trị của thuộc tính không cần thiết cho văn bản hiển thị trên trang, nên 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> không có ngữ nghĩa thành một đoạn <p>, sau đó thêm một id để có thể tham chiếu đến đoạ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 sự dư thừa, văn bản hiển thị được dịch bởi các dịch vụ dịch, trong khi các giá trị thuộc tính thì không. Khi có thể, nếu có văn bản cung cấp đầy đủ nhãn thì hãy ưu tiên nhãn đó thay vì văn bản thuộc tính.

Bảng đ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 cung cấp 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 phần tử ngữ nghĩa.

Các đường liên kết này nằm trong một danh sách không có thứ tự. Mặc dù các danh sách 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ẽ giúp người dùng trình đọc màn hình biết số lượng mục trong danh sách và do đó, các đường liên kết sẽ là một danh sách riêng lẻ trong một 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>

Nếu chiều rộng của trình duyệt nhỏ hơn 80 em, thì tiện ích "Trên trang này" sẽ nằm bên dưới tiêu đề và dòng giới thiệu. Bạn có thể thực hiện việc này bằng cách đưa 2 thành phần điều hướng trong bảng nội dung vào và ẩn một thành phần bằng CSS display: none; dựa trên một truy vấn nội dung nghe nhìn.

Đưa 2 tiện ích giống hệt nhau vào để chỉ hiển thị một tiện ích là chống hoa văn. Số byte thừa là không đáng kể. Việc ẩn nội dung HTML khỏi tất cả người dùng bằng cách sử dụng CSS display: none là 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 các màn hình hẹp hơn, mục lục bị lồng trong #main. Sử dụng bàn phím để chuyển đến nội dung sẽ bỏ qua bảng nội dung trên màn hình rộng. Mặc dù người dùng đã quen với việc nội dung phản hồi và thay đổi vị trí khi 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 làm như vậy. Bố cục trang phải dễ truy cập, dự đoán được và nhất quán trên một trang web. Ở đây, vị trí của mục lục không thể dự đoán được.

Đường dẫn trang

Breadcrumb (tập hợp liên kết phân cấp) cung cấp thành phần điều hướng phụ giúp người dùng biết họ đang ở đâu 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 với cấu trúc tệp trên máy chủ. Điều này là bình thường. Người dùng không cần phải biết cách bạn sắp xếp các tệp nhưng họ cần phải có khả năng di chuyển trong nội dung của bạn.

Breadcrumb giúp người dùng di chuyển và nắm được cách tổ chức trang web của bạn, cho phép họ nhanh chóng di chuyển đến bất kỳ phần nào của đối tượng cấp trên mà không phải quay lại từng trang trước được truy cập để đến 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, điều hướng breadcrumb (tập hợp liên kết phân cấp) thường sẽ bao gồm một đường liên kết đến trang chủ hoặc tên máy chủ, kèm theo một đường liên kết đến tệp chỉ mục của mỗi thư mục trong tên đường dẫn của URL. Việc thêm trang hiện tại là không bắt buộc và bạn cần chú ý hơn.

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 cho thấy đường dẫn từ trang hiện tại quay lại trang chủ, cho thấy từng cấp ở giữa.

Mọi trang mô-đun HTML Tìm hiểu đều có cùng một 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 về HTML trong phần learn của web.dev. Mã này cũng tương tự như sau, trừ các lớp và thông tin chi tiết về SVG (Đồ hoạ vectơ có thể mở rộng) để 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>

Tập hợp liên kết phân cấp này tuân theo các phương pháp hay nhất. Tiện ích này sử dụng phần tử <nav> có vai trò mang tính mốc quan trọng, 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 thành phần điều hướng trên trang. Tên thành phần hỗ trợ tiếp cận của "breadcrumb" (tập hợp liên kết phân cấp), do aria-label cung cấp, sẽ 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ó các dấu phân tách nội dung do CSS tạo. 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 "nhìn thấy" chúng, đây là phương pháp hay nhất: dấu phân tách giữa các đường liên kết đường dẫn phải được ẩn khỏi trình đọc màn hình. Các thành phần này 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 không theo thứ tự và các mục trong danh sách. Bạn nên ưu tiên sử dụng danh sách theo thứ tự vì các mục trong danh sách được sắp xếp theo thứ tự được liệt kê. Đây cũng 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ử.

Nhìn chung, đường liên kết đến trang chủ trong breadcrumb phải có dạng "trang chủ" thay vì biểu trưng của trang web có nhãn là tên của trang web. Tuy nhiên, vì breadcrumb (tập hợp liên kết phân cấp) nằm ở đầu tài liệu và là lần xuất hiện duy nhất của biểu trưng trên trang, nên đây là lý do khiến mã chống mẫu này được sử dụng.

Phần tử cuối cùng là phần tử <share-action> tuỳ chỉnh. Các phần tử tuỳ chỉnh đượ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), nhưng vẫn có thể đưa một phần tử không liên quan vào <nav>, miễn là việc thêm phần tử 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, "Navigation", không được đưa vào breadcrumb (tập hợp liên kết phân cấp). Khi trang hiện tại được đưa vào 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, còn aria-current="page" nên được đưa vào mục danh sách của trang hiện tại. Nếu thuộc tính này không được đưa vào, bạn nên cho biết rằng tiêu đề theo sau là trang hiện tại kèm theo một biểu tượng hoặc ký hiệu khác.

Nếu thiết kế thay đổi, bạn có thể sử dụng phiên bản breadcrumb thay thế:

<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 (tập hợp liên kết phân cấp) 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 đã đi theo để truy cập vào 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 vào <nav>, nhưng không được gắn nhãn là breadcrumb (tập hợp liên kết phân cấp).

Chỉ đườ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 sử dụng màn hình rộng, sẽ có một thanh bên ở bên trái có biểu trưng "Tìm hiểu HTML", thanh tìm kiếm và các đường liên kết đến từng phần trong số 20 phần của 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 các phần bạn đã truy cập. Có thể đường liên kết này nếu bạn đã điều hướng sang một trang khác và quay trở lại. 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 truy cập trang web này trên máy tính bảng hoặc thiết bị di động hay có màn hình hẹp hơn, khi bạn tải trang này, thanh bên sẽ bị ẩn. Bạn có thể hiển thị mục này qua trình đơn ba đường kẻ ở thanh điều hướng trên cùng (có, tiêu đề là phần tử <web-header> tuỳ chỉnh có tập hợp role="navigation").

Sự 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 các màn hình hẹp hơn có thể xuất hiện và biến mất là màn hình hiển thị của nút đóng trên phiên bản có thể bị ẩn. Biểu tượng này bị ẩn trên 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 bình thường biết rằng đây là trang hiện tại. Sự khác biệt về hình ảnh này là do CSS tạo ra. Trang hiện tại cũng được xác định bằng thuộc tính aria-current="page". Đoạn mã này thông báo cho các công nghệ hỗ trợ rằng đó 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 hiển thị. Nếu trước đây bạn đã truy cập vào trang này, thì data-complete thuộc tính tuỳ chỉnh sẽ được đặt thành true và dấu kiểm sẽ hiển thị. Dấu kiểm có 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 do 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 giá trị khác 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, còn aria-label đóng vai trò là thuộc tính alt trên <img>.

Điều hướng chung

Điều hướng chung là phần điều hướng dẫn đến các trang cấp cao nhất trong trang web và 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 thẻ mở ra danh sách lồng ghép chứa các đường liên kết liên kết đến tất cả các phần phụ của một trang web hoặc các trình đơn khác. Tính năng này có thể bao gồm các phần có tiêu đề, nút và tiện ích tìm kiếm. Các tính năng bổ sung này không bắt buộc. Điều bắt buộc là thành phần điều hướng xuất hiện trên mọi trang và giống nhau trên mọi trang; tất nhiên là với 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 mọi nơi trong ứng dụng hoặc trang web. Google không có điều hướng chung ở đầu trang. Yahoo! hiện có. Mặc dù tất cả các tài sản chính của Yahoo! đều có kiểu khác nhau, nhưng nội dung của hầu hết các mục đề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 thấy người dùng đang xem thể thao không có đủ độ tương phản để có thể truy cập được; ngay cả đối với những khách truy cập không có thị lực kém. 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 một mục 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 chung 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 thành phần điều hướng trong chân trang không có yêu cầu cụ thể. Nhìn chung, chân trang sẽ bao gồm các đường liên kết đến công ty, chẳng hạn như tuyên bố pháp lý, về công ty và sự nghiệp và có thể dẫn đến các nguồn bên ngoài, chẳng hạn như biểu tượng mạng xã hội.

Chân trang của trang này chứa 3 phần tử <nav> bổ sung: phần điều hướng ở chân trang, nhà phát triển của Google cũng như các điều khoản và chính sách, trong đó mỗi phần tử là một đường liên kết. Phần điều hướng ở chân trang bao gồm cách đóng góp cho web.dev trên GitHub, các nội dung hướng dẫn khác do Google cung cấp bên ngoài web.dev và các đường liên kết "cách kết nối" bên ngoài.

Ba thành phần điều hướng này trong <footer> là các phần tử <nav> với aria-labelcung 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à đường liên kết được lồng vào danh sách trong một mục điều hướng. Chúng tôi đã đề cập đến mọi thông tin bạn cần biết để tạo hoạt động điều hướng của riêng mình. Tiếp theo, chúng ta sẽ tìm hiểu cách đá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ề điều hướng.