M

MLOG

Tiếng Việt

Tìm hiểu cách các liên kết bỏ qua cải thiện khả năng tiếp cận website, đặc biệt cho người dùng bàn phím và trình đọc màn hình trên toàn cầu. Triển khai điều hướng bỏ qua để có trải nghiệm trực tuyến toàn diện hơn.

Liên kết Bỏ qua (Skip Links): Tăng cường Điều hướng Bằng Bàn phím cho Khả năng Tiếp cận Toàn cầu

Trong bối cảnh kỹ thuật số ngày nay, việc đảm bảo khả năng tiếp cận website cho mọi người dùng là tối quan trọng. Một tính năng có vẻ nhỏ nhưng có tác động sâu sắc trong phát triển web là việc sử dụng liên kết bỏ qua, còn được gọi là liên kết điều hướng bỏ qua. Những liên kết này, thường bị bỏ qua, giúp cải thiện đáng kể trải nghiệm duyệt web cho những người dùng phụ thuộc vào điều hướng bằng bàn phím, trình đọc màn hình và các công nghệ hỗ trợ khác, mang lại lợi ích cho khán giả toàn cầu với các nhu cầu đa dạng.

Liên kết Bỏ qua là gì?

Liên kết bỏ qua là các liên kết nội bộ trên trang xuất hiện khi người dùng lần đầu nhấn phím Tab trên một trang web. Chúng cho phép người dùng bỏ qua các menu điều hướng, tiêu đề lặp đi lặp lại hoặc các khối nội dung khác và chuyển thẳng đến khu vực nội dung chính. Điều này đặc biệt quan trọng đối với những người dùng điều hướng bằng bàn phím hoặc trình đọc màn hình, vì việc phải nhấn Tab lặp đi lặp lại qua các yếu tố điều hướng dài dòng có thể tẻ nhạt và tốn thời gian. Ví dụ, hãy tưởng tượng một người dùng truy cập một cổng thông tin tin tức đa ngôn ngữ. Nếu không có liên kết bỏ qua, họ sẽ phải nhấn Tab qua nhiều tùy chọn ngôn ngữ, vô số danh mục và các quảng cáo khác nhau trước khi đến được các bản tin thực sự.

Tại sao Liên kết Bỏ qua lại Quan trọng?

Tầm quan trọng của các liên kết bỏ qua xuất phát từ khả năng cải thiện:

Ai được hưởng lợi từ Liên kết Bỏ qua?

Mặc dù chủ yếu được thiết kế cho người dùng khuyết tật, lợi ích của các liên kết bỏ qua mở rộng đến một đối tượng rộng lớn hơn, bao gồm:

Triển khai Liên kết Bỏ qua: Hướng dẫn Thực hành

Triển khai các liên kết bỏ qua là một quá trình tương đối đơn giản có thể tăng cường đáng kể khả năng tiếp cận của trang web. Dưới đây là hướng dẫn từng bước:

1. Cấu trúc HTML:

Liên kết bỏ qua nên là yếu tố có thể nhận focus đầu tiên trên trang, xuất hiện trước tiêu đề hoặc menu điều hướng. Nó thường trỏ đến khu vực nội dung chính của trang.


<a href="#main-content" class="skip-link">Bỏ qua đến nội dung chính</a>
<header>
  <!-- Menu điều hướng -->
</header>
<main id="main-content">
  <!-- Nội dung chính -->
</main>

Giải thích:

2. Tạo kiểu CSS:

Ban đầu, liên kết bỏ qua nên được ẩn về mặt thị giác. Nó chỉ nên trở nên hữu hình khi nhận được focus (ví dụ: khi người dùng nhấn Tab đến nó).


.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background-color: #333;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

Giải thích:

3. JavaScript (Tùy chọn):

Trong một số trường hợp, bạn có thể sử dụng JavaScript để tự động thêm các liên kết bỏ qua hoặc tăng cường chức năng của chúng. Tuy nhiên, một triển khai HTML và CSS có cấu trúc tốt thường là đủ.

4. Vị trí và Đích đến:

5. Nhãn Rõ ràng và Ngắn gọn:

Nhãn văn bản của liên kết bỏ qua phải chỉ rõ đích đến của nó. Các ví dụ phổ biến bao gồm:

Đối với các trang web đa ngôn ngữ, hãy cung cấp các phiên bản dịch của nhãn liên kết bỏ qua để phục vụ khán giả toàn cầu. Ví dụ, trên một trang web nhắm đến cả người nói tiếng Anh và tiếng Tây Ban Nha, bạn có thể có "Skip to main content" và "Saltar al contenido principal" tương ứng.

6. Kiểm thử:

Kiểm tra kỹ lưỡng liên kết bỏ qua bằng bàn phím và trình đọc màn hình để đảm bảo nó hoạt động như mong đợi. Các trình duyệt và công nghệ hỗ trợ khác nhau có thể diễn giải việc triển khai theo cách khác nhau. Hãy cân nhắc kiểm thử với nhiều trình đọc màn hình khác nhau như NVDA, JAWS và VoiceOver. Đồng thời, hãy kiểm tra trên các hệ điều hành khác nhau (Windows, macOS, Linux, Android, iOS) để đảm bảo hành vi nhất quán.

Các Vấn đề Nâng cao

Nhiều Liên kết Bỏ qua:

Mặc dù một liên kết bỏ qua duy nhất đến nội dung chính thường là đủ, hãy cân nhắc thêm các liên kết bỏ qua bổ sung đến các phần quan trọng khác của trang, chẳng hạn như chân trang hoặc thanh tìm kiếm, đặc biệt trên các bố cục phức tạp. Điều này có thể tăng cường hơn nữa khả năng điều hướng cho người dùng khuyết tật.

Nội dung Động:

Nếu trang web của bạn tải nội dung một cách động, hãy đảm bảo rằng liên kết bỏ qua vẫn hoạt động và trỏ đến vị trí chính xác sau khi nội dung được tải. Điều này có thể yêu cầu cập nhật thuộc tính `href` hoặc sử dụng JavaScript để điều chỉnh đích đến của liên kết bỏ qua.

Thuộc tính ARIA:

Mặc dù không phải lúc nào cũng cần thiết, các thuộc tính ARIA có thể cung cấp thêm thông tin ngữ nghĩa cho các công nghệ hỗ trợ. Ví dụ, bạn có thể sử dụng `aria-label` để cung cấp một nhãn mô tả chi tiết hơn cho liên kết bỏ qua.

Công cụ Kiểm thử Khả năng Tiếp cận:

Sử dụng các công cụ kiểm thử khả năng tiếp cận để xác định các vấn đề tiềm ẩn với việc triển khai liên kết bỏ qua của bạn. Các công cụ như WAVE, axe DevTools và Lighthouse có thể giúp bạn đảm bảo tuân thủ các hướng dẫn WCAG. Nhiều công cụ trong số này có sẵn dưới dạng tiện ích mở rộng của trình duyệt hoặc tiện ích dòng lệnh, cho phép tích hợp liền mạch vào quy trình phát triển của bạn.

Ví dụ Thực tế

Dưới đây là một số ví dụ về cách các liên kết bỏ qua được triển khai trên các trang web phổ biến:

Những Lỗi Thường gặp cần Tránh

Liên kết Bỏ qua và SEO

Mặc dù các liên kết bỏ qua chủ yếu mang lại lợi ích cho khả năng tiếp cận, chúng có thể gián tiếp đóng góp vào SEO. Bằng cách cải thiện trải nghiệm người dùng và giúp người dùng (và các trình thu thập thông tin của công cụ tìm kiếm) dễ dàng truy cập vào nội dung chính, các liên kết bỏ qua có thể tác động tích cực đến các chỉ số tương tác và thứ hạng trên công cụ tìm kiếm.

Tương lai của Khả năng Tiếp cận

Khi web tiếp tục phát triển, khả năng tiếp cận sẽ ngày càng trở nên quan trọng hơn. Liên kết bỏ qua chỉ là một khía cạnh nhỏ nhưng quan trọng trong việc tạo ra một trải nghiệm trực tuyến bao hàm và dễ tiếp cận hơn cho mọi người. Việc cập nhật các hướng dẫn và thực tiễn tốt nhất về khả năng tiếp cận là điều cần thiết đối với các nhà phát triển và thiết kế web muốn xây dựng các trang web có thể truy cập được cho tất cả người dùng, bất kể khả năng hay vị trí của họ.

Kết luận

Liên kết bỏ qua là một công cụ đơn giản nhưng mạnh mẽ để tăng cường khả năng tiếp cận trang web và cải thiện trải nghiệm người dùng cho người dùng bàn phím, người dùng trình đọc màn hình và các cá nhân khuyết tật trên toàn cầu. Bằng cách triển khai các liên kết bỏ qua, bạn có thể tạo ra một môi trường trực tuyến bao hàm và dễ tiếp cận hơn, mang lại lợi ích cho tất cả người dùng. Dành thời gian để triển khai chúng thể hiện cam kết đối với tính bao hàm và các thực hành phát triển web có đạo đức. Đây là một khoản đầu tư nhỏ nhưng mang lại lợi nhuận đáng kể về sự hài lòng của người dùng và việc tuân thủ các tiêu chuẩn về khả năng tiếp cận.