Thiết kế đáp ứng dễ tiếp cận

Chúng tôi biết rằng bạn nên thiết kế theo kiểu 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 hỗ trợ tiếp cận.

Hãy xem xét một trang web như Udacity:

Trang web của Udacity

Người dùng có thị lực kém và gặp khó khăn khi đọc chữ in nhỏ có thể phóng to trang, có thể lên đến 400%. Vì trang web được thiết kế theo cách 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à dành 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%:

Trang web Udacity được thu phóng lên 400%

Trên thực tế, chỉ cần thiết kế thích ứng, chúng ta đã đáp ứng quy tắc 1.4.4 trong danh sách kiểm tra WebAIM, trong đó nêu rõ rằng một trang "… phải có thể đọc đượ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.

Sử dụng thẻ meta cửa sổ xem

<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 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 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 với ví dụ về Udacity ở trên, phương pháp này đảm bảo thiết kế 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 trong phần lựa chọn ưu tiên của người dùng. Nếu bạn đang 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 đơ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 chế độ xem hình ảnh khỏi thứ tự nguồn

Một khách truy cập đang nhấn phím tab trên 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 hiện đại như FlexboxGrid, bạn có thể dễ dàng làm cho 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 từng điểm ngắt bằng cách xuyên qua nội dung, xem liệu luồng nội dung trên trang có 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 manh mối về 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.