Tiêu điểm bàn phím

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 của chúng điều hướng. Những người bị hạn chế tạm thời về thể chất, chẳng hạn như bong gân 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 người 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, 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 kết hợp với phần mềm phóng to hoặc phần mềm đọc màn hình. Tuy nhiên, họ có thể sử dụng các lệnh phím tắt để điều hướng trên màn hình so với người dùng nhìn thấy.

Việc hỗ trợ bàn phím cho tất cả những người khuyết tật và hoàn cảnh này là rất quan trọng. Đáp phần lớn khả năng hỗ trợ tiếp cận của bàn phím tập trung vào tiêu điểm. Tiêu điểm là thành phần trên màn hình hiện nhận dữ liệu nhập từ bàn phím.

Trong học phần này, chúng tôi 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àm tâm điểm. Chiến lược phát hành đĩa đơn Mô-đun JavaScript bao gồm nhiều thông tin về quản lý tiêu điểm và tổ hợp phím cho các phần tử tương tác.

Thứ tự lấy tiêu điểm

Những phần tử mà người dùng bàn phím có thể di chuyển đến được gọi là có thể làm tâm điểm phần tử. Thứ tự tiêu điểm, còn được 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 được tập trung. Thứ tự tiêu điểm mặc định phải hợp lý, trực quan và phù hợp với hình ảnh thứ tự của một trang.

Đối với hầu hết 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ể được sắp xếp theo 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àm tâm điểm một cách tự nhiên, chẳng hạn như đường liên kết, hộp đánh dấu và mục nhập văn bản. Các phần tử HTML có thể làm tâm điểm một cách tự nhiên bao gồm hỗ trợ thứ tự thẻ tích hợp sẵn và 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 để thêm bất kỳ phần tử nào không thường nhận tiêu đ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 tập trung tự nhiên.

Chỉ mục thẻ

Thứ tự tiêu điểm bắt đầu bằng các phần tử có giá trị dương chỉ mục thẻ (nếu có) và chuyển từ số dương nhỏ nhất sang lớn nhất (chẳng hạn như 1, 2, 3). Sau đó, nó tiếp tục qua các phần tử có chỉ mục thẻ là 0 theo thứ tự của chúng trong DOM. Bất kỳ phần tử nào có chỉ mục thẻ âm sẽ bị xoá khỏi thứ tự lấy nét tự nhiên.

Khi chỉ mục thẻ bằng 0 (tabindex="0") được áp dụng cho các phần tử thường không thể làm tâm điểm, chúng được đượ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àm tâm điểm một cách tự nhiên, bạn phải hỗ trợ thêm cho bàn phím truy cập được hoàn toàn vào chúng.

Tương tự, nếu bạn 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ư nút không hoạt động cho đến khi một trường nhập dữ liệu được điền in – bạn nên thêm chỉ mục thẻ phủ định (tabindex="-1") vào phần tử này. Đang thêm một chỉ mục thẻ tiêu cực báo hiệu đến các công nghệ hỗ trợ và bàn phím rằng nên xoá nút khỏi thứ tự lấy nét tự nhiên. Nhưng đừng lo, bạn có thể sử dụng JavaScript để thêm tiêu điểm trở lại 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 điều chỉnh bằng cách sử dụng tabindex để minh hoạ khả năng của chế độ này đối với thứ tự lấy tiêu điểm. Đây là một ví dụ về những việc 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 giữa các trang. Điều này rất phù hợp cho việc điều hướng chung nhưng cũng có thể giúp người dùng chỉ dùng bàn phím khó dễ dàng truy cập vào trang web chính mà không phải nhấn phím tab nhiều lần.

Một cách để bỏ qua các nhóm đường liên kết thừa hoặc không hữu ích là thêm bỏ qua đường liên kết. Đường liên kết bỏ qua là đường liên kết cố định các liên kết chuyển đến một phần khác trên cùng một trang, sử dụng thẻ thay vì đưa người dùng đến một trang khác trên trang web hoặc nguồn. Đườ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 phải khi truy cập một trang web và có thể hiển thị hoặc ẩn giấu trực quan cho đến khi người dùng nhấp vào thẻ đó, 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à một đường liên kết bỏ qua đang hoạt động xuất hiện, đườ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à điều hướng chính. Nếu họ chọn không nhấp vào bỏ qua và tiếp tục nhấn phím Tab xuống DOM, chúng sẽ được gửi đến phần tử có thể làm tâm điểm.

Giống như tất cả các đường liên kết khác, đường liên kết bỏ qua cần cung cấp thông tin liên quan đến mục đích của liên kết. Thêm cụm từ "Chuyển đến nội dung chính" cho người dùng biết mà đường liên kết sẽ đưa họ đến. Có nhiều tuỳ chọn mã để lựa chọn khi cung cấp thêm ngữ cảnh cho các đường liên kết, chẳng hạn như aria-gắn nhãn, nhãn aria hoặc thêm nhãn này vào nội dung văn bản của phần tử <a>, như được 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ự tiêu điểm là một khía cạnh quan trọng của bàn phím khả năng hỗ trợ tiếp cận. Một điều quan trọng nữa là bạn cần quyết định phong cách của tiêu điểm đó. Bởi vì ngay cả khi thứ tự lấy nét rất tốt thì làm cách nào để người dùng biết được họ đang ở đâu trang mà không có kiểu phù hợp?

Chỉ báo lấy nét rõ ràng là một công cụ quan trọng trong việc thông báo cho người dùng về vị trí của họ mọi lúc trên . Thao tác 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 bạn nhìn thấy.

Đị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 những phần tử có thể làm tâm điểm trên trang web hoặc ứng dụng của bạn (một số phần tử dễ nhìn thấy hơn) so với những nhà xuất bản khác. Với tư cách người dùng chuyển thẻ thông qua trang, kiểu này được áp dụng dưới dạng phần tử nhận tiêu điểm bàn phím.

Nếu cho phép trình duyệt xử lý việc định kiểu tiêu điểm, thì bạn nên xem lại mã để xác nhận rằng giao diện của bạn sẽ không ghi đè giá trị mặc định của trình duyệt tạo kiểu. Một giá trị ghi đè thường được viết dưới dạng "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á tiêu điểm mặc định của trình duyệt kiểu chỉ báo, khiến người dùng gặp khó khăn trong việc điều hướng 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ể vượt ra ngoài kiểu trình duyệt mặc định và tạo một chỉ báo tập trung phù hợp với chủ đề của bạn. Khi tạ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 tiêu điểm có thể có nhiều dạng, như đường viền, đường viền, dấu gạch dưới, ô, thay đổi nền hoặc một số thay đổi rõ ràng khác về kiểu cách 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 phần tử đó.

Bạn có thể thay đổi kiểu chỉ báo tiêu điểm để đả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 thuộc tính nút chỉ báo tiêu điểm thành nền màu xanh dương. Khi trang có thẻ màu xanh dương nền, bạn có thể đặt cùng một kiểu tâm điểm của nút đó thành nền trắng.

Bạn có thể thay đổi kiểu phần tử tâm điểm dựa trên loại phần tử. Ví dụ: bạn có thể dùng đường gạch chân có nét đứt cho các đường liên kết nội dung, nhưng hãy chọn đường viền 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 tiêu điểm mà bạn có trên một trang—nhưng hãy đảm bảo giữ cho trang ở số lượng hợp lý để tránh không cần thiết nhầm lẫn.

Tổng kết

Để một trang web hoặc ứng dụng được coi là dễ tiếp cận, mọi thứ có thể được để truy cập bằng chuột thì cũng phải dùng bàn phím. Mô-đun này tập trung vào khía cạnh trực quan của khả năng hỗ trợ tiếp cận bằng bàn phím, đặc biệt là việc lấy tiêu điểm chỉ báo thứ tự và tiêu điểm.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về ARIA và HTML