Cấu trúc nội dung

Một trong những khía cạnh quan trọng nhất của khả năng hỗ trợ tiếp cận kỹ thuật số là cấu trúc cơ bản của trang. Khi xây dựng trang web hoặc ứng dụng bằng cách sử dụng các phần tử cấu trúc thay vì chỉ dựa vào kiểu, bạn sẽ cung cấp ngữ cảnh quan trọng cho những người sử dụng công nghệ hỗ trợ (AT), chẳng hạn như trình đọc màn hình.

Các phần tử cấu trúc đóng vai trò là bản phác thảo nội dung trên màn hình, nhưng cũng đóng vai trò là điểm neo để giúp bạn dễ dàng di chuyển trong nội dung hơn.

Khi bạn sử dụng các phần tử HTML có ngữ nghĩa, ý nghĩa vốn có của từng phần tử sẽ được truyền đến cây hỗ trợ tiếp cận và được công cụ hỗ trợ tiếp cận sử dụng, giúp nội dung có ý nghĩa hơn so với các phần tử không có ngữ nghĩa. Có thể có trường hợp bạn cần thêm các thuộc tính ARIA khác để tạo mối quan hệ hoặc nâng cao trải nghiệm tổng thể của người dùng, nhưng trong hầu hết các trường hợp, một trong hơn 100 phần tử HTML có sẵn sẽ hoạt động khá tốt.

Mặc dù mô-đun này tập trung vào các thành phần cấu trúc được sử dụng rộng rãi nhất và quan trọng đối với khả năng hỗ trợ tiếp cận kỹ thuật số, nhưng chắc chắn vẫn có các thành phần và yếu tố môi trường khác cần cân nhắc khi xây dựng cấu trúc vào trang web hoặc ứng dụng của bạn. Những ví dụ này chỉ là phần giới thiệu về chủ đề này chứ không phải là toàn bộ.

Địa danh

Người dùng công cụ hỗ trợ tiếp cận dựa vào các thành phần cấu trúc để cung cấp cho họ thông tin về bố cục tổng thể của trang. Khi phân chia các vùng nội dung lớn, bạn có thể sử dụng vai trò điểm đánh dấu ARIA hoặc các phần tử điểm đánh dấu HTML mới hơn để thêm ngữ cảnh cấu trúc vào trang.

Mốc đảm bảo nội dung nằm trong các khu vực có thể điều hướng. Bạn nên cung cấp ít nhất một địa điểm yêu thích trên mỗi trang.

Một số tài nguyên đề xuất kết hợp các mốc ARIA và HTML với nhau để cung cấp phạm vi hỗ trợ công cụ hỗ trợ tiếp cận tốt hơn. Mặc dù loại thông tin dư thừa này sẽ không gây ra vấn đề cho người dùng, nhưng bạn nên kiểm tra các mẫu bằng trình đọc màn hình để chắc chắn. Khi không chắc chắn, tốt nhất bạn chỉ nên sử dụng các phần tử điểm đánh dấu HTML mới hơn theo mặc định, vì tính năng hỗ trợ trình duyệt rất mạnh mẽ.

Hãy so sánh các phần tử mốc HTML được liên kết với các vai trò mốc ARIA tương ứng.

Phần tử mốc HTML Vai trò của mốc ARIA
<header> biểu ngữ
<aside> bổ sung
<footer> contentinfo
<nav> navigation
<main> main
<form> 1 biểu mẫu
<section> 1 region
1 Yêu cầu đưa thuộc tính name vào để có thể truy cập. section phải được gọi tên dễ tiếp cận để công nghệ hỗ trợ có thể thấy vai trò ARIA ngầm ẩn region.

Bây giờ, hãy so sánh các ví dụ về cấu trúc nội dung hỗ trợ tiếp cận.

Không nên
<div>
    <div>...</div>
</div>

<div>
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
</div>

<div>
<p>© 2022 - Stamps R Awesome</p>
</div>
Nên
<header>
    <nav>...</nav>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
    </section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>

Tiêu đề

Khi được triển khai đúng cách, các cấp tiêu đề HTML sẽ tạo thành một bản tóm tắt ngắn gọn về nội dung tổng thể của trang.

Chúng ta có thể sử dụng 6 cấp tiêu đề. Tiêu đề cấp một <h1> được dùng cho thông tin quan trọng nhất và cao nhất của trang, chuyển dần đến tiêu đề cấp sáu <h6> cho thông tin thấp nhất và ít quan trọng nhất.

Trình tự của các cấp tiêu đề rất quan trọng. Tốt nhất là bạn không nên bỏ qua các cấp tiêu đề, ví dụ: bắt đầu một phần bằng <h1> và ngay lập tức theo sau là <h5>. Thay vào đó, bạn nên chuyển sang <h5> theo thứ tự. Thứ tự cấp tiêu đề đặc biệt quan trọng đối với người dùng AT vì đây là một trong những cách chính để họ di chuyển qua nội dung.

Để giúp bạn tuân thủ cấu trúc ngữ nghĩa và thứ tự thích hợp cho tiêu đề, hãy cân nhắc việc tách các kiểu CSS khỏi các cấp tiêu đề. Điều này giúp bạn linh hoạt hơn trong việc sử dụng kiểu tiêu đề, đồng thời vẫn duy trì thứ tự cấp tiêu đề. Điều quan trọng là bạn không chỉ sử dụng kiểu để tạo tiêu đề, vì AT không xem các kiểu này là tiêu đề.

Khi chúng ta giả mạo tiêu đề, cấu trúc phù hợp sẽ không được truyền đến người dùng công cụ hỗ trợ tiếp cận.

Tiêu đề cũng hữu ích cho những người mắc chứng rối loạn nhận thức và rối loạn thiếu tập trung. Điều quan trọng là nội dung tiêu đề phải có ý nghĩa để giúp họ hiểu được điều gì quan trọng nhất trên trang.

Không nên
<div>
    <h3>Stamps</h3>
    <p>Stamp collecting, also known as philately, is the study of
  postage stamps, stamped envelopes, postmarks, postcards, and
  other materials relating to postal delivery.</p>
</div>

<div>
    <h3>How do I start a stamp collection?</h3>
  <h2>Equipment you will need</h2>
    <h4>...</h4>
  <h2>How to acquire stamps</h2>
    <h4>...</h4>
  <h2>Organizations you can join</h2>
    <h4>...</h4>
</div>
Nên
<header>
  <h1>Stamp collecting</h1>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
        <h2>What is stamp collecting?</h2>
        <p>Stamp collecting, also known as philately, is the study of
    postage stamps, stamped envelopes, postmarks, postcards, and
    other materials relating to postal delivery.</p>
    </section>

    <section aria-label="Start a stamp collection">
        <h2>How do I start a stamp collection?</h2>
    <h3>Required equiment</h3>
    <p>...</p>

    <h3>How to acquire stamps</h3>
    <p>...</p>

    <h3>Organizations you can join</h3>
        <p>...</p>
    </section>
</main>

Danh sách

Danh sách HTML là một cách để nhóm các mục tương tự nhau theo ngữ nghĩa, tạo cho các mục đó ý nghĩa vốn có, giống như danh sách mua sắm tại cửa hàng tạp hoá hoặc danh sách việc cần làm không bao giờ kết thúc mà bạn liên tục bỏ qua.

Có ba loại danh sách HTML:

  • đã đặt hàng <ol>
  • không theo thứ tự <ul>
  • description <dl>

Phần tử mục danh sách <li> được dùng để biểu thị một mục trong danh sách có thứ tự hoặc không có thứ tự, trong khi phần tử thuật ngữ mô tả <dt> và phần tử định nghĩa <dd> có thể được tìm thấy trong danh sách mô tả.

Khi được lập trình đúng cách, các phần tử này có thể thông báo cho người dùng AT khiếm thị về cấu trúc hiển thị của danh sách. Khi gặp một danh sách ngữ nghĩa, công cụ hỗ trợ tiếp cận có thể cho người dùng biết tên danh sách và số lượng mục trong danh sách đó. Khi người dùng di chuyển trong danh sách, AT sẽ đọc to từng mục trong danh sách và cho biết mục đó là số mấy trong danh sách – mục 1 trong 5, mục 2 trong 5, v.v.

Việc nhóm các mục thành danh sách cũng giúp những người khiếm thị bị rối loạn nhận thức và rối loạn chú ý cũng như những người bị khiếm khuyết về khả năng đọc, vì nội dung danh sách thường được tạo kiểu để có nhiều khoảng trắng hơn và nội dung ngắn gọn.

Không nên
<div>
  <p>How do I start a stamp collection?</p>
  <p>Equipment you will need</p>
    <div>
      <p>Small tongs with rounded tips</p>
      <p>Stamp hinges</p>
      <p>Stockbook or albumn</p>
      <p>Magnifying glass</p>
      <p>Stamps</p>
    </div>
</div>
Nên
<div>
  <h1>How do I start a stamp collection?</h1>
  <h2>Equipment you will need</h2>
  <ol>
    <li>Small tongs with rounded tips</li>
    <li>Stamp hinges</li>
    <li>Stockbook or albumn</li>
    <li>Magnifying glass</li>
    <li>Stamps</li>
  </ol>
</div>

Bảng

Trong HTML, bảng thường được dùng để sắp xếp dữ liệu hoặc bố cục trang.

Tuỳ thuộc vào mục đích của bảng, bạn sẽ sử dụng các phần tử cấu trúc ngữ nghĩa khác nhau. Cấu trúc của bảng có thể rất phức tạp, nhưng khi bạn tuân thủ các quy tắc ngữ nghĩa cơ bản, bạn có thể truy cập vào các bảng đó mà không cần can thiệp nhiều.

Bố cục

Trong những ngày đầu của Internet, bảng bố cục là phần tử HTML chính dùng để tạo cấu trúc hình ảnh. Hôm nay, chúng ta sẽ sử dụng kết hợp các phần tử ngữ nghĩa và không ngữ nghĩa như <div> và điểm đánh dấu để tạo bố cục.

Mặc dù thời điểm tạo bảng bố cục đã qua, nhưng đôi khi bảng bố cục vẫn được sử dụng, chẳng hạn như trong email, bản tin và quảng cáo có hình ảnh phong phú. Trong những trường hợp này, các bảng chỉ dùng cho bố cục không được sử dụng các phần tử cấu trúc truyền tải mối quan hệ và thêm ngữ cảnh, chẳng hạn như <th> hoặc <caption>.

Bạn cũng phải ẩn các bảng bố cục khỏi người dùng AT bằng vai trò trình bày ARIA hoặc trạng thái aria-hidden.

Không nên
<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>[Stamp Image 1]</th>
    <th>[Stamp Image 2]</th>
    <th>[Stamp Image 3]</th>
  </tr>
</table>
Nên
<table role="presentation">
  <tr>
    <td>[Stamp Image 1]</td>
    <td>[Stamp Image 2]</td>
    <td>[Stamp Image 3]</td>
  </tr>
</table>

Dữ liệu

Không giống như bảng bố cục (mà người dùng AT không nhìn thấy), bảng dữ liệu và tất cả các phần tử của bảng phải hiển thị. Cấu trúc của bảng dữ liệu rất quan trọng để truyền tải thông tin đơn giản và phức tạp đến người dùng.

Khi một bảng được tạo đúng cấu trúc, các mối quan hệ sẽ hình thành giữa tiêu đề cột và hàng cũng như dữ liệu trong bảng. Khi được cấu trúc không chính xác, người dùng sẽ phải giải mã ý nghĩa và ngữ cảnh của thông tin trong bảng.

Tuỳ thuộc vào độ phức tạp của bảng, việc tạo mối quan hệ thông qua mã được thực hiện theo nhiều cách. Bước đầu tiên để tạo bảng hỗ trợ tiếp cận là đánh dấu các ô tiêu đề bằng phần tử <th> và các ô dữ liệu bằng phần tử <td>.

Đối với các bảng phức tạp hơn, bạn có thể cần sử dụng thêm các phần tử bảng HTML khác như <rowgroup>, <colgroup>, <caption>scope để truyền tải ý nghĩa và mối quan hệ.

Không nên
<table>
  <tr>
    <td>Animal</td>
    <td>Year</td>
    <td>Condition</td>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>
Nên
<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>Animal</th>
    <th>Year</th>
    <th>Condition</th>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>