Nhiều người sử dụng bàn phím (hoặc phần mềm/phần cứng khác bắt chước chức năng của bàn phím, chẳng hạn như thiết bị chuyển đổi) làm phương tiện chính để điều hướng. Những người gặp phải các hạn chế tạm thời về thể chất (chẳng hạn như bong bóng cổ tay hoặc khuyết tật vận động tinh) như ống cổ tay, cũng như một số người không bị khuyết tật, có thể chọn sử dụng bàn phím để di chuyển trên một trang do lựa chọn ưu tiên cá nhân, tính hiệu quả hoặc phần cứng bị hỏng.
Người dùng khiếm thị hoặc có thị lực kém có thể sử dụng bàn phím để điều hướng cùng với phần mềm phóng to hoặc trình đọc màn hình. Tuy nhiên, họ có thể sử dụng các lệnh phím tắt khác với thao tác trên màn hình của người dùng sáng mắt.
Việc hỗ trợ bàn phím cho tất cả các tình trạng khuyết tật và trường hợp này là rất quan trọng. Một phần lớn hỗ trợ tiếp cận của bàn phím tập trung vào tiêu điểm. Tâm điểm là phần tử trên màn hình hiện nhận dữ liệu đầu vào từ bàn phím.
Trong mô-đun này, chúng tôi tập trung vào cấu trúc HTML và kiểu CSS cho các phần tử bàn phím và có thể làm tâm điểm. Mô-đun JavaScript cung cấp thêm thông tin về việc quản lý tiêu điểm và thao tác nhấn phím cho các phần tử tương tác.
Thứ tự tập trung
Các phần tử mà người dùng bàn phím có thể di chuyển đến được gọi là phần tử có thể làm tâm điểm. Thứ tự tiêu điểm, còn gọi là thứ tự thẻ hoặc thứ tự điều hướng, là thứ tự các phần tử nhận được tiêu điểm. Thứ tự tiêu điểm mặc định phải logic, trực quan và khớp với thứ tự hình ảnh của trang.
Đối với hầu hết các ngôn ngữ, thứ tự tiêu điểm bắt đầu ở đầu trang và kết thúc ở cuối trang, di chuyển từ trái sang phải. Tuy nhiên, một số ngôn ngữ được đọc từ phải sang trái, vì vậy, ngôn ngữ chính của trang có thể đảm bảo thứ tự tiêu điểm khác.
Theo mặc định, thứ tự tâm điểm bao gồm các phần tử HTML có thể làm tâm điểm tự nhiên, chẳng hạn như đường liên kết, hộp đánh dấu và văn bản nhập. Các phần tử HTML có thể lấy tiêu điểm tự nhiên bao gồm tính năng hỗ trợ thứ tự thẻ tích hợp sẵn và cách xử lý sự kiện bàn phím cơ bản.
Bạn có thể cập nhật thứ tự tiêu điểm để thêm mọi phần tử thường không nhận được tâm điểm, chẳng hạn như các phần tử HTML không tương tác, thành phần tuỳ chỉnh hoặc các phần tử có ARIA ghi đè ngữ nghĩa tiêu điểm tự nhiên.
Chỉ mục thẻ
Thứ tự tiêu điểm bắt đầu bằng các phần tử có thuộc tính chỉ mục thẻ dương (nếu có) và chuyển từ số dương nhỏ nhất đến số lớn nhất (chẳng hạn như 1, 2, 3). Sau đó, mô-đun này sẽ tiếp tục chạy qua các phần tử có chỉ mục thẻ bằng 0 theo thứ tự của các phần tử đó trong DOM. Mọi phần tử có chỉ mục thẻ âm sẽ bị xoá khỏi thứ tự tiêu điểm tự nhiên.
Khi áp dụng chỉ mục thẻ bằng 0 (tabindex="0") cho các phần tử thường không thể lấy tiêu điểm, các phần tử này sẽ được thêm vào thứ tự tiêu điểm tự nhiên của trang theo cách chúng xuất hiện trong DOM. Tuy nhiên, không giống như các phần tử HTML có thể lấy tiêu điểm tự nhiên, bạn phải hỗ trợ thêm bàn phím để các phần tử đó có thể truy cập được hoàn toàn.
Tương tự, nếu có một phần tử thường có thể làm tâm điểm nhưng không hoạt động (chẳng hạn như một nút không hoạt động cho đến khi trường đầu vào được điền vào), thì bạn nên thêm chỉ mục thẻ âm (tabindex="-1") vào phần tử này. Việc thêm chỉ mục thẻ phủ định sẽ báo hiệu vào các công nghệ hỗ trợ và bàn phím rằng nút này cần được xoá khỏi thứ tự tiêu điểm tự nhiên. Nhưng đừng lo – bạn có thể sử dụng JavaScript để thêm lại tiêu điểm vào phần tử khi cần.
Trong ví dụ này, thuộc tính tabindex đã được thêm vào các phần tử không nhận được tâm điểm một cách tự nhiên. Thứ tự của các phần tử đã được điều chỉnh bằng tabindex để minh hoạ sức mạnh mà thành phần này có thể có theo thứ tự tiêu điểm. Đây là ví dụ về những điều không nên làm!
Bỏ qua đường liên kết
Ngày nay, hầu hết các trang web đều có một danh sách dài gồm các đường liên kết trình đơn trong tiêu đề chính của trang, nhất quán với các trang. Thao tác này rất hữu ích cho việc điều hướng chung nhưng có thể khiến người dùng chỉ sử dụng bàn phím khó có thể dễ dàng truy cập vào nội dung chính của trang web mà không phải nhấn phím tab nhiều lần.
Một cách để chuyển qua các nhóm đường liên kết thừa hoặc không hữu ích là thêm đường liên kết bỏ qua. Đường liên kết bỏ qua là các đường liên kết neo chuyển đến một phần khác của cùng một trang, sử dụng mã nhận dạng của phần đó, thay vì đưa người dùng đến một trang khác trên trang web hoặc một tài nguyên bên ngoài. Đường liên kết bỏ qua thường được thêm vào dưới dạng phần tử có thể làm tâm điểm đầu tiên mà người dùng sẽ gặp khi truy cập vào một trang web. Các đường liên kết này có thể hiển thị hoặc ẩn đi cho đến khi người dùng sử dụng thẻ, tuỳ thuộc vào mục đích thiết kế.
Khi người dùng nhấn phím thẻ và một đường liên kết bỏ qua đang hoạt động xuất hiện, thao tác đó sẽ gửi tiêu điểm bàn phím đến đường liên kết bỏ qua. Người dùng có thể nhấp vào đường liên kết bỏ qua và bỏ qua phần tiêu đề và phần điều hướng chính. Nếu họ chọn không nhấp vào đường liên kết bỏ qua và tiếp tục di chuyển xuống DOM, họ sẽ được chuyển đến phần tử có thể lấy tiêu điểm tiếp theo.
Giống như tất cả các đường liên kết, điều quan trọng là đường liên kết bỏ qua phải có ngữ cảnh về mục đích của đường liên kết. Thêm cụm từ "Bỏ qua để đến nội dung chính" sẽ cho người dùng biết đường liên kết sẽ đưa họ đến đâu. Có nhiều cách lập trình để bạn lựa chọn khi cung cấp bối cảnh bổ sung cho đường liên kết, chẳng hạn như aria-labelledby, aria-label hoặc thêm phần tử này vào nội dung văn bản của phần tử <a>, như minh hoạ trong ví dụ dưới đây.
Chỉ báo lấy nét
Như bạn vừa tìm hiểu, thứ tự tâm điểm là một khía cạnh quan trọng để hỗ trợ tiếp cận bàn phím. Bạn cũng cần quyết định cách tạo kiểu cho tâm điểm đó. Bởi vì ngay cả khi thứ tự tiêu điểm rất tốt, làm thế nào người dùng có thể biết vị trí của họ trên trang khi không có kiểu phù hợp?
Chỉ báo lấy tiêu điểm hiển thị là một công cụ quan trọng để thông báo cho người dùng về vị trí của họ mọi lúc trên trang. Tính năng này đặc biệt quan trọng đối với những người dùng chỉ sử dụng bàn phím khiếm thị.
Định kiểu mặc định của trình duyệt
Ngày nay, mỗi trình duyệt web hiện đại đều có một kiểu hình ảnh mặc định khác nhau áp dụng cho các phần tử có thể lấy tiêu điểm trên trang web hoặc ứng dụng của bạn – một số trình duyệt dễ nhìn hơn so với các trình duyệt khác. Khi người dùng sử dụng các thẻ trên trang, kiểu này được áp dụng khi phần tử nhận được tiêu điểm bàn phím.
Nếu cho phép trình duyệt xử lý kiểu tiêu điểm, bạn cần xem lại mã của mình để xác nhận rằng giao diện sẽ không ghi đè kiểu mặc định của trình duyệt. Cơ chế ghi đè thường được viết là "outline: 0" hoặc "outline: none" trong biểu định kiểu của bạn. Đoạn mã nhỏ này có thể xoá kiểu chỉ báo tiêu điểm mặc định của trình duyệt, khiến người dùng gặp rất khó khăn khi di chuyển trên trang web hoặc ứng dụng của bạn.
a:focus {
outline: none; /* don't do this! */
}
a:focus {
outline: auto 5px Highlight; /* for non-webkit browsers */
outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}
Kiểu tùy chỉnh
Tất nhiên, bạn có thể không chỉ dựa vào kiểu trình duyệt mặc định mà còn tạo một chỉ báo tiêu điểm tuỳ chỉnh bổ sung cho giao diện của mình. Khi tạo chỉ báo tiêu điểm tuỳ chỉnh, bạn có rất nhiều quyền tự do để sáng tạo!
Hình dạng chỉ báo lấy nét có thể có nhiều dạng, chẳng hạn như đường viền, đường viền, dấu gạch dưới, hộp, thay đổi nền hoặc một số thay đổi rõ ràng khác về kiểu cách mà không chỉ dựa vào màu sắc để cho biết tiêu điểm của bàn phím đang hoạt động trên phần tử đó.
Bạn có thể thay đổi kiểu chỉ báo lấy nét để đảm bảo kiểu này không bị mất trong nền. Ví dụ: khi một trang có nền trắng, bạn có thể đặt chỉ báo lấy tiêu điểm của nút thành nền màu xanh dương. Khi trang có nền màu xanh dương, bạn có thể đặt kiểu tiêu điểm nút tương tự thành nền trắng.
Bạn có thể thay đổi kiểu phần tử tiêu điểm dựa trên loại phần tử. Ví dụ: bạn có thể sử dụng đường gạch chân chấm cho các đường liên kết trong phần thân nhưng hãy chọn đường viền bo tròn cho phần tử nút.
Không có quy tắc nào về số lượng kiểu chỉ báo lấy tiêu điểm bạn có trên một trang. Tuy nhiên, hãy nhớ duy trì ở một số lượng hợp lý để tránh nhầm lẫn không cần thiết.
Tổng kết
Để một trang web hoặc ứng dụng được coi là dễ truy cập, mọi nội dung có thể truy cập bằng chuột cũng phải truy cập được bằng bàn phím. Mô-đun này tập trung vào khía cạnh hình ảnh hỗ trợ tiếp cận bằng bàn phím, cụ thể là thứ tự lấy nét và chỉ báo lấy nét.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về ARIA và HTML
Ví dụ nào về kiểu CSS :focus dễ truy cập nhất trên nền trắng?
outline: 0.5rem solid yellow;background-color:black;text-decoration: dotted underline 2px blue;outline: none; text-decoration:none; background:none;Mục đích của đường liên kết bỏ qua là gì?