Chúng tôi biết rằng bạn nên thiết kế theo hướng 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 mang lại lợi ích cho khả năng 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 gặp khó khăn khi đọc chữ nhỏ có thể phóng to trang, có thể lên đến 400%. Vì trang web sử dụng thiết kế thích ứng, nên giao diện sẽ tự sắp xếp lại cho "khung nhìn nhỏ hơn" (thực ra 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 và cả 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ỉ cần thiết kế theo cách thích ứng, chúng ta đã đáp ứng quy tắc 1.4.4 trong danh sách kiểm tra của WebAIM. Quy tắc này nêu rõ rằng một trang phải "dễ đọc và hoạt động được khi cỡ chữ tăng gấp đôi".
Việc xem xét tất cả các khía cạnh của 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 giúp cải thiện trải nghiệm thích ứng và giúp người dùng truy cập vào nội dung của bạn dễ dàng hơn.
Sử dụng thẻ meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Chế độ cài đặt width=device-width khớp với chiều rộng màn hình tính bằng pixel độc lập với thiết bị và chế độ cài đặt initial-scale=1 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 hướng dẫn trình duyệt điều chỉnh nội dung của bạn cho phù hợp 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ị thu nhỏ.
Hãy xem phần Thiết lập kích thước cho nội dung trong 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 sổ xem để ngăn việc thu phóng bằng cách đặt maximum-scale=1 hoặc user-scaleable=no. Tránh làm điều 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 đế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 khi nội dung yêu cầu. Như chúng ta đã thấy trong ví dụ về Udacity, 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.
Đọc thêm về các kỹ thuật này trong phần Thông tin cơ bản về thiết kế web đáp ứ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 thứ như kích thước văn bản, thay vì giá trị pixel. Một số trình duyệt chỉ hỗ trợ thay đổi kích thước văn bản trong 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 bản sao của bạn. Tuy nhiên, nếu bạn đã sử dụng các đơn vị tương đối trong toàn bộ trang web, thì bản sao của 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 cho phép toàn bộ trang web sắp xếp lại khi người dùng phóng to, 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 chế độ xem trực quan với thứ tự nguồn
Người dùng sử dụng bàn phím để di chuyển qua trang web của bạn sẽ 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 như Flexbox và Grid, bạn có thể thay đổi thứ tự hiển thị của các phần tử. Điều này có thể dẫn đến sự không khớp với thứ tự nguồn. Điều này có thể khiến người dùng chuyển đổi qua lại giữa các thẻ trên trang.
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 để chuyển qua nội dung. Hãy tự hỏi: "Luồng thông tin trên trang có còn hợp lý không?"
Đọc thêm về sự khác biệt giữa nguồn và màn hình hiển thị trực quan.
Hãy cẩn thận với các manh mối về không gian
Khi viết vi bản, 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. Đối với người dùng khiếm thị, họ có thể không có ngữ cảnh chung đó và sẽ được hưởng lợi nhiều hơn từ việc xác định bản sao chính xác của phần tử, giúp họ có thể tìm kiếm.
Điều này cũng giúp ích cho tất cả người dùng, vì việc đề cập đến phần điều hướng là "ở bên trái" có thể không hợp lý trong phiên bản dành cho thiết bị di động, nơi phần điều hướng có thể chuyển đến một vị trí khác.
Đảm bảo các mục tiêu nhấn đủ lớn trên thiết bị màn hình cảm ứng
Trên các thiết bị có màn hình cảm ứng, hãy đảm bảo rằng các mục tiêu 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ử có thể nhấn là 48 px. Hãy đọc thêm hướng dẫn về mục tiêu nhấn.