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