Advertisement
  1. Web Design
  2. Accessibility

Tầm quan trọng của phân cấp đề mục đối với Công nghệ Hỗ trợ

by
Read Time:8 minsLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Đặc tả HTML mô tả sáu đề mục: h1, h2, h3, h4, h5h6. Số thứ tự trong mỗi đề mục này phản ánh mức độ ưu tiên của nó, với h1 là cao nhất và h6 là thấp nhất.

Đây là một điều quan trọng cần biết! Khảo sát Trình đọc Màn hình WebAIM vào 2017 cho chúng ta biết rằng điều hướng thông qua các đề mục là cách quan trọng nhất mà những người phụ thuộc vào công nghệ hỗ trợ xác định vị trí thông tin. Vì lý do này, tạo ra các tiêu đề trang web của bạn đúng cách là điều rất quan trọng.

A11y Sơ Khởi

Hướng dẫn này là một phần của Khả năng truy cập Web: Hướng dẫn hoàn chỉnh, nơi chúng tôi đã thu thập một loạt các hướng dẫn, bài viết, khóa học và sách điện tử, để giúp bạn hiểu khả năng truy cập web ngay từ sơ khởi.

Nhận thức

Trước khi chúng ta tìm hiểu cách thức hoạt động của công nghệ hỗ trợ, có một lý do khiến thiết bị in của chúng ta sử dụng những thứ như chương, phần và phần phụ, và chia cảnh. Chia nội dung thành nhiều phần giúp dễ hiểu, dễ tiếp thu, ghi nhớ và liên tưởng hơn.

Two pages from the Guardian newspaper demonstrating different chunks of contentTwo pages from the Guardian newspaper demonstrating different chunks of contentTwo pages from the Guardian newspaper demonstrating different chunks of content
Những mảng nội dung, từ báo The Guardian

Mặc dù web không phải là bản in, nhưng nó mượn tất cả những thứ hay ho từ đó, các phần tử đề mục HTML tương tự như các quy ước in này. Nó là một trong những điều mà mọi người đều cho là điều hiển nhiên, nhưng lại giúp được rất nhiều người. Vấn đề nhận thức là phổ biến và lớn hơn mọi dạng khuyết tật khác. Việc phân nhóm nội dung thành các phần hợp lý giúp mọi người, từ những người mắc bệnh sinh lý như mất trí nhớ đến những người bị suy giảm nhận thức như thiếu ngủ hoặc học một kỹ năng hoàn toàn mới.

Điều hướng thông qua đề mục

Một số loại công nghệ hỗ trợ (bao gồm, nhưng không giới hạn, trình đọc màn hình) cho phép mọi người nhảy từ đề mục này sang đề mục khác trên một trang. Nó tương tự với những gì mà người không sử dụng công nghệ hỗ trợ làm hàng ngày, lướt qua một trang để tìm ý chính chung về nó, dừng lại khi họ tìm thấy thông tin họ đang tìm kiếm.

Tạo danh sách các đề mục

Một số công nghệ hỗ trợ có thể lấy các tiêu đề này và chuyển chúng thành một danh sách theo thứ tự. Danh sách này có thể được sử dụng để nhanh chóng xác định ý nghĩa tổng quát của trang.

An ordered list of headings generated by the JAWS screen reading software taken from a Wikipedia page titled List of French Deserts There are eight headings The order is as follows with their heading level listed after the headings title Wikipedia 1 List of French desserts 2 Contents 2 French Deserts 2 French pastries 2 See also 2 References 2 External links 2 Options to jump to the selected heading as well as sort and filter the headings are also present ScreenshotAn ordered list of headings generated by the JAWS screen reading software taken from a Wikipedia page titled List of French Deserts There are eight headings The order is as follows with their heading level listed after the headings title Wikipedia 1 List of French desserts 2 Contents 2 French Deserts 2 French pastries 2 See also 2 References 2 External links 2 Options to jump to the selected heading as well as sort and filter the headings are also present ScreenshotAn ordered list of headings generated by the JAWS screen reading software taken from a Wikipedia page titled List of French Deserts There are eight headings The order is as follows with their heading level listed after the headings title Wikipedia 1 List of French desserts 2 Contents 2 French Deserts 2 French pastries 2 See also 2 References 2 External links 2 Options to jump to the selected heading as well as sort and filter the headings are also present Screenshot
Tạo danh sách các tiêu đề trên trang Wikipedia

Nếu bạn không duy trì một chuỗi logic, ví dụ từ cấp một đến cấp ba mà không khai báo cấp đề mục thứ hai ở giữa, nó có thể tạo ra một sự bối rối, chắc chắn gây khó chịu cho người dựa vào đề mục để điều hướng. Sự thiếu hụt trong chuỗi logic này sẽ đặt gánh nặng lên người dùng, buộc họ phải sử dụng các phương pháp khác, tốn nhiều thời gian và công sức hơn để điều hướng nhằm xác định logic cho cấu trúc tổng thể của trang (nếu có) và nội dung thật sự họ cần có ở trên trang hay không

Đề mục cấp một

Một điều quan trọng khác mà chúng ta có thể làm là đảm bảo rằng chỉ có một đề mục cấp một trên mỗi trang. Đề mục này sẽ mô tả điểm chính trong nội dung của trang. Ví dụ: một trang về lịch sử của bánh ngọt Pháp có thể có một đề mục cấp một được viết như thế này:

Thuật toán Phác hoạ Tài liệu (không tồn tại)

Thật không may, có một quan niệm sai lầm rằng bạn có thể sử dụng các đề mục cấp một cho phần đầu của mọi phần tử nội dung trên một trang, tin tưởng vào trình duyệt để tìm ra phần còn lại thông qua Thuật toán phác thảo tài liệu. Thuật toán này là hoang tưởng tại thời điểm bài viết này xuất bản, nó vẫn chưa được thực hiện bởi bất kỳ trình duyệt nào. Vì điều này, chúng ta phải tôn trọng Ưu tiên Cử tri và sử dụng các yếu tố đề mục khác.

Các đề mục khác

Các tiêu đề từ cấp hai đến cấp sáu phải theo sau tiêu đề cấp một và được viết theo thứ tự tuần tự mô tả các điểm chính của nội dung trên trang.

Ví dụ, đây là cấu trúc đề mục cho bài viết này:

  1. Tầm quan trọng của cấp độ đề mục đối với công nghệ hỗ trợ
    1. Nhận thức
    2. Điều hướng qua đề mục
      1. Tạo danh sách các đề mục
      2. Đề mục cấp một
        1. Thuật toán phác thảo tài liệu (không tồn tại)
      3. Các đề mục khác
      4. Mô tả quá mức
      5. Các dịch vụ khác
    3. Tạo kiểu
      1. Ngữ nghĩa
      2. Thực tiễn
        1. Tiện ích
        2. Reset
      3. Đặt tên
    4. Tóm tắt: Hãy dành một chút thời gian

Bằng cách đọc qua danh sách này, bạn có thể nhanh chóng xác định những gì bài viết này nói đến. Khá gọn phải không?

Một điều đáng chú ý nữa là các đề mục, rất giống định dạng phân cấp như JSON, có thể được lồng vào bên trong các đề mục khác, miễn là chúng được lồng một cách hợp lý. Bên trong đề mục cấp hai, bạn có thể sử dụng nhiều tiêu đề cấp ba. Lần lượt, mỗi phân nhóm này có thể có các phân nhóm cấp bốn lồng nhau.

Khi bạn kết thúc với một chủ đề, bạn có thể đóng các đề mục lồng nhau của bạn. Đây là nơi mà ở đó, việc bỏ qua các cấp độ đề mục có thể chấp nhận được - bạn đã hoàn tất việc tìm hiểu khái niệm cơ bản và trở lại chủ đề chung hơn.

  1. h1 Lịch sử của bánh ngọt Pháp
    1. h2 Những khoảnh khắc quan trọng
      1. h3 Thế kỷ 16
        1. h4 Bánh ngọt Puff
        2. h4 Oublies
      2. h3 Thế kỷ 17
        1. h4 Bánh ngọt Foliated
        2. h4 Kem
          1. h5 Đầu bếp của hoàng tử Condé
      3. h3 Thế kỷ 18
        1. h4 Macarons
      4. h3 Thế kỷ 19
      5. h3 Thế kỷ 20
    2. h2 Những người quan trọng
      1. h3

Ví dụ này cho thấy một tiêu đề cấp năm hợp lý như thế nào (Đầu bếp của Hoàng tử Condé) theo sau là một tiêu đề cấp ba (Thế kỷ 18), miễn là các tiêu đề phụ theo thứ tự. Nếu một tiêu đề cấp ba đi trước tiêu đề cấp thứ năm, nó sẽ không hợp lệ.

Mô tả quá mức

Sử dụng quá nhiều đề mục có thể tạo ra trải nghiệm quá tải cho một người dựa vào trình đọc màn hình để điều hướng. Ban đầu, điều này có vẻ hơi vô lý, vì tôi chỉ nói với bạn rằng các tiêu đề quan trọng như là một sự trợ giúp điều hướng.

Hãy nghĩ về nó theo cách này: nhiều như là có quá nhiều tùy chọn điều hướng trực quan trên một trang có thể ảnh hưởng tiêu cực đến sự tập trung và chú ý của một người, quá nhiều đề mục tạo ra "sự nhiễu loạn" dẫn đến mất tập trung vào chủ đề chính mà bạn muốn truyển tải.

Không có quy tắc cho việc có bao nhiêu đề mục là quá nhiều. Nó phụ thuộc hoàn toàn vào nội dung là gì và bao nhiêu trong số đó được trình bày. Ví dụ, một thực đơn có thể chỉ cần tên của món ăn, thành phần và hướng dẫn của nó, trong khi một bài nghiên cứu có thể yêu cầu nhiều sắc thái hơn.

Các dịch vụ khác

Một cấu trúc đề mục tốt mang lại lợi ích không chỉ cho những người sử dụng công nghệ hỗ trợ. Vì bản thân các đề mục có ngữ nghĩa, các dịch vụ khác có thể lập trình nối vào phần mô tả nội dung này và tái hiện lại nó theo nhiều cách thân thiện với người dùng. Ví dụ: đây là những gì công cụ tìm kiếm Bing thực hiện với các trang được cấu trúc tốt:

A search result in Bing for the JAWS screen reader The result lists the title of the page its URL and a brief description Navigation options are also included in the result which correspond to the headings from the Wikipedia page it links to The options are Overview Contents History Features ScreenshotA search result in Bing for the JAWS screen reader The result lists the title of the page its URL and a brief description Navigation options are also included in the result which correspond to the headings from the Wikipedia page it links to The options are Overview Contents History Features ScreenshotA search result in Bing for the JAWS screen reader The result lists the title of the page its URL and a brief description Navigation options are also included in the result which correspond to the headings from the Wikipedia page it links to The options are Overview Contents History Features Screenshot
Kết quả công cụ tìm kiếm Bing

Rất giống với trình đọc màn hình, các dịch vụ như Google DocsDropbox Paper sẽ tự động tạo danh sách các đề mục được sắp xếp để cho phép bạn nhanh chóng hiểu và điều hướng một tài liệu. Nhiều bộ xử lý văn bản cũng có thể nhanh chóng tạo ra một bảng nội dung được cập nhật tự động từ các tiêu đề, một công việc tẻ nhạt và tốn thời gian khác. Và nhờ khả năng tương tác của HTML, chúng ta thậm chí có thể tạo lại hành vi điều hướng theo đề mục này dưới dạng tiện ích mở rộng của trình duyệt!

Tạo kiểu

Một điều mà tất cả chúng ta dường như rất thường quên là các lớp CSS có thể được áp dụng cho các phần tử đề mục, giống như bất kỳ phần tử HTML nào khác được khai báo bên trong phần body.

Ngữ nghĩa

Lý do mà tôi đề cập đến điều này là vì các đề mục thường được sử dụng bởi vì vẻ ngoài của chúng ("Ooh! tôi thích màu sắc và phông chữ của h3, tôi sẽ sử dụng nó"), và không phải là ưu tiên của nội dung mà nó mô tả (Brioche là một dạng Vienna). Nó là một vấn đề phổ biến.

Trong một thế giới lý tưởng hóa sự thuần khiết trong học thuật, chúng ta tôn vinh sự trung thực về vật chất của các phần tử đề mục bằng cách xác định kích thước và tạo kiểu cho chúng theo thứ bậc mà chúng mô tả.

Tuy nhiên, đây là thế giới thực. Các trang web và ứng dụng web hiện đại là những thứ phức tạp được thực hiện bởi nhiều người khác nhau, những người có trình độ, kinh nghiệm, sở thích, sự quen thuộc và khả năng khác nhau khi thiết kế và viết code.

Thực tiễn

Thế giới thực có thể yêu cầu một tiêu đề cấp thứ năm cần phải nhìn giống như một tiêu đề cấp hai, hoặc một cái gì đó hoàn toàn mới. Trong những tình huống này, tốt hơn hết là bảo toàn cấu trúc logic bên dưới của trang và thay vào đó thay đổi hình ảnh trực quan:

Nó là một sự đánh đổi và một sự thừa nhận rằng thế giới thực rất phức tạp. Cách tiếp cận này góp phần việc bảo tồn phần quan trọng: điều hướng trực quan và hiệu quả cho công nghệ hỗ trợ.

Tiện ích cho Style

Các phương pháp như tiện ích style cho phép cách tiếp cận linh hoạt hơn nữa để điều chỉnh hình ảnh đề mục:

Trong ví dụ này, tôi đã khai báo một loạt các điều chỉnh nhỏ để điều chỉnh cách trình bày đề mục cho đến khi tôi có được cái nhìn trực quan như mong muốn. Nhìn chung, bạn sẽ gặp các Tiện ích Style trên các trang web và ứng dụng web lớn hơn do nhà nước điều khiển, trong đó các lớp có đặc tính thấp giúp đảm bảo tính nhất quán.

Reset

Để giúp củng cố việc sử dụng các đề mục được sắp xếp và lồng nhau một cách hợp lý, thậm chí có thể đáng sử dụng một reset kiểu cho đề mục để giữ cho tất cả các tiêu đề mà không có một lớp được khai báo trên chúng trông giống nhau.

Đây là một thiết kế dự phòng nhỏ giúp khuyến khích suy nghĩ về cách cấu trúc tài liệu được hình thành so với hình dạng của chúng. Nó dự định sẽ được khai báo sau CSS reset, vì vậy nó có thể ghi đè lên các style reset.

Đặt tên

Vấn đề khó thứ hai trong khoa học máy tính là đặt tên cho mọi thứ. Đầu tiên là bạn không biết điều gì đó. Tôi không cho là bạn biết cách tốt nhất để đặt tên cho các lớp tạo kiểu cho trang web hoặc ứng dụng web của bạn. Tuy nhiên, nếu bạn không sử dụng các tiện ích kiểu, tôi khuyên bạn không nên đặt tên cho chúng .h1, .h2, .h3, v.v.

Vấn đề với cách tiếp cận này là những người không rành về code có thể hiểu các tên lớp này là các hướng dẫn cần phải khớp tên lớp với cấp độ đề mục. Điều này sẽ củng cố việc "nó trông giống như thế nào" hơn là "những gì nó mô tả".

Tôi cũng đã gặp phải tình huống rằng có thể chấp nhận việc sử dụng HTML ngoài các đề mục cho các tiêu đề của tác giả (À, tôi có thể làm cho div này trông giống như một h5!). Không ổn!

Tóm tắt: Ôn lại một chút

Khảo sát Trình đọc màn hình WebAIM năm 2017 cũng cho chúng ta biết rằng các tiêu đề bị thiếu hoặc không đúng là một trong mười vấn đề khó giải quyết nhất của những người dựa vào công nghệ hỗ trợ để điều hướng trang web.

Đây là một vấn đề lớn về khả năng tiếp cận với một khắc phục đơn giản. Hãy dành một chút thời gian để xem lại trang web hoặc ứng dụng web của bạn để xem liệu cấu trúc đề mục của bạn mô tả trang chính xác hay không và mô tả này tuân theo thứ tự logic hay không, nó có thể dễ dàng như việc thay đổi một số con số!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.