Advertisement
  1. Web Design
  2. Accessibility

Mẹo khả năng truy cập bàn phím bằng HTML và CSS

by
Read Time:8 minsLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Làm cho trang web của bạn có thể truy cập được đối với người dùng chỉ sử dụng bàn phím là một phần quan trọng trong bức tranh khả năng truy cập lớn hơn. Dưới đây là một số mẹo truy cập bàn phím mà bạn có thể nhanh chóng cài đặt bằng HTML và CSS cơ bản.

A11y từ Sơ khởi

Những mẹo này là một phần của Khả năng Truy cập Web: Hướng dẫn hoàn chỉnh, nơi chúng ta thu thập một loạt các hướng dẫn, bài viết, khóa học và sách điện tử, để giúp bạn hiểu về khả năng truy cập web ngay từ đầu.

Khả năng Truy cập từ bàn phím là gì?

Bàn phím có thể là phương tiện chính để một số người dùng điều hướng các trang web. Ngày nay, khi hầu hết các giao diện web được thiết kế với con trỏ chuột và ý tưởng tương tác cảm ứng, điều hướng thông qua bàn phím bị bỏ qua. Khả năng truy cập bằng bàn phím là thực tế để đảm bảo rằng người dùng có thể điều hướng hiệu quả và không bị cản trở chỉ bằng bàn phím của họ.

Ai có thể cần truy cập bằng bàn phím?

Đây là các nhóm chính cho khả năng truy cập bằng bàn phím:

  • Người dùng bị khuyết tật vận động gặp khó khăn khi sử dụng chuột, sử dụng thiết bị cảm ứng hoặc nhấp vào vật nhỏ.
  • Người mù hoặc khiếm thị thường thích điều hướng các trang web với bàn phím chữ nổi.
  • Người bị cụt hoặc những người bị cắt cụt bẩm sinh (sinh ra không có chi hoặc tay chân, cụ thể là tay trong trường hợp này) thường sử dụng chức năng bắt chước phần cứng đặc biệt.
  • Bất cứ ai chỉ đơn giản là không có khả năng truy cập vào một con chuột hoặc bàn di chuột.

1. Test trang web của bạn cho việc truy cập bàn phím

Mục tiêu quan trọng nhất của khả năng truy cập bàn phím là làm cho mọi yếu tố tương tác, chẳng hạn như liên kết và form control có sẵn với phím Tab. Đây là cách người dùng chỉ sử dụng bàn phím điều hướng qua một trang web.  Test khả năng truy cập bàn phím của bạn thực sự khá dễ dàng: chỉ cần nhấn phím Tab và điều hướng từ đầu trang xuống dưới cùng, làm nổi bật các yếu tố active.

Navigating quick links in the Tuts footer with the Tab keyNavigating quick links in the Tuts footer with the Tab keyNavigating quick links in the Tuts footer with the Tab key
Điều hướng các liên kết nhanh trong footer trên trang Tuts+ bằng phím Tab

Quan sát mức độ dễ hay khó để vào được nội dung chính, nhấp vào mục menu, điền vào form, vận hành một slider hoặc theo vị trí hiện tại của bạn trên trang. Bạn cũng có thể kiểm tra hướng ngược lại bằng phím tắt Shift + Tab.

2. Tạo style :focus

CSS có một lớp giả :focus được kích hoạt khi người dùng nhấp hoặc chạm vào một phần tử hoặc chọn nó bằng phím Tab. Trạng thái :focus chỉ áp dụng cho các phần tử có thể focus, cụ thể là <a>, <button>, <input>, <textarea>, <select> và <area>.

Mỗi trình duyệt đều có style :focus mặc định riêng, thường là một đường viền màu đen chấm xung quanh thành phần hoặc ánh sáng mờ, tuy nhiên nhiều nhà thiết kế thấy nó không hợp với sở thích của họ và sẽ loại bỏ hoàn toàn. Đây thực sự là sai lầm số một làm hỏng khả năng truy cập bàn phím trên các trang web. Nếu bạn không thích style mặc định, hãy sử dụng thứ gì đó phù hợp với thiết kế trang web của bạn.

focus styles in Google Chrome browserfocus styles in Google Chrome browserfocus styles in Google Chrome browser
Style :focus mặc định trong trình duyệt Google Chrome

Chọn một style mà dễ dàng nhận thấy, nhưng không chỉ dựa vào màu sắc. Dưới đây, một ví dụ khả thi có thể hoạt động tốt cho người dùng chỉ sử dụng bàn phím:

3. Sử dụng Thiết kế không màu cho các liên kết

Các siêu liên kết không nên chỉ được phân biệt bằng màu sắc. Nguyên tắc này thường được đề cập liên quan đến khả năng tiếp cận thị giác, vì những người có thị lực kém nhận thấy sự khác biệt giữa các màu nhất định là rất khó. Tuy nhiên, các liên kết rõ ràng cũng rất quan trọng đối với khả năng truy cập bàn phím. Người dùng chỉ sử dụng bàn phím sẽ có thể phát hiện ra các liên kết nhanh nhất có thể. Điều này giúp họ quét trang web và tìm ra cách điều hướng đến phần họ quan tâm.

Tương tự như style :focus, siêu liên kết cũng đi kèm với kiểu trình duyệt mặc định gạch chân màu xanh da trời trong hầu hết các trường hợp. Tuy nhiên, các nhà thiết kế thường xuyên loại bỏ gạch chân và chỉ sử dụng màu sắc để chỉ ra sự hiện diện của một liên kết. Nếu bạn xóa phần gạch chân mặc định thì hãy luôn sử dụng một thiết kế không màu khác phù hợp với thiết kế trang web của bạn, chẳng hạn như viền, biểu tượng.

Clear links on govuk 1 hyperlink 2 focused 3 visitedClear links on govuk 1 hyperlink 2 focused 3 visitedClear links on govuk 1 hyperlink 2 focused 3 visited
Liên kết rõ ràng trên gov.uk: (1) hyperlink (2) focused (3) visited

Bạn có thể sử dụng thuộc tính title để mô tả một nội dung liên kết, nhưng nó chỉ hiển thị khi ai đó di chuyển lên liên kết. Người dùng chỉ sử dụng bàn phím không có quyền truy cập vào các sự kiện di chuột, vì vậy đừng bao giờ đặt thông tin quan trọng trong thuộc tính title. Nó cũng không được tính là một kiểu thiết kế không màu. Ví dụ: đừng bao giờ làm điều này:

Thay vào đó, hãy làm điều này:

WCAG 2.0 cũng cảnh báo về các vấn đề về khả năng truy cập của thuộc tính title. Hoặc là sử dụng nó một cách cẩn thận hoặc không nên sử dụng nó.

4. Sử dụng các phần tử điều khiển gốc

Form là các phần tử tương tác, vì vậy chúng cần có thể truy cập thông qua bàn phím. Người dùng chỉ sử dụng bàn phím sẽ có thể điền vào form, nhấn nút, sử dụng slider, chọn tùy chọn và điều khiển một cách dễ dàng. Nếu bạn có bất kỳ form nào trên trang web của mình, bạn nên test từng cái một, sử dụng phím Tab. Hãy nghĩ về form đăng ký, form bản tin, form đăng nhập, form bình luận, và vv.

Cách tốt nhất để tạo các form có thể truy cập là sử dụng các control gốc bất cứ nơi nào có thể. Các control gốc đi kèm với khả năng truy cập bàn phím tích hợp, có nghĩa là chúng có thể focus và phản ứng đối với các sự kiện nhấn phím theo mặc định. Chúng là:

  • <button>
  • <input>
  • <textarea>
  • <select>
  • <option>

Ví dụ: bạn có thể tạo một slider có thể truy cập bằng bàn phím với HTML sau:

Người dùng bàn phím trước tiên có thể foucs nó bằng phím Tab, sau đó di chuyển slider lên và xuống bằng Dấu cách.

Nếu bạn cần sử dụng thẻ HTML không thể focus cho một phần tử tương tác vì một số lý do, bạn có thể làm cho nó có thể focus bằng thuộc tính tabindex="0". Chẳng hạn, ở đây, một <div> biến thành nút có thể focus:

Thuộc tính role="button" trong đoạn code trên là một ARIA. Mặc dù người dùng chỉ sử dụng bàn phím không cần nó, nhưng nó không thể thiếu đối với người dùng trình đọc màn hình và khả năng truy cập trực quan.

Ngay cả khi nút không phải là gốc đã được đặt ở chế độ có thể focus, thì nó vẫn kém hơn so với đối tác gốc của nó về khả năng truy cập bàn phím. Bạn sẽ hiểu điều này ngay lập tức khi bạn cố gắng thêm một trình xử lý sự kiện vào nút. Dưới đây một sự kiện nhấp chuột đối với một phần tử gốc <button>:

Và, ở đây, tương đương với cách sử dụng nút div:

Nếu bạn nhấp vào nút bằng chuột hoặc bàn di chuột, bạn có thể thấy cả hai thông báo. Tuy nhiên, nếu bạn điều hướng đến từng nút bằng phím Tab và nhấn Enter, bạn sẽ chỉ thấy thông báo đầu tiên, thuộc về nút gốc. Để làm cho nút không phải gốc xử lý đầu vào bàn phím, bạn cũng cần xác định riêng một trình xử lý sự kiện nhấn phím:

Bây giờ, khi người dùng bàn phím nhấn Enter, họ cũng thấy thông báo thuộc về nút không phải gốc. Như bạn có thể thấy, sử dụng phiên bản gốc dễ dàng và nhanh chóng hơn nhiều. Vì vậy, trừ khi bạn có lý do chính đáng để không sử dụng chúng, hãy luôn sử dụng các phần tử gốc.

5. Thêm một Liên kết “Skip to Main Content”

Thêm liên kết Skip to main content hoặc Skip navigation (bỏ qua liên kết để vào thẳng nội dung) vào các trang web của bạn sẽ giúp người dùng chỉ sử dụng bàn phím rất nhiều. Trong hầu hết các trường hợp, những người dùng thường không muốn duyệt qua tất cả các liên kết điều hướng trước khi họ bắt đầu đọc nội dung. Điều này đặc biệt đúng khi họ xem nhiều hơn một trang trên trang web của bạn. Chỉ cần tưởng tượng, không có một skip link, họ phải đi qua các liên kết điều hướng tương tự trên trang chủ. Nó không giống như một hoạt động giải trí.

Để tạo một skip link, bạn cần liên kết nó với nội dung chính bằng cách sử dụng các thuộc tính HTML id và href theo cách sau:

Bạn cũng cần thêm thuộc tính tabindex="- 1" vào kho chứa nội dung chính. Đây là cùng một tabindex mà chúng ta đã sử dụng ở trên để làm cho nút không thể focus. Thuộc tính tabindex được sử dụng để sửa đổi thứ tự điều hướng mặc định. Với giá trị 0, nó làm cho các phần tử không thể focus có thể focus. Với giá trị -1, nó cũng làm cho các thành phần có thể focus nhưng chúng trở nên không thể truy cập được với điều hướng bàn phím mặc định. Một số trình duyệt nhất định, chẳng hạn như Chrome và IE, yêu cầu sự hiện diện của tabindex="-1" trên target của skip navigation link, vì vậy đừng bao giờ bỏ qua nó.

Chỉ hiển thị Skip Link cho người dùng bàn phím

Bạn có thể sử dụng CSS để chỉ hiển thị skip link cho người dùng bàn phím. Ở trạng thái mặc định, ẩn liên kết khỏi người dùng thông thường bằng cách định vị nó ra khỏi viewport. Sau đó, hiện thị nó cho người dùng bàn phím bằng cách tạo các style riêng biệt cho trạng thái focus mà kích hoạt khi người dùng nhấn phím Tab.

Bạn có thể thấy hiệu ứng này hoạt động trên các trang web như webaim.org, www.w3.org và (như thường lệ) www.gov.uk:

Reveal the Skip Link Only to Keyboard UsersReveal the Skip Link Only to Keyboard UsersReveal the Skip Link Only to Keyboard Users
Bạn đã bao giờ nhìn thấy liên kết này trước đây chưa?

CSS sau đây là phiên bản đơn giản hóa của skip link trên trang IT Accessibility Handbook của NC State University:

Khi người dùng nhấn phím Tab, phần tử .skip-main được focus và skip link xuất hiện trên màn hình.

Bạn có thể nhanh chóng kiểm tra cách thức hoạt động của nó nếu bạn nhấp vào phần trên cùng của bản demo bên dưới và nhấn phím Tab. Thay vào đó, bạn có thể thấy dễ dàng hơn để mở bản demo trong chế độ xem toàn trang.

Bước tiếp theo

Trong bài viết này, tôi đã chia sẻ một số mẹo truy cập bàn phím cơ bản mà bạn có thể thực hiện bằng cách sử dụng HMTL và CSS. Có những thứ khác, cao cấp hơn bạn có thể làm cho khả năng truy cập bàn phím. Chẳng hạn, bạn có thể:

Ngoài các mẹo này, tránh sử dụng CAPTCHA khi có thể, vì chúng có vấn đề nghiêm trọng về khả năng truy cập, cho cả trình đọc màn hình và người dùng chỉ sử dụng bàn phím. Nếu bạn vẫn cần sử dụng chúng, hãy cung cấp nhiều hơn hai cách để giải quyết chúng, nếu không, người dùng có nhu cầu truy cập sẽ phải vật lộn để xử lý form của bạn. Hãy cho chúng tôi biết nếu bạn có bất kỳ mẹo truy cập bằng bàn phím nào của riêng bạn!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.