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