Bạn đã bao giờ tự hỏi cách công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình, biết thông báo gì cho người dùng chưa? Câu trả lời là các công nghệ này dựa vào việc nhà phát triển đánh dấu trang bằng HTML ngữ nghĩa. Nhưng ngữ nghĩa là gì và trình đọc màn hình sử dụng ngữ nghĩa như thế nào?
Khả năng và ngữ nghĩa
Trước khi đi sâu vào ngữ nghĩa, bạn nên tìm hiểu một thuật ngữ khác: cơ hội sử dụng. Chức năng là bất kỳ đối tượng nào cung cấp hoặc cho phép người dùng thực hiện một hành động. Một ví dụ kinh điển là ấm trà:
Bình trà này không cần sách hướng dẫn; thay vào đó, thiết kế thực tế của bình trà sẽ cho người dùng biết cách vận hành. Nó có một tay cầm và vì bạn đã thấy các đối tượng khác trong thế giới có tay cầm tương tự, nên bạn có thể suy luận cách cầm và vận hành đối tượng này.
Khi xây dựng giao diện người dùng đồ hoạ, chúng ta sử dụng các công cụ như CSS để thêm các tính năng hỗ trợ hình ảnh vào giao diện người dùng. Ví dụ: bạn có thể tạo bóng đổ và đường viền cho một nút để nút đó giống với nút thực tế trong thế giới thực.
Tuy nhiên, nếu người dùng không nhìn thấy màn hình, thì các tính năng hỗ trợ thị giác này sẽ không được truyền tải đến họ. Do đó, bạn cần đảm bảo rằng giao diện người dùng được xây dựng theo cách có thể truyền tải các chức năng tương tự này đến công nghệ hỗ trợ. Việc hiển thị không trực quan các chức năng của một thành phần trên giao diện người dùng được gọi là ngữ nghĩa của thành phần đó.
Sử dụng HTML có ngữ nghĩa
Cách dễ nhất để truyền tải ngữ nghĩa thích hợp là sử dụng các phần tử HTML giàu ngữ nghĩa.
Khi sử dụng CSS, bạn có thể định kiểu cho các phần tử <div> và <button> để các phần tử này truyền tải cùng một chức năng trực quan, nhưng hai trải nghiệm này rất khác nhau khi sử dụng trình đọc màn hình.
<div> chỉ là một phần tử nhóm chung, vì vậy, trình đọc màn hình chỉ thông báo nội dung văn bản của <div>.
<button> được thông báo là "nút", một tín hiệu mạnh mẽ hơn nhiều cho người dùng biết rằng đó là một nội dung mà họ có thể tương tác.
Giải pháp đơn giản nhất và thường là tốt nhất cho vấn đề này là tránh sử dụng các chế độ điều khiển tương tác tuỳ chỉnh.
Ví dụ: thay thế <div> hoạt động như một nút bằng <button> thực tế.
Thuộc tính ngữ nghĩa và cây hỗ trợ tiếp cận
Nói chung, mỗi phần tử HTML sẽ có một số thuộc tính ngữ nghĩa sau:
- Vai trò hoặc loại
- Tên
- Giá trị (không bắt buộc)
- Trạng thái (không bắt buộc)
Vai trò của một phần tử mô tả loại của phần tử đó, ví dụ: "nút", "dữ liệu đầu vào" hoặc thậm chí chỉ là "nhóm" đối với các phần tử như div và span.
Tên của phần tử là nhãn được tính toán của phần tử đó. Trình đọc màn hình thường thông báo tên của một phần tử, theo sau là vai trò của phần tử đó, ví dụ: "Đăng ký, nút". Thuật toán xác định tên của một phần tử dựa trên các yếu tố như liệu có nội dung văn bản nào bên trong phần tử hay không, liệu phần tử đó có thuộc tính như title hay placeholder hay không, liệu phần tử đó có liên kết với phần tử <label> thực tế hay không và liệu phần tử đó có thuộc tính ARIA nào như aria-label và aria-labelledby hay không.
Một số phần tử có thể có giá trị. Ví dụ: <input type="text"> có thể có giá trị phản ánh bất kỳ nội dung nào mà người dùng đã nhập vào trường văn bản.
Một số phần tử có thể cũng có trạng thái, cho biết trạng thái hiện tại của phần tử đó.
Ví dụ: phần tử <select> có thể ở trạng thái mở rộng hoặc thu gọn, tuỳ thuộc vào việc phần tử đó đang mở hay đóng.
Cây hỗ trợ tiếp cận
Đối với mỗi nút trong DOM, trình duyệt sẽ xác định xem nút đó có "thú vị" về ngữ nghĩa hay không và thêm nút đó vào cây hỗ trợ tiếp cận. Khi công nghệ hỗ trợ (chẳng hạn như trình đọc màn hình) cung cấp giao diện người dùng thay thế cho người dùng, công nghệ này thường thực hiện việc này bằng cách duyệt qua cây hỗ trợ tiếp cận này.
Khi sử dụng DevTools của Chrome, bạn có thể kiểm tra các thuộc tính ngữ nghĩa của một phần tử và khám phá vị trí của phần tử đó trong cây hỗ trợ tiếp cận.
Các bước tiếp theo
Sau khi biết một chút về ngữ nghĩa và cách ngữ nghĩa hỗ trợ điều hướng trình đọc màn hình, bạn không thể không xem các trang mà bạn tạo theo cách khác. Trong phần tiếp theo, chúng ta sẽ xem xét cách truyền tải toàn bộ nội dung của một trang bằng cách sử dụng tiêu đề và điểm đánh dấu hiệu quả.