Trong ví dụ này từ Samsung Ấn Độ, trang được phóng to 400%. Nội dung được mở rộng đúng cách. Không có thanh cuộn ngang. Tuy nhiên, nút trò chuyện chiếm một phần lớn trong cửa sổ trình duyệt. Không dễ để truy cập các nút tìm kiếm, giỏ hàng hoặc menu. Và chất lượng của đồ họa nút thấp. Ngoài ra, có một quảng cáo lớn cho một ứng dụng
Cải tiến
- Thêm nút thu nhỏ cho nút trò chuyện. Sử dụng phiên bản thu nhỏ làm mặc định
- Sử dụng đồ họa vector như SVG thay vì đồ họa raster như PNG
- Chỉ hiển thị quảng cáo trên thiết bị di động cho thiết bị di động
không lộn xộn
Trong ví dụ này từ Philips, toàn bộ khung nhìn có sẵn cho nội dung chính. Điều hướng chính được mở và không có sự lộn xộn. Văn bản và đồ họa được chia tỷ lệ tốt
Chế độ xem được đặt
Tìm hiểu thêm về thiết kế web đáp ứng
Tránh cuộn ngang
Cuộn trong hai chiều là khó hiểu
Chiều rộng cố định
Trong ví dụ này từ Dell, chúng ta chỉ có thể thấy một phần nhỏ của tiêu đề. Trang web không mở rộng khi phóng to. Kết quả là cuộn ngang lớn khiến bạn khó điều hướng trang theo hai chiều
Ngoài ra, nút đồng ý cookie là cố định, không thể gỡ bỏ mặc dù đã đồng ý. Logo và các biểu tượng là PNG có độ phân giải thấp, không có tỷ lệ tốt. Chế độ xem không được đặt
Cải tiến
- Làm cho trang web đáp ứng
- Thêm nút thu nhỏ cho nút cookie. Sử dụng phiên bản thu nhỏ làm mặc định
- Sử dụng đồ họa vector như SVG thay vì đồ họa raster như PNG
Tất cả nội dung và chức năng có sẵn
Không có nội dung nào bị ẩn khi phóng to
tab ẩn
Trong ví dụ này của Sony, các tab có thông tin sản phẩm không thể truy cập được trong trình duyệt trên máy tính để bàn với tính năng thu phóng trang. Ngay cả khi người dùng cuộn, việc cuộn vẫn diễn ra bên ngoài cửa sổ trình duyệt. Tất cả các thông số kỹ thuật, tính năng, đánh giá và hỗ trợ đều không thể truy cập được. Vấn đề là toàn bộ phần này bị "dính"
.sticky-nav {
. đã sửa;
chỉ mục z. 1035;
trên cùng. 0;
}
Phần này cao 159 pixel ở chế độ xem trên thiết bị di động. Khi được phóng to bốn lần, phần cố định chiếm 636 pixel của chế độ xem trên màn hình. Với chiều cao trình duyệt là 720 pixel, trừ đi phần trên cùng của trình duyệt, không còn nhiều chỗ cho nội dung chính
Nội dung cố định không nhất thiết là không thể truy cập. Điều đáng nói là bạn phải luôn kiểm tra trang web của mình bằng cách phóng to trang ở các kích thước trình duyệt phổ biến
Trong chế độ xem trên thiết bị di động, nội dung bên dưới các tab có thể truy cập được
Điều hướng dính từ Huawei không quá cao nên có đủ không gian cho nội dung chính
Tránh văn bản trong hình ảnh
Trong ví dụ này từ Xiaomi, văn bản được phóng to được pixel hóa vì nó là một phần của hình ảnh. Các phần của văn bản cũng nằm ngoài cửa sổ trình duyệt, do đó người dùng phải cuộn để đọc toàn bộ tiêu đề sản phẩm. Hiển thị văn bản bằng HTML và CSS thuần túy có nhiều lợi ích, ngoài việc có thể truy cập được. đáp ứng, có thể dịch và có thể tìm kiếm
Nếu người dùng của bạn không thể phóng to nội dung của bạn, có thể bạn đang mắc lỗi. Thu phóng [hoặc chia tỷ lệ] là hành vi phổ biến, dự kiến của người dùng và nói chung, bạn không nên ngăn người dùng của mình điều chỉnh nội dung của bạn theo sở thích của họ
Trong bài viết này, chúng ta sẽ thảo luận về các phương pháp mà nhà phát triển sử dụng để vô hiệu hóa tính năng thu phóng — và những kỹ thuật đó có thể gây ra sự thất vọng không cần thiết cho người khuyết tật như thế nào
Đối với nhiều người dùng, tính năng thu phóng rất hữu ích cho khả năng truy cập
Những người bị khuyết tật liên quan đến thị giác có thể mở rộng nội dung để làm cho văn bản dễ đọc hơn và những người có sự khác biệt nhất định về nhận thức thần kinh có thể sử dụng cùng một phương pháp để tập trung vào một dòng hoặc đoạn văn
Khi tính năng thu phóng bị tắt, những người dùng này buộc phải tìm cách khác để đọc nội dung của bạn. Một số người có thể chụp ảnh màn hình, trong khi những người khác có thể sử dụng các ứng dụng phóng to màn hình chuyên dụng.
Không cần phải nói, hầu hết mọi người sẽ thích khả năng tiếp cận tự nhiên hơn. Bạn không muốn buộc người dùng của mình tải xuống phần mềm hoặc sử dụng các cách giải quyết phức tạp để xem trang web của bạn.
Thu phóng không nên bị vô hiệu hóa với HTML trong hầu hết các trường hợp
Thuộc tính thẻ meta HTML "user-scalable=no" có thể hạn chế người dùng thu phóng, điều này có thể phòng thủ được trong một số trường hợp nhất định. Ví dụ: nếu bạn đang xây dựng một trò chơi web hoặc ứng dụng giống như máy tính để bàn, việc thu phóng có thể làm giảm trải nghiệm người dùng
Thông thường hơn, các nhà phát triển vô hiệu hóa tính năng thu phóng để khắc phục các sự cố về bản trình bày. Thẻ người dùng có thể mở rộng thường được ghép nối với đánh dấu bổ sung hiển thị trang theo chiều rộng của thiết bị trong khi ngăn thu phóng. Ví dụ.
Trong ví dụ này, “maximum-scale=1" cũng được dùng để vô hiệu hóa tỷ lệ. Bằng cách đặt giá trị ở mức 1, về cơ bản, thẻ sẽ ngăn chế độ xem của người dùng thay đổi
Cả hai thẻ đều được sử dụng quá mức và kết quả là nhiều trình duyệt máy tính để bàn bỏ qua “user-scalable=no” và “maximum-scale=1" theo mặc định. Trình duyệt di động có thể hỗ trợ các thẻ này ở nhiều mức độ khác nhau. iOS Safari bỏ qua các thẻ này, nhưng tại thời điểm viết, cả hai phương pháp vẫn hoạt động trên Chrome trên Android
Có liên quan. CSS mang lại lợi ích như thế nào về khả năng tiếp cận
Điều gì về tự động phóng to các thẻ đầu vào?
Các nhà phát triển thường sử dụng sai thẻ “user-scalable" để ngăn trình duyệt di động tự động phóng to các trường nhập văn bản. Đây có vẻ là một nơi hợp lý để tắt tính năng thu phóng - nhưng thường có một giải pháp thay thế.
Một cách giải quyết phổ biến. Việc cung cấp các thành phần đầu vào của biểu mẫu với kích thước phông chữ tối thiểu là 16px sẽ ngăn hầu hết các trình duyệt di động mở rộng các thành phần biểu mẫu theo mặc định. Phương pháp này yêu cầu một số công việc với CSS của trang web của bạn, nhưng nó tránh hạn chế thu phóng thủ công.
Có liên quan. Làm cho phương tiện kỹ thuật số của bạn dễ tiếp cận hơn bằng cách cung cấp các tùy chọn
Bạn có thể tuân thủ WCAG trong khi vô hiệu hóa tỷ lệ trên trang web của mình không?
The Nguyên tắc truy cập nội dung web [WCAG] được coi là tiêu chuẩn quốc tế về khả năng truy cập kỹ thuật số. Hầu hết các trang web nên nhắm đến việc tuân thủ Cấp độ AA với phiên bản WCAG mới nhất, có nghĩa là tuân thủ tất cả các tiêu chí thành công Cấp độ A và Cấp độ AA [ đọc thêm về WCAG Cấp độ A, AA và AAA].
Tiêu chí thành công WCAG 1. 4. 4, “Thay đổi kích thước văn bản", yêu cầu văn bản có thể được thay đổi kích thước mà không cần công nghệ hỗ trợ tới 200% mà không làm mất nội dung hoặc chức năng, ngoại trừ chú thích và hình ảnh của văn bản.
Bằng cách vô hiệu hóa thu phóng, một số trang web không đạt tiêu chí này. Mặc dù có thể vô hiệu hóa tỷ lệ trong khi đáp ứng yêu cầu này theo các cách khác — ví dụ: bằng cách cung cấp điều khiển tại chỗ để thay đổi tỷ lệ của trang — cách đơn giản nhất để tuân theo hướng dẫn là xây dựng một trang web đáp ứng cho phép thay đổi tỷ lệ
Có liên quan. Có WCAG 2 không. 1 Yêu cầu thiết kế đáp ứng?
Đừng ngăn người dùng của bạn điều chỉnh nội dung của bạn theo sở thích của họ
Người khuyết tật sử dụng nhiều kỹ thuật khác nhau để điều chỉnh nội dung theo sở thích của họ. Khi bạn hạn chế họ thực hiện một số hành động nhất định — chẳng hạn như mở rộng quy mô trang web của bạn để có thể đọc được — khả năng truy cập sẽ bị ảnh hưởng.
Trong hầu hết các trường hợp, không có lý do chính đáng nào để ngăn việc thu phóng. Bạn có thể thường xuyên sử dụng CSS để đạt được tính thẩm mỹ trực quan mà không tạo ra các giới hạn không cần thiết, điều này phù hợp với nhiều người dùng hơn.