Làm trang của bạn dễ tiếp cận

Một trang dễ tiếp cận là trang mà ai cũng dùng được: người dùng trình đọc màn hình, người có thị lực kém, người tránh chuyển động trên màn hình, hay đơn giản là người đang xem điện thoại dưới nắng. LinkHarbor tự lo nhiều việc; một số việc thì tùy bạn. Bài này cho biết bạn cần chú ý điều gì.

#Những gì LinkHarbor tự động làm

• Nếu khách truy cập đã bật “Reduce motion” (Giảm chuyển động) trong hệ thống, video nền không phát, hiệu ứng cuộn và parallax cũng như hiệu ứng khi di chuột đều bị tắt
• Khối “Tiêu đề” được xuất thành một tiêu đề thực sự mà trình đọc màn hình dùng để định hướng
• Ảnh từ các khối “Hình ảnh” và “Thư viện ảnh” nhận văn bản thay thế của bạn làm mô tả
• Nếu bạn chưa chọn màu chữ riêng cho nút, LinkHarbor chọn một màu phù hợp với màu nút

#Văn bản thay thế cho ảnh

Văn bản thay thế (alt text) mô tả những gì có trong ảnh. Trình đọc màn hình đọc to văn bản này, và nó xuất hiện khi ảnh không tải được.

Khối “Hình ảnh”

Trường “Văn bản thay thế” trong trình chỉnh sửa khối.

Khối “Thư viện ảnh”

Một “Văn bản thay thế” tối đa 200 ký tự cho mỗi ảnh.

• Mô tả nội dung, không mô tả tệp: “Ly cappuccino có latte art trên bàn gỗ” thay vì “IMG_2041”
• Với ảnh có chữ, chữ đó cần nằm trong văn bản thay thế
• Giữ ngắn gọn – thường một câu là đủ

Vị trí các trường được giải thích trong Chi tiết các khối miễn phí và Khối nội dung.

#Cấu trúc bằng tiêu đề

Hãy chia các trang dài bằng khối “Tiêu đề” thay vì dùng chữ cỡ lớn. Người dùng trình đọc màn hình nhảy từ tiêu đề này sang tiêu đề khác và nhờ vậy nhanh chóng tìm thấy thứ họ cần – như “Giờ mở cửa” hay “Liên hệ”.

#Tiêu đề liên kết rõ ràng

• Mỗi liên kết nên tự nó có nghĩa: “Thực đơn dạng PDF” thay vì “Nhấp vào đây”
• Tránh dùng tiêu đề giống nhau cho các đích khác nhau
• Emoji ở đầu tiêu đề sẽ được đọc to; hãy dùng tiết chế

Xem thêm về liên kết trong Thêm và tạo kiểu liên kết.

#Độ tương phản và khả năng đọc

• Đảm bảo đủ độ tương phản giữa chữ và nền, đặc biệt với các màu pastel nhạt
• Nếu chữ nằm trên ảnh hoặc video nền, hãy dùng “Độ mờ đục lớp phủ” trong giao diện để chữ vẫn dễ đọc
• Không đặt văn bản quan trọng chỉ trong ảnh – khách truy cập dùng trình đọc màn hình không đọc được
• Chọn phông chữ dễ đọc và cỡ chữ không quá nhỏ cho các khối văn bản

Bạn đặt màu sắc, nền và phông chữ trong giao diện, xem Thiết kế.

#Dùng CSS tùy chỉnh thận trọng

Với CSS tùy chỉnh, bạn có thể thay đổi gần như mọi thứ – kể cả những điều quan trọng cho khả năng tiếp cận. Đừng ẩn đường viền tiêu điểm (focus), đừng thu nhỏ chữ quá mức, và sau khi thay đổi, hãy thử trang bằng bàn phím. Xem CSS tùy chỉnh.

#Tự kiểm tra

1. Bật trình đọc màn hình trên điện thoại (VoiceOver trên iPhone, TalkBack trên Android) và nghe trang của bạn
2. Tăng cỡ chữ trong cài đặt hệ thống và kiểm tra xem mọi thứ có còn dễ đọc không
3. Xem trang dưới ánh sáng mạnh và ở chế độ tối