Bài đọc

Khả năng truy cập: nền tảng và mô hình tư duy

2 phút đọc

Đây là bài 1 của chương 7: Khả năng truy cập, thuộc khóa demo HTML & CSS. Nội dung được dùng để trải nghiệm cấu trúc chương trình học; hãy thực hành trên dữ liệu và môi trường thử nghiệm riêng. Trong dự án xuyên suốt, bạn sẽ xây dựng website giới thiệu khóa học có trang chủ, danh sách bài học và biểu mẫu đăng ký.

Mục tiêu cụ thể

Focus nhìn thấy được giúp người dùng biết vị trí đang thao tác. Button dành cho hành động, link dành cho điều hướng. Thông tin không nên chỉ được diễn tả bằng màu.

Hiểu vấn đề trước khi dùng công cụ

Chương này tập trung vào một quyết định cụ thể: Đi hết trang bằng Tab, Shift+Tab và Enter; liệt kê thành phần không thể dùng bằng bàn phím. Đừng bắt đầu bằng cách chép nguyên ví dụ. Hãy chỉ ra thành phần nào là dữ liệu, thành phần nào là quy tắc và đâu là kết quả quan sát được. Một giải pháp đúng với dữ liệu mẫu vẫn có thể sai khi đầu vào rỗng, kích thước lớn hơn hoặc có hai thao tác xảy ra gần nhau.

Ví dụ tối thiểu

<style>
:focus-visible { outline: 3px solid #0284c7; outline-offset: 4px; }
</style>
<button type="button" aria-expanded="false" aria-controls="details">Xem nội dung</button>
<div id="details" hidden>Nội dung chương học</div>

Giới hạn cần hiểu

Thêm aria nhưng không cập nhật trạng thái tạo thông tin sai. Ví dụ cần JavaScript để đổi aria-expanded và hidden cùng nhau; markup riêng chưa tạo được tương tác.

Câu hỏi để tự giải thích

Bạn sẽ giải thích khả năng truy cập cho người mới bằng ví dụ nào?
Phần nào của ví dụ là giả định, phần nào cần kiểm tra bằng thực nghiệm?
Nếu bỏ một điều kiện quan trọng, kết quả sẽ sai ở đâu?

Kết quả cần đạt

Mỗi điều khiển có tên rõ ràng
Focus không bị xóa
Trạng thái mở/đóng được cập nhật đồng bộ