Đã bao giờ bạn dừng lại để thắc mắc làm thế nào công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình, biết nội dung thông báo 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 các trang của họ 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?
Năng lực và ngữ nghĩa
Trước khi tìm hiểu kỹ hơn về ngữ nghĩa, bạn nên hiểu một thuật ngữ khác: khả năng. Thành phần tương tác là bất kỳ đối tượng nào mang lại 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à:
Ấm trà này không cần hướng dẫn sử dụng; thay vào đó, thiết kế thực của nó truyền tải cho người dùng cách sử dụng. Nó có phần xử lý, và vì đã thấy các đối tượng khác trên thế giới có tên người dùng tương tự, nên bạn có thể suy luận cách chọn và vận hành đối tượng đó.
Khi xây dựng giao diện người dùng đồ hoạ, chúng tôi sử dụng những nội dung như CSS để thêm khả năng 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 nút giống với một nút thực tế trong thế giới thực.
Tuy nhiên, nếu người dùng không thể xem màn hình, thì các thuộc tính tương tác trực quan này sẽ không được truyền tải đến họ. Do đó, bạn cần đảm bảo giao diện người dùng được xây dựng theo cách có thể truyền tải cùng các thuộc tính này đến công nghệ hỗ trợ. Việc hiển thị không trực quan về các thành phần tương tác của một thành phần giao diện người dùng này được gọi là ngữ nghĩa.
Sử dụng HTML ngữ nghĩa
Cách dễ nhất để truyền tải đúng ngữ nghĩa là sử dụng các phần tử HTML phong phú về 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 các thành phần hình ảnh, nhưng hai trải nghiệm sẽ rất khác nhau khi sử dụng trình đọc màn hình.
<div> chỉ là một thành phần nhóm chung, do đó, 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 dưới dạng "nút", là tín hiệu mạnh mẽ hơn nhiều để người dùng biết rằng đó là nội dung họ có thể tương tác.
Giải pháp đơn giản và thường xuyên 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ế <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 value (không bắt buộc)
- state (không bắt buộc)
Vai trò của một phần tử mô tả loại phần tử đó, ví dụ: "button", "input" hoặc thậm chí chỉ là "group" cho những phần tử như div và span.
Tên của một phần tử là nhãn đã 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ụ: "Nút đăng ký". Thuật toán xác định các yếu tố về tên của một phần tử trong những yếu tố như liệu có nội dung văn bản nào trong phần tử đó không, phần tử đó có các thuộc tính như title hoặc placeholder hay không, phần tử đó có liên kết với một 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 nội dung bất kỳ mà người dùng đã nhập vào trường văn bản.
Một số thành phần cũng có thể có state truyền tải trạng thái hiện tại của chúng.
Ví dụ: một 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ề 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, thường được thực hiện bằng cách sử dụng cây hỗ trợ tiếp cận này.
Khi sử dụng Công cụ của Chrome cho nhà phát triển, 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 chúng hỗ trợ trình đọc màn hình thao tác, bạn không thể không xem xét các trang mà bạn xây dựng theo cách khác. Trong phần tiếp theo, chúng ta sẽ lùi lại một bước và xem xét cách truyền tải toàn bộ đường viền của một trang bằng cách sử dụng tiêu đề và điểm mốc hiệu quả.