Một trong những khía cạnh quan trọng nhất của khả năng 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ác thành phần cấu trúc thay vì chỉ dựa vào kiểu, bạn nên cung cấp bối 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 thành phần cấu trúc đóng vai trò là đường viền của nội dung trên màn hình, đồng thời cũng đóng vai trò là các điểm neo giúp bạn di chuyển trong nội dung dễ dàng hơn.
Khi bạn sử dụng các phần tử HTML ngữ nghĩa, ý nghĩa vốn có của mỗi phần tử sẽ được chuyển sang cây hỗ trợ tiếp cận và được AT sử dụng, mang lại ý nghĩa cho nội dung nhiều hơn so với các phần tử không phải ngữ nghĩa. Có thể có trường hợp bạn cần thêm các thuộc tính ARIA bổ sung để xây dựng mối quan hệ hoặc nâng cao trải nghiệm tổng thể cho người dùng, nhưng trong hầu hết 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 quan trọng đối với khả năng tiếp cận kỹ thuật số, nhưng chắc chắn sẽ có thêm các yếu tố và yếu tố môi trường khác cần xem xét khi xây dựng cấu trúc cho trang web hoặc ứng dụng của bạn. Những ví dụ này chỉ giới thiệu về chủ đề chứ không phải tất cả.
Địa danh
Người dùng AT dựa vào các phần tử cấu trúc để cung cấp thông tin về bố cục tổng thể của trang. Khi phân tách các vùng nội dung lớn, bạn có thể sử dụng vai trò mốc ARIA hoặc phần tử mốc HTML mới hơn để thêm ngữ cảnh cấu trúc cho trang của mình.
Các địa danh đảm bảo nội dung nằm trong khu vực có thể điều hướng. Bạn nên cung cấp ít nhất một mốc trên mỗi trang.
Bạn nên kết hợp các mốc ARIA và HTML cùng nhau để có mức độ phù hợp cao hơn AT. Mặc dù kiểu dư thừa này sẽ không gây ra vấn đề cho người dùng, nhưng hãy kiểm thử 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ử đánh dấu HTML mới hơn vì khả 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 dưới dạng được liên kết với vai trò mốc ARIA tương ứng của các phần tử đó.
| Phần tử mốc HTML | Vai trò mốc ARIA |
|---|---|
<header> |
biểu ngữ |
<aside> |
bổ sung |
<footer> |
nội dung thông tin |
<nav>
|
navigation |
<main> |
chính |
<form> 1 |
biểu mẫu |
<section> 1 |
khu vực |
Bây giờ, hãy so sánh các ví dụ về cấu trúc nội dung dễ tiếp cậ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>
<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 phác thảo ngắn gọn về tổng thể nội dung trang.
Chúng ta có thể sử dụng 6 cấp độ tiêu đề. Tiêu đề cấp 1 <h1> được dùng cho thông tin cao nhất và quan trọng nhất của trang, chuyển dần lên tiêu đề cấp 6 <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 bỏ qua các cấp tiêu đề, chẳng hạn như bắt đầu một phần có <h1> và ngay sau phần đó bằng <h5>. Thay vào đó, bạn nên tiến hành chuyển đến <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 để di chuyển qua nội dung.
Để giúp bạn tuân thủ thứ tự và cấu trúc ngữ nghĩa thích hợp cho các tiêu đề, hãy cân nhắc việc phân tách các kiểu CSS khỏi các cấp tiêu đề. Nhờ đó, bạn có thể linh hoạt hơn trong việc tạo kiểu tiêu đề trong khi vẫn duy trì thứ tự cấp tiêu đề. Điều quan trọng là bạn không nên chỉ sử dụng kiểu để tạo tiêu đề, vì AT sẽ không xem các kiểu này dưới dạng tiêu đề.
Khi chúng tôi giả mạo tiêu đề, cấu trúc phù hợp sẽ không được truyền tải đến người dùng AT.
Tiêu đề cũng hữu ích đối với những người mắc chứng rối loạn nhận thức và giảm chú ý. Bạn phải tạo nội dung tiêu đề có ý nghĩa để giúp họ hiểu nội dung quan trọng nhất trên trang.
<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>
<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 theo ngữ nghĩa tương tự với các mục khác, mang lại cho chúng ý nghĩa vốn có, giống như danh sách cửa hàng tạp hoá hoặc danh sách việc cần làm không giới hạn mà bạn tiếp tục bỏ qua.
Có ba loại danh sách HTML:
Phần tử mục trong danh sách <li> được dùng để biểu thị một mục trong danh sách theo thứ tự hoặc không theo thứ tự, còn từ mô tả <dt> và phần tử định nghĩa <dd> thì có trong danh sách nội dung mô tả.
Khi được lập trình chính xác, các phần tử này có thể thông báo cho người dùng AT không thị giác về cấu trúc hiển thị của danh sách. Khi gặp một danh sách ngữ nghĩa, AT có thể cho người dùng biết tên danh sách và số lượng mục 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 đó nằm trong danh sách nào – mục 1/5, mục 2/5, v.v.
Việc nhóm các mục vào danh sách cũng giúp ích cho những người sáng mắt bị rối loạn nhận thức và tập trung cũng như những người bị khuyết tật khả năng đọc, vì nội dung trong danh sách thường được tạo kiểu để có nhiều khoảng trắng hơn và nội dung tập trung vào vấ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>
<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. Bảng có thể có cấu trúc rất phức tạp, nhưng khi bạn tuân theo các quy tắc ngữ nghĩa cơ bản, bạn có thể dễ dàng truy cập chúng mà không cần can thiệp nhiều.
Bố cục
Trong thời kỳ đầu của Internet, bảng bố cục là phần tử HTML chính dùng để xây dựng cấu trúc hình ảnh. Hiện nay, chúng ta sử dụng kết hợp các phần tử ngữ nghĩa và phi ngữ nghĩa như <div> và các mốc để tạo bố cục.
Mặc dù thời gian tạo bảng bố cục hầu như đã 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, 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ảng bố cục cũng phải ẩn đối với người dùng AT có vai trò trình bày hoặc trạng thái ẩn aria của ARIA.
<table>
<caption>My stamp collection</caption>
<tr>
<th>[Stamp Image 1]</th>
<th>[Stamp Image 2]</th>
<th>[Stamp Image 3]</th>
</tr>
</table>
<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 (cần ẩn đối với người dùng AT), bảng dữ liệu và tất cả phần tử của bảng đó phải được hiển thị. Cấu trúc của bảng dữ liệu đóng vai trò quan trọng trong việc truyền tải thông tin đơn giản và phức tạp cho người dùng.
Khi một bảng được cấu trúc chính xác, mối quan hệ giữa các tiêu đề cột và hàng sẽ hình thành giữa các 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 vẫn có thể 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 hình thành các mối quan hệ thông qua mã được hoàn thành theo nhiều cách. Bước đầu tiên để truy cập được vào bảng là đánh dấu các ô tiêu đề bằng <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 các phần tử bảng HTML bổ sung, chẳng hạn như <rowgroup>, <colgroup>, <caption> và scope để truyền tải ý nghĩa và mối quan hệ.
<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>
<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>