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