Chúng tôi biết rằng bạn nên thiết kế thích ứng để mang lại 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 giúp mang lại khả năng hỗ trợ tiếp cận.
Hãy xem xét một trang web như Udacity:
Người dùng có thị lực kém và khó đọc chữ in nhỏ có thể phóng to trang lên, 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 tế là cho trang lớn hơn). Điều này rất phù hợp với người dùng máy tính cần phóng to màn hình cũng như 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ế có tính thích ứng, chúng ta đáp ứng quy tắc 1.4.4 của danh sách kiểm tra WebAIM, trong đó 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 xét tất cả cá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 và giúp người dùng truy cập nội dung của bạn hiệu quả hơ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ị, còn việc đặt initial-scale=1 sẽ thiết lập mối quan hệ 1:1 giữa pixel CSS và 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 cho vừa với kích thước màn hình,
để người dùng không chỉ thấy một loạt văn bản bị cuộn lại.
Hãy xem phần Định cỡ nội dung cho 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 của khung nhìn để ngăn thu phóng bằng cách đặt maximum-scale=1 hoặc user-scaleable=no.
Tránh làm việc này và cho phép người dùng phóng to nếu họ cần.
Thiết kế linh hoạt
Tránh nhắm mục tiêu đến các kích thước màn hình cụ thể mà hãy sử dụng lưới linh hoạt, thay đổi bố cục khi nội dung yêu cầu. Như chúng ta đã thấy trong ví dụ về Udacity ở trên, phương pháp này đảm bảo rằng thiết kế sẽ phản hồi 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 các thuộc tính 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. Nếu bạn đang sử dụng giá trị pixel cho văn bản, thì chế độ cài đặt này sẽ không ảnh hưởng đến văn bản của bạn. Tuy nhiên, nếu bạn đã sử dụng đơn vị tương đối xuyên suốt, thì nội dung trên 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 định hình lại khi người dùng thu phóng, tạo ra trải nghiệm đọc mà họ cần để 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 thẻ trong trang web của bạn bằng bàn phím sẽ theo thứ tự của 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ể khiến người dùng bàn phím di chuyển xung quanh trang bị giật.
Hãy nhớ kiểm thử thiết kế của bạn tại mỗi điểm ngắt bằng cách nhấn phím tab qua nội dung, liệu luồng trên trang có còn hợp lý không?
Đọc thêm về lỗi nguồn và màn hình hiển thị bị ngắt kết nối.
Cẩn thận với các gợi ý không gian
Khi viết văn bản vi mô, 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 thanh đ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 thanh điều hướng nằm ở đầu màn hình.
Đảm bảo mục tiêu 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 các mục tiêu nhấn của bạn đủ lớn để dễ dàng kích hoạt mà không cần 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ử có thể nhấn là 48px, hãy đọc thêm hướng dẫn về mục tiêu nhấn.