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ủa trang. Khi bạn tạo trang web hoặc ứng dụng bằng phần tử cấu trúc Khi chỉ dựa vào kiểu, bạn sẽ cung cấp bối cảnh quan trọng cho những người sử dụng (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ò như là đường viền cho nội dung trên màn hình, nhưng chúng cũng đóng vai trò như các điểm neo để cho phép điều hướng dễ dàng hơn trong nội dung.
Khi bạn sử dụng phần tử HTML ngữ nghĩa, ý nghĩa vốn có của mỗi phần tử được chuyển sang cây hỗ trợ tiếp cận và mà AT sử dụng, mang lại nhiều ý nghĩa cho nội dung hơn là các phần tử phi ngữ nghĩa. Trong một số trường hợp, bạn có thể cần phải thêm các thuộc tính ARIA khác để tạo bản dựng mối quan hệ tốt đẹp với bạn 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 một trong hơn 100 phần tử HTML có sẵn sẽ tự hoạt động khá tốt.
Mặc dù mô-đun này tập trung vào các yếu tố cấu trúc được sử dụng rộng rãi nhất, đối với hỗ trợ tiếp cận kỹ thuật số, chắc chắn sẽ có thêm các yếu tố và yếu tố môi trường cần xem xét khi xây dựng cấu trúc vào trang web hoặc . Những ví dụ này là phần giới thiệu về chủ đề chứ không phải là toàn bộ.
Địa danh
Người dùng AT dựa vào các yếu tố cấu trúc để cung cấp cho họ thông tin về bố cục tổng thể của trang. Khi tách riêng nhiều vùng nội dung, 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ó cấu trúc vào trang của bạn.
Địa danh giúp đả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 điểm mốc cho mỗi trang.
Một số tài nguyên đề xuất kết hợp các mốc ARIA và HTML cùng nhau để cung cấp mức độ phù hợp AT tốt hơn. Mặc dù kiểu dư thừa này không nên gây ra sự cố cho người dùng của bạn, hãy kiểm tra các mẫu bằng trình đọc màn hình nhất định. Khi nghi ngờ, tốt nhất là mặc định chỉ sử dụng HTML mới hơn như các phần tử mốc Hỗ trợ trình duyệt rất mạnh mẽ.
Hãy so sánh các phần tử mốc HTML làm được liên kết với tương ứng vai trò mốc ARIA.
| Phần tử mốc HTML | Vai trò mốc ARIA |
|---|---|
<header> |
biểu ngữ |
<aside> |
bổ sung |
<footer> |
contentinfo |
<nav>
|
navigation |
<main> |
chính |
<form> 1 |
biểu mẫu |
<section> 1 |
khu vực |
Bây giờ, hãy cùng 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 chính xác, các cấp tiêu đề HTML 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à quan trọng nhất của trang, di chuyển dần đến
tiêu đề cấp sáu <h6> để có 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. Lý tưởng nhất là bạn sẽ không bỏ qua
tiêu đề, ví dụ: bắt đầu một phần bằng <h1> và ngay lập tức
theo sau bằng <h5>. Thay vào đó, bạn nên chuyển đến <h5> trong
đơn đặt hàng. 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 để khám phá 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 riêng các kiểu CSS khỏi các cấp tiêu đề. Điều này cho phép bạn linh hoạt hơn trong các 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 được sử dụng riêng các kiểu để tạo tiêu đề, vì AT không xem được dưới dạng tiêu đề.
Khi chúng tôi giả mạo các tiêu đề, cấu trúc phù hợp sẽ không được truyền đạt cho người dùng AT.
Tiêu đề cũng hữu ích cho những người bị khiếm khuyết về nhận thức và sự chú ý rối loạn. Bạn cần phải làm cho nội dung tiêu đề có ý nghĩa để giúp họ hiểu điều gì 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 tương tự nhau về mặt ngữ nghĩa và mang lại cho chúng ý nghĩa, 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 có hồi kết tiếp tục phớt lờ.
Có ba loại danh sách HTML:
Mục danh sách <li>
phần tử dùng để đại diện cho một mặt hàng trong danh sách có thứ tự hoặc không theo thứ tự, trong khi phần tử
cụm từ mô tả
<dt> và định nghĩa
Các phần tử <dd> có thể
trong danh sách mô tả.
Khi được lập trình chính xác, các thành phần này có thể thông báo cho người dùng AT không nhìn thấy được về cấu trúc dễ thấy của danh sách. Khi gặp danh sách ngữ nghĩa, AT có thể cho người dùng biết tên danh sách cũng như số lượng mục có trong danh sách đó. Với tư cách người dùng di chuyển trong danh sách, AT sẽ đọc to từng mục trong danh sách và nói số nào sẽ nằm trong danh sách—mục một/5, mục hai/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 trong tầm nhìn có khả năng nhận thức và rối loạn chú ý và những người mắc khuyết tật đọc, vì nội dung danh sách là thường được tạo kiểu để có nhiều khoảng trắng trực quan hơn và nội dung đi thẳng 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 cấu trúc ngữ nghĩa khác nhau phần tử. Cấu trúc của bảng có thể 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, khá dễ tiếp cận 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à thành phần HTML chính
dùng để xây dựng cấu trúc hình ảnh. Ngày nay, chúng tôi sử dụng kết hợp cả ngữ nghĩa và
các phần tử phi ngữ nghĩa như <div> và các mốc để tạo bố cục.
Mặc dù số ngày tạo bảng bố cục gần như đã kết thúc, nhưng cũng có những lúc
các bảng bố cục vẫn được sử dụng, chẳng hạn như trong các email, bản tin có hình ảnh phong phú, và
quảng cáo. 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 thành phần cấu trúc để truyền tải các mối quan hệ và bổ sung ngữ cảnh, chẳng hạn như
<th> hoặc <caption>.
Bảng bố cục cũng phải được ẩn khỏi người dùng AT bằng ARIA vai trò trình bày hoặc trạng thái bị ẩn 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 (nên ẩn đối với người dùng AT), bảng dữ liệu và tất cả các phần tử của bảng đó không được tiết lộ. Cấu trúc của bảng dữ liệu rất quan trọng trong việc truyền tải thông tin đơn giản và thông tin 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 cột sẽ hình thành tiêu đề và hàng và dữ liệu trong bảng. Khi có cấu trúc không chính xác, người dùng 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 hình thành mối quan hệ thông qua mã
đạt được theo nhiều cách khác nhau. Bước đầu tiên để làm cho bảng dễ tiếp cận là
để đánh dấu ô tiêu đề
<th> và các ô dữ liệu
có phần tử <td>.
Đối với những 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
chẳng hạn như
<rowgroup>!
<colgroup>,
<caption>,
và
scope sang
truyền tải ý nghĩa và các 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>