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