Chúng tôi biết rằng bạn nên thiết kế đáp ứng để cung cấp trải nghiệm tốt nhất trên nhiều thiết bị, nhưng thiết kế đáp ứng cũng mang lại chiến thắng về khả năng truy cập.
Hãy xem xét một trang web như Udacity:
Người dùng có thị lực kém gặp khó khăn khi đọc chữ in nhỏ có thể phóng to trang, có thể lên đến 400%. Bởi vì trang web được thiết kế có tính đáp ứng, giao diện người dùng sẽ tự sắp xếp lại cho "khung nhìn nhỏ hơn" (thực tế cho trang lớn hơn), rất phù hợp với những người dùng máy tính có yêu cầu phóng to màn hình cũng như cho người dùng trình đọc màn hình trên thiết bị di động. Đó là mối quan hệ đôi bên cùng có lợi. Đây là cùng một trang được phóng to lên 400%:
Trên thực tế, chỉ bằng cách thiết kế một cách có khả năng thích ứng, chúng tôi đáp ứng quy tắc 1.4.4 của danh sách kiểm tra WebAIM, đặt ra câu lệnh rằng trang "... phải dễ đọc và hoạt động khi kích thước văn bản tăng gấp đôi".
Việc xem xét toàn bộ thiết kế thích ứng nằm ngoài phạm vi của hướng dẫn này, Tuy nhiên, sau đây là một vài điểm quan trọng sẽ giúp ích cho trải nghiệm phản hồi của bạn và giúp người dùng truy cập tốt hơn vào nội dung của bạn.
Dùng thẻ meta khung nhìn
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Việc đặt width=device-width sẽ khớp với chiều rộng của màn hình tính bằng pixel, độc lập với thiết bị,
và việc đặt initial-scale=1 sẽ thiết lập mối quan hệ 1:1 giữa pixel CSS và các pixel độc lập với thiết bị.
Thao tác này sẽ hướng dẫn trình duyệt điều chỉnh nội dung của bạn sao cho vừa với kích thước màn hình,
để người dùng không chỉ nhìn thấy một loạt văn bản được cắt giảm.
Xem Đặt kích thước nội dung theo khung nhìn để tìm hiểu thêm.
Cho phép người dùng thu phóng
Có thể sử dụng thẻ meta cửa sổ xem để ngăn thu phóng,
bằng cách đặt maximum-scale=1 hoặc user-scaleable=no.
Hãy tránh làm như vậy và hãy để người dùng của bạn phóng to nếu cần.
Thiết kế linh hoạt
Tránh nhắm đến các kích thước màn hình cụ thể mà nên dùng lưới linh hoạt. thực hiện thay đổi đối với bố cục khi nội dung yêu cầu. Như chúng ta đã thấy với ví dụ về Udacity ở trên, cách tiếp cận này đảm bảo rằng thiết kế đáp ứng cho dù không gian bị giảm là do màn hình nhỏ hơn hay mức thu phóng cao hơn.
Bạn có thể đọc thêm về các kỹ thuật này trong bài viết Kiến thức cơ bản về thiết kế web thích ứng.
Sử dụng đơn vị tương đối cho văn bản
Để khai thác tối đa lưới linh hoạt sử dụng các đơn vị tương đối như em hoặc rem cho những thông tin như kích thước văn bản, thay vì giá trị pixel. Một số trình duyệt chỉ hỗ trợ đổi kích thước văn bản theo lựa chọn ưu tiên của người dùng, và nếu bạn đang sử dụng giá trị pixel cho văn bản, cài đặt này sẽ không ảnh hưởng đến bản sao của bạn. Tuy nhiên, nếu bạn đã sử dụng đơn vị tương đối từ đầu đến cuối, thì bản sao trang web sẽ cập nhật để phản ánh lựa chọn ưu tiên của người dùng.
Điều này sẽ cho phép chỉnh lại toàn bộ trang web khi người dùng thu phóng, tạo trải nghiệm đọc cần thiết để họ sử dụng trang web của bạn.
Tránh ngắt kết nối khung hiển thị hình ảnh khỏi thứ tự nguồn
Khách truy cập đang nhấn phím tab trong trang web của bạn bằng bàn phím sẽ tuân theo thứ tự của nội dung trong tài liệu HTML. Khi dùng các phương thức bố cục hiện đại như Flexbox và Grid, rất dễ làm cho việc kết xuất hình ảnh không khớp với thứ tự nguồn. Điều này có thể dẫn đến việc những người sử dụng bàn phím di chuyển xung quanh trang một cách khó chịu.
Hãy nhớ kiểm thử thiết kế của bạn tại từng điểm ngắt bằng cách xuyên qua nội dung, luồng thông qua trang vẫn có ý nghĩa không?
Đọc thêm về việc ngắt kết nối giữa màn hình nguồn và hình ảnh.
Cẩn thận với các manh mối về không gian
Khi viết nội dung hiển thị, hãy tránh sử dụng ngôn từ cho biết vị trí của một phần tử trên trang. Ví dụ: đề cập đến thao tác điều hướng "ở bên trái" không có ý nghĩa khi phiên bản dành cho thiết bị di động khi phần điều hướng ở đầu màn hình.
Đảm bảo đích nhấn đủ lớn trên thiết bị màn hình cảm ứng
Trên thiết bị màn hình cảm ứng, hãy đảm bảo rằng đích nhấn của bạn đủ lớn để giúp bạn dễ dàng kích hoạt các thẻ này mà không nhấp vào các đường liên kết khác. Kích thước phù hợp cho mọi phần tử có thể nhấn là 48px, đọc thêm hướng dẫn về mục tiêu nhấn.