Mở đầu
Cải thiện khả năng truy cập web đòi hỏi nhiều yếu tố kỹ thuật khác nhau, trong đó, “Bỏ qua khối” (Block skip) là một tính năng quan trọng giúp người dùng điều hướng trang web một cách hiệu quả. Đặc biệt đối với người khiếm thị sử dụng trình đọc màn hình và những người điều hướng bằng bàn phím, tính năng này mang lại sự tiện lợi lớn. Trong bài viết này, chúng tôi sẽ giải thích vai trò của chức năng bỏ qua khối, cách thực hiện nó và các phương pháp cụ thể để cải thiện trải nghiệm người dùng.
Block skip là gì?
Tính năng “Block skip” là một chức năng điều hướng cho phép người dùng bỏ qua các menu, header và sidebar lặp đi lặp lại trên trang web để chuyển thẳng đến nội dung chính. Trên hầu hết các trang web, có nhiều yếu tố như menu header hay thanh điều hướng xuất hiện chung trên nhiều trang. Đối với những người chỉ sử dụng bàn phím hoặc người dùng trình đọc màn hình, việc phải điều hướng qua các phần lặp đi lặp lại này mỗi lần truy cập có thể tốn thời gian và công sức.
Việc cung cấp tính năng “Block skip” giúp người dùng truy cập nhanh chóng vào nội dung chính và giảm bớt các thao tác không cần thiết. Điều này không chỉ cải thiện trải nghiệm người dùng mà còn là một yếu tố quan trọng để tuân thủ các tiêu chuẩn quốc tế về khả năng truy cập, như “Hướng dẫn về khả năng truy cập nội dung web” (WCAG).
Tầm quan trọng của tính năng “Block skip”
Tính năng “Block skip” đặc biệt mang lại hiệu quả lớn đối với những người dùng sau.
- Người khiếm thị: Khi sử dụng trình đọc màn hình, việc đọc hết thanh điều hướng hoặc menu của trang sẽ tốn rất nhiều thời gian. Với tính năng “Bỏ qua khối”, người dùng có thể bỏ qua các phần này và chuyển thẳng đến nội dung, giúp sử dụng trang một cách hiệu quả hơn.
- Người dùng bàn phím: Những người điều hướng chỉ bằng bàn phím cần di chuyển qua từng menu và liên kết bằng phím Tab. Với tính năng “Bỏ qua khối”, họ có thể bỏ qua các phần không cần thiết và nhanh chóng truy cập vào nội dung mong muốn.
- Người dùng có khuyết tật vận động: Đối với những người gặp khó khăn trong việc sử dụng chuột, khả năng điều hướng hiệu quả bằng bàn phím là vô cùng quan trọng. Tính năng “Bỏ qua khối” giúp giảm bớt gánh nặng đáng kể cho những người dùng này.
Cách triển khai tính năng “Block skip”
Tính năng “Block skip” là một kỹ thuật đơn giản và có thể được triển khai hiệu quả chỉ với một lượng mã nhỏ. Một phương pháp phổ biến là đặt “liên kết bỏ qua” (Skip Link) ở đầu trang, sao cho khi điều hướng bằng bàn phím, liên kết này sẽ là mục được lấy nét đầu tiên. Khi người dùng chọn liên kết này, họ sẽ được chuyển trực tiếp đến nội dung chính của trang.
Ví dụ triển khai cơ bản bằng HTML
Dưới đây là ví dụ mã cơ bản để triển khai bỏ qua khối bằng HTML.
html
<a href="#main-content" class="skip-link">Bỏ qua đến nội dung chính</a>
<header>
<!-- Nội dung phần đầu trang -->
</header>
<nav>
<!-- Thanh điều hướng -->
</nav>
<main id="main-content">
<!-- Nội dung chính -->
</main>
Trong đoạn mã này, thẻ <a> tạo ra một liên kết với nội dung ‘Bỏ qua đến nội dung chính’, và liên kết này được thiết lập để nhảy đến thẻ <main> có ID là #main-content. Việc triển khai đơn giản này giúp tăng hiệu quả đáng kể cho việc điều hướng bằng bàn phím.
Điều chỉnh thị giác bằng CSS Thông thường, liên kết bỏ qua khối chỉ hiển thị khi thao tác bằng bàn phím. Để không gây cản trở về mặt thị giác, việc điều chỉnh kiểu bằng CSS như sau được khuyến nghị.
.skip-link {
position: absolute;
top: -40px;
left: 0;
background-color: #000;
color: #fff;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 10px;
outline: none;
}
Trong kiểu này, thông thường liên kết sẽ được ẩn ngoài màn hình và chỉ hiển thị ở phần trên cùng khi được lấy nét bằng bàn phím. Điều này giúp không gây cản trở về mặt thị giác và chỉ xuất hiện cho người dùng khi cần thiết.
Hiệu quả sử dụng liên kết bỏ qua khối
1. Cài đặt nhiều điểm bỏ qua
Đối với các trang web lớn có nhiều phần nội dung, việc cung cấp nhiều liên kết bỏ qua không chỉ đến nội dung chính mà còn đến các phần cụ thể sẽ rất hữu ích. Ví dụ, việc thêm các liên kết như “Bỏ qua đến thanh bên” hoặc “Bỏ qua đến chân trang” sẽ giúp điều hướng trở nên thân thiện hơn với người dùng.
2. Nếu cần dịch thêm, hãy cho tôi biết nhé!
Thay vì sử dụng những cụm từ mơ hồ như “Nhấp vào đây” cho liên kết bỏ qua, điều quan trọng là phải mô tả rõ ràng nơi liên kết sẽ dẫn đến. Ví dụ, việc sử dụng các nhãn cụ thể như “Bỏ qua đến nội dung chính” hoặc “Bỏ qua điều hướng” sẽ giúp cung cấp cho người dùng các liên kết trực quan và dễ sử dụng hơn.
3. Cân nhắc về khả năng hiển thị của liên kết bỏ qua
Liên kết bỏ qua phải được thiết kế sao cho người dùng bàn phím có thể dễ dàng tìm thấy. Ngay cả khi liên kết được ẩn về mặt thị giác, bạn cần điều chỉnh kiểu sao cho nó hiển thị rõ ràng khi nhận được tiêu điểm từ bàn phím. Đặc biệt, khi ở trạng thái tiêu điểm, việc thiết kế để liên kết được nhấn mạnh một cách rõ ràng là rất quan trọng.
Tóm tắt
“Block skip” là một tính năng rất quan trọng từ quan điểm khả năng truy cập web. Đặc biệt, nó cung cấp điều hướng hiệu quả cho người dùng trình đọc màn hình và những người thao tác bằng bàn phím, giúp cải thiện đáng kể tính dễ sử dụng của toàn bộ trang web. Mặc dù là một triển khai đơn giản, nhưng tính năng này mang lại hiệu quả lớn, và có thể nói rằng nó nên được tích hợp trên tất cả các trang web.
Lợi ích của việc Block skip
Người dùng có thể truy cập nhanh chóng vào nội dung chính. Hỗ trợ trình đọc màn hình và điều hướng bằng bàn phím. Việc triển khai đơn giản giúp cải thiện đáng kể khả năng truy cập. Hãy tích cực triển khai tính năng bỏ qua khối để nâng cao tính dễ sử dụng của trang web và cung cấp trải nghiệm kỹ thuật số dễ tiếp cận hơn cho nhiều người dùng.
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ giúp dễ dàng triển khai khả năng truy cập web. Nếu bạn quan tâm đến việc cải thiện khả năng truy cập, hãy xem thêm thông tin chi tiết.