Giữ cấu trúc tiêu đề đúng khi thiết kế lại giao diện

Cấp tiêu đề mô tả vị trí của một phần trong tài liệu, không mô tả chữ cần lớn đến đâu. Khi tách hai quyết định này, bạn có thể đổi kiểu chữ mà không biến cấu trúc bài viết thành một chuỗi cỡ chữ được chọn tình cờ.

Với người xây trang bài viết, một phép thử hữu ích là chỉ đọc các tiêu đề. Chúng cần giải thích cách tổ chức trang đủ rõ để người đọc tìm được phần cần xem. Người dùng trình đọc màn hình điều hướng theo tiêu đề phụ thuộc trực tiếp vào cấu trúc đó; người nhìn lướt trang cũng được hỗ trợ bởi cùng cách phân nhóm.

Lập cấu trúc bài trước khi trang trí

Giả sử bài viết giải thích cách trình duyệt tải một hình ảnh. Tên bài là tiêu đề chính. Các giai đoạn lớn dùng tiêu đề cấp hai; những chi tiết về chọn tài nguyên nằm ở cấp ba bên trong giai đoạn tương ứng.

<main>
  <article aria-labelledby="article-title">
    <h1 id="article-title">Trình duyệt chọn hình ảnh thế nào</h1>
    <p>Giới thiệu ví dụ tải hình ảnh.</p>
    <h2>Phát hiện hình ảnh</h2>
    <p>Bộ phân tích gặp phần tử hình ảnh.</p>
    <h2>Chọn tài nguyên</h2>
    <h3>Ước tính chiều rộng hiển thị</h3>
    <p>Thuộc tính sizes mô tả vùng hiển thị dự kiến.</p>
    <h3>So sánh mật độ ứng viên</h3>
    <p>Trình duyệt đánh giá các tài nguyên có sẵn.</p>
    <h2>Giải mã và hiển thị</h2>
    <p>Tài nguyên được chọn xuất hiện trên trang.</p>
  </article>
</main>

Tiêu đề cấp ba thứ hai có cùng phần cha với tiêu đề cấp ba đầu tiên. Quay lại cấp hai kết thúc nhóm phần nhỏ đó. Đây là thay đổi phạm vi có nghĩa, nên đi từ cấp sâu về cấp nông hơn là cấu trúc tài liệu bình thường.

Ngược lại, đi thẳng từ cấp hai xuống cấp bốn gợi ý rằng một phần trung gian đã bị thiếu. Hướng dẫn tiêu đề của WAI khuyên tránh bỏ qua cấp khi có thể. Mục đích là giúp người đọc hiểu thứ bậc, không phải ép mọi vùng độc lập trên trang thành một dãy số liên tiếp.

Đừng dựa vào giả định rằng cấu trúc tài liệu tự đặt lại cấp tiêu đề mỗi khi xuất hiện article hoặc section. Hãy khai báo cấp rõ ràng và phù hợp với tài liệu đã kết xuất. Một section lồng nhau chứa thêm h1 không tự bảo đảm người dùng sẽ nhận được tiêu đề cấp ba như vị trí thị giác có vẻ gợi ý.

CSS quyết định kích thước hiển thị

Giao diện có thể cần tiêu đề chính nhỏ gọn và nhãn phần lớn để trang trí. Hãy dùng class để diễn đạt quyết định về chữ. Đổi tiêu đề từ h1 thành h4 chỉ vì kiểu mặc định của h1 quá lớn là trộn hình thức với cấu trúc.

.article-title {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.1;
}

.section-heading {
  font-size: 1.5rem;
  margin-block-start: 2.5rem;
}

Các class này có thể gắn vào phần tử tiêu đề thích hợp với tài liệu. Thành phần thẻ dùng lại ở nhiều nơi có thể nhận cấp tiêu đề từ thành phần cha, thay vì mặc định thẻ nào cũng phải chứa h2. Sự linh hoạt đó cần giá trị mặc định hợp lý và một tập lựa chọn nhỏ; cho phép tên thẻ tùy ý sẽ khiến thành phần khó rà soát hơn.

Sai lầm ngược lại là biến mọi chữ trông như tiêu đề thành đoạn văn được trang trí. Người nhìn trang có thể hiểu nhóm nội dung, nhưng lệnh điều hướng theo tiêu đề không tìm thấy gì. Phần tử tiêu đề gốc diễn đạt quan hệ mà không cần thêm vai trò heading và cấp ARIA.

Mở ảnh kích thước đầy đủ ↗

Độ thụt vào trong sơ đồ mô tả quan hệ cha con. Nó không có nghĩa là tiêu đề cấp ba phải thụt lề trên trang thật. Kiểu chữ và khoảng cách có thể thể hiện phân nhóm mà không cần trình bày giống cây thư mục.

Giữ các vùng xung quanh nhất quán

Đầu trang, điều hướng, bài chính và vùng bên là những phần liên quan của trang, không phải một bài luận liên tục. Tiêu đề của chúng cần hợp lý khi xuất hiện cùng nhau, nhưng thành phần vùng bên không nên đổi cấp mỗi lần bài chính có thêm một phần nhỏ.

WAI giải thích ngoại lệ này cho các phần cố định của trang. Sự nhất quán giữa các trang có thể hữu ích hơn việc đổi cấp để chạy theo tiêu đề cuối cùng trong bài. “Bài viết liên quan” ở vùng aside vẫn là tính năng ngang hàng của trang, dù nội dung chính vừa kết thúc ở một phần phân tích lồng sâu.

Landmark giúp phân biệt các vùng đó. Phần tử main xác định nội dung chính; vùng điều hướng và vùng bổ sung có thể cần tên rõ ràng khi trang chứa nhiều vùng cùng loại. Không cần bọc từng nhóm đoạn văn nhỏ trong landmark. Quá nhiều vùng làm điều hướng ồn tương tự như quá nhiều tiêu đề.

Mỗi tiêu đề cần giới thiệu một phần có ích

Tiêu đề nên cho biết nội dung phía sau. Những tên như “Tổng quan” hoặc “Thông tin thêm” có thể phù hợp trong ngữ cảnh, nhưng sáu nhãn mơ hồ trên cùng trang không giúp người đọc nhiều. “Chọn một ứng viên hình ảnh” dự báo câu trả lời cụ thể hơn.

Tránh đặt tiêu đề trên một câu duy nhất chỉ lặp lại nó. Hãy phát triển phần đó hoặc ghép câu vào đoạn xung quanh. Tiêu đề là điểm điều hướng; mỗi điểm đều cần thời gian khi người dùng đi lần lượt qua cấu trúc.

Câu trích dẫn để trang trí không tự trở thành tiêu đề. Tên của mọi chỉ số trên dashboard cũng vậy. Hãy hỏi liệu chữ đó mở đầu một phần nội dung hay chỉ gắn nhãn cho một giá trị. Câu hỏi này thường giúp chọn phần tử chính xác hơn việc nhìn độ đậm của chữ.

Kiểm tra tài liệu đã được ghép hoàn chỉnh

Xem danh sách tiêu đề sau khi ghép layout, không chỉ trong từng thành phần. Layout có thể cung cấp tên bài cho nội dung Markdown, trong khi tệp Markdown lại bắt đầu bằng chính h1 đó. Lỗi lặp tiêu đề dễ bị bỏ qua nếu hai tệp được rà soát riêng.

Dùng công cụ kiểm tra khả năng tiếp cận của trình duyệt hoặc công cụ điều hướng tiêu đề để liệt kê cấp và tên. Đọc theo thứ tự, rồi dùng bàn phím đi theo liên kết mục lục và kiểm tra đích có còn nhìn thấy dưới thanh đầu trang cố định hay không. Cấu trúc tiêu đề và hành vi cuộn là hai phép kiểm tra khác nhau; cả hai đều ảnh hưởng khả năng tìm nội dung.

Khi thiết kế lại, giữ một tài liệu mẫu ngắn có cấu trúc dự kiến bên cạnh các ví dụ thành phần. Nếu chỉ đổi thang cỡ chữ mà cấu trúc ấy thay đổi, một quyết định trình bày đã vô tình làm đổi ý nghĩa tài liệu.

Phát hiện tiêu đề được chèn hai lần

Xét layout bài viết lấy tên từ metadata và tạo tiêu đề chính. Nội dung Markdown lại bắt đầu bằng cùng tên đó ở cấp một. Từng tệp trông có vẻ hợp lý khi xem riêng. Sau khi ghép, người điều hướng theo tiêu đề gặp tên bài hai lần trước khi đến phần nội dung đầu tiên.

Mở ảnh kích thước đầy đủ ↗

Trong cấu trúc này, giao cho layout tạo tên bài và bắt đầu các phần lớn trong Markdown ở cấp hai. Đây là quy ước của template cụ thể, không phải khẳng định rằng đếm số h1 là đủ kết luận về khả năng tiếp cận. Hướng dẫn tiêu đề của HTML liên hệ cấp tiêu đề với phần nội dung mà chúng mở đầu. Trong ví dụ, tên bị lặp tình cờ không giới thiệu một phần mới nào.

Câu hỏi về nơi quyết định cấp tiêu đề cũng xuất hiện ở thành phần tái sử dụng. Thẻ nằm dưới “Bài viết liên quan” cần phù hợp với cấu trúc của phần đó. Nếu thành phần xuất hiện trong nhiều ngữ cảnh, hãy ghi rõ ai chọn cấp của nó. Giới hạn lựa chọn để thành phần cha không vô tình yêu cầu một thẻ không phải tiêu đề. Rà soát khi các thành phần xung quanh đã có mặt, bởi thành phần riêng lẻ không thể suy ra cấu trúc tài liệu từ cỡ chữ hoặc độ sâu lồng thẻ.

Làm cho cấu trúc quan sát được

Với tài liệu mẫu tải hình ảnh ban đầu, chạy script sau trong console của trình duyệt. Nó thu thập tiêu đề HTML gốc theo thứ tự tài liệu rồi báo cấp và tên. Phạm vi là toàn bộ tài liệu, nên tiêu đề do layout bên ngoài tự thêm cũng xuất hiện trong kết quả.

const headings = [...document.querySelectorAll('h1,h2,h3,h4,h5,h6')];
const outline = headings.map((heading) => ({
  level: Number(heading.tagName.slice(1)),
  text: heading.textContent.trim(),
}));
console.table(outline);
console.assert(
  outline.map((heading) => heading.level).join(',') === '1,2,2,3,3,2'
);

Dãy dự kiến thuộc riêng tài liệu mẫu phía trên. Trang đầy đủ có các vùng khác được tổ chức đúng vẫn có thể dùng dãy hợp lệ khác. Không nên chép khẳng định này vào mọi bài kiểm tra rồi ép cả website khớp với nó. Hãy ghi cấu trúc dự kiến của trang đang xây, gồm các vùng cố định liên quan, rồi so sánh với kết quả thật.

Script có giới hạn. Nó không tính tên truy cập, không nhận biết tiêu đề bị CSS ẩn, không đọc cây shadow, không áp dụng độ lệch cấp tiêu đề và không lấy phần tử dùng vai trò heading của ARIA. Với các trường hợp đó, cần công cụ kiểm tra khả năng tiếp cận của trình duyệt và công nghệ hỗ trợ phù hợp với người đọc. Danh sách DOM giúp phát hiện nhanh thay đổi do ghép thành phần, nhưng chưa phải đánh giá khả năng tiếp cận toàn diện.

Để thử sự tách biệt với hình thức, giảm cỡ chữ của các tiêu đề cấp hai trong tài liệu mẫu rồi chạy lại script. Dãy cấp phải giữ nguyên. Tiếp theo, cố ý đổi một thẻ trong số đó thành tiêu đề cấp bốn và quan sát kết quả khác. Thay đổi đầu chỉ tác động cách hiển thị; thay đổi sau tác động thông tin được biểu diễn bằng cấu trúc tiêu đề gốc. Giữ được sự phân biệt có thể kiểm tra này giúp việc rà soát thiết kế lại rõ ràng hơn.