Tiêu điểm tab CSS

Điều quan trọng là phải nâng cao khả năng sử dụng bàn phím bằng cách đảm bảo rằng tiêu điểm di chuyển một cách hợp lý qua các điều khiển trên trang và có dấu hiệu hiển thị rõ ràng về điều khiển nào hiện đang có tiêu điểm

• Đảm bảo rằng thứ tự tiêu điểm là hợp lý. Thứ tự tiêu điểm thường khớp với thứ tự mã, vì vậy hãy làm những gì bạn có thể để đảm bảo rằng thứ tự tiêu điểm mong muốn khớp với bố cục trực quan của các điều khiển. Không sử dụng thuộc tính tabindex với bất kỳ giá trị nào lớn hơn 0 nhằm thay đổi thứ tự tiêu điểm của điều khiển. Điều này có thể dẫn đến những thay đổi không thể đoán trước đối với thứ tự tiêu điểm, chẳng hạn như nếu các điều khiển bổ sung sẽ được thêm vào trang sau đó
• Cung cấp một dấu hiệu trực quan rõ ràng về tiêu điểm. Sử dụng CSS để cung cấp chỉ báo trực quan rõ ràng về thời điểm liên kết, nút và điều khiển đang hoạt động khác nhận được tiêu điểm, chẳng hạn như thông qua đường viền hoặc thay đổi màu văn bản hoặc màu nền hoặc tốt hơn là kết hợp các hiệu ứng đó. Hiệu ứng tiêu điểm mặc định của trình duyệt thường không đủ rõ ràng về mặt trực quan và đôi khi các chỉ báo tiêu điểm đó có thể vô tình bị chặn khi sử dụng các tệp CSS đặt lại. Đối với các điều khiển tùy chỉnh vốn không thể đặt tiêu điểm, chẳng hạn như div hoặc span, hãy sử dụng CSS để áp dụng hiệu ứng tiêu điểm trực quan vì trình duyệt sẽ không cung cấp bất kỳ dấu hiệu gốc nào
• Hiển thị các phần tử ẩn khi chúng có tiêu điểm. Coi chừng các điều khiển ẩn trực quan theo thứ tự tiêu điểm. Chúng có thể gây nhầm lẫn cho người dùng bàn phím có thị giác. Nếu một điều khiển không được phép hoạt động, chẳng hạn như một mục menu trong menu thả xuống chưa được mở rộng, thì điều khiển đó sẽ không thể nhận được tiêu điểm. Tuy nhiên, nếu một điều khiển bị ẩn nhưng có sẵn để nhận tiêu điểm, chẳng hạn như liên kết "bỏ qua đến nội dung chính", thì điều khiển đó sẽ hiển thị khi nhận được tiêu điểm

thử nghiệm

Sử dụng phím Tab để di chuyển qua từng thành phần hoạt động trên một trang

• Tiến trình thông qua các phần tử có hợp lý không, không có các bước nhảy bất ngờ đến các vị trí khác nhau trên trang?
• Có dấu hiệu trực quan rõ ràng cho từng yếu tố khi nó được tập trung không?

Thêm thông tin

• Hiểu SC 2. 4. 3—Lệnh lấy nét (WAI)
• Hiểu SC 2. 4. 7—Có thể nhìn thấy tiêu điểm (WAI)
• Tại sao khả năng sử dụng bàn phím quan trọng hơn bạn nghĩ  và  Thiết kế trải nghiệm bàn phím tốt hơn

Trong hầu hết các trường hợp, các phần tử tương tác phải có tiêu điểm theo thứ tự xuất hiện trong mã nguồn. Điều này giúp những người đang sử dụng bàn phím hoặc thiết bị đầu vào thay thế theo dõi tiêu điểm theo thứ tự hợp lý

Thứ tự các phần tử xuất hiện trong nguồn tài liệu phải phản ánh thứ tự chúng xuất hiện một cách trực quan

ví dụ

✗ Ví dụ xấu

Thuộc tính

<button>first button</button> 
<button disabled>second button</button>
<button>third button</button>

<button>first button</button> 
<button disabled>second button</button>
<button>third button</button>

<button>first button</button> 
<button>second button</button>
<button tabindex="1">third button</button>

Cách duy nhất để đảm bảo rằng một phần tử tương tác sẽ nhận được tiêu điểm sau phần tử "nút thứ ba" là cung cấp cho nó ___0_______2 rồi cung cấp phần tử tiếp theo 

<button>first button</button> 
<button disabled>second button</button>
<button>third button</button>

<button>first button</button> 
<button disabled>second button</button>
<button>third button</button>

✓ Ví dụ điển hình

Đối với các nút, liên kết và các yếu tố tương tác khác vốn có thể đặt tiêu điểm, chiến lược tốt nhất là tránh sử dụng hoàn toàn thuộc tính

<button>first button</button> 
<button disabled>second button</button>
<button>third button</button>

<button>first button</button> 
<button disabled>second button</button>
<button>third button</button>

✓ Ví dụ về nút tùy chỉnh

Thuộc tính  tabindex hữu ích cho việc quản lý tiêu điểm trong một số trường hợp.

Khi tạo các phần tử tương tác tùy chỉnh (giống như khi xây dựng một thành phần web), chúng không phải lúc nào cũng tự động có các đặc điểm như khả năng tập trung được tích hợp vào chúng. Bạn phải cung cấp những thứ này theo cách thủ công. Để làm cho một phần tử tùy chỉnh có thể đặt tiêu điểm như một

<button>first button</button> 
<button disabled>second button</button>
<button>third button</button>

<button>first button</button> 
<button disabled>second button</button>
<button>third button</button>

<button>first button</button> 
<button disabled>second button</button>
<button>third button</button>

<my-button role="button" tabindex="0">first button</my-button> 
<my-button role="button" tabindex="0">second button</my-button> 
<my-button role="button" tabindex="0">third button</my-button>

Trong ví dụ mã trên, các phần tử

<button>first button</button> 
<button disabled>second button</button>
<button>third button</button>

✓ Vô hiệu hóa bằng <my-button role="button" tabindex="0">first button</my-button> <my-button role="button" tabindex="0">second button</my-button> <my-button role="button" tabindex="0">third button</my-button> 0

Các phần tử tùy chỉnh không hỗ trợ thuộc tính

<my-button role="button" tabindex="0">first button</my-button> 
<my-button role="button" tabindex="0">second button</my-button> 
<my-button role="button" tabindex="0">third button</my-button>

<button>first button</button> 
<button disabled>second button</button>
<button>third button</button>

<my-button role="button" tabindex="0">first button</my-button> 
<my-button role="button" tabindex="0">second button</my-button> 
<my-button role="button" tabindex="0">third button</my-button>

<my-button role="button" tabindex="0">first button</my-button> 
<my-button role="button" tabindex="-1">second button</my-button> 
<my-button role="button" tabindex="0">third button</my-button>

Trong ví dụ mã trên, nút thứ hai không thể đặt tiêu điểm. Vì vậy, tiêu điểm di chuyển trực tiếp từ nút đầu tiên sang nút thứ ba. Để đảm bảo rằng các kiểu bị vô hiệu hóa được mô phỏng cho các phần tử tùy chỉnh phù hợp với các kiểu bị vô hiệu hóa của các nút tiêu chuẩn, bạn có thể sử dụng bộ chọn thuộc tính trong CSS của mình

button[disabled], [role="button"][tabindex="-1"] {
  opacity: 0.6; /* fade the element out, to reduce its visual affordance */
}

biên tập mã

Kiểm tra các giá trị tabindex trong các ví dụ trước bằng trình chỉnh sửa mã này. Đảm bảo thử nghiệm bằng cách thay đổi và xóa thuộc tính

<button>first button</button> 
<button disabled>second button</button>
<button>third button</button>

Xem các giá trị chỉ số tab kiểm tra Bút của HUIT - Web, UX và Digital Accessibility Services (@hwpdas) trên CodePen

Xem thêm. Cung cấp chỉ báo tiêu điểm hợp lý và hiển thị ✎ , Hỗ trợ tương tác bàn phím ✎ , Mù , Motor impairment, Keyboard ✎, Speech recognition, Switch-based input, Operable, Controls, Inputs, Links, HTML, JavaScript

Tất cả các yếu tố tương tác phải có tiêu điểm để chúng có thể được kích hoạt bằng chuột, bàn phím, phần mềm nhận dạng giọng nói, thiết bị chuyển đổi đầu vào và các phương thức nhập liệu khác

Họ cũng nên cho biết khi nào họ đang tập trung để người dùng biết họ hiện đang tương tác với phần tử nào. Đây là lúc các phong cách lấy nét phát huy tác dụng

ví dụ

✓ Ví dụ điển hình

Tất cả các trình duyệt đều hỗ trợ các kiểu tiêu điểm cơ bản theo mặc định thông qua biểu định kiểu tác nhân người dùng của chúng. Các kiểu tiêu điểm mặc định của trình duyệt thay đổi từ các vòng màu xanh lam (Chrome) đến các đường viền chấm (Firefox). Để hỗ trợ các kiểu tiêu điểm cơ bản, không loại bỏ kiểu tác nhân người dùng trừ khi bạn thay thế nó bằng một thứ khác

✗ Ví dụ xấu

Để loại bỏ các kiểu tiêu điểm của tác nhân người dùng trong hầu hết các trình duyệt, bạn có thể cung cấp khai báo

<my-button role="button" tabindex="0">first button</my-button> 
<my-button role="button" tabindex="0">second button</my-button> 
<my-button role="button" tabindex="0">third button</my-button>

p a:focus {
  outline: none; /* this is not advised */
}

✓ Cải thiện chỉ báo tiêu điểm trực quan

Đường viền tiêu điểm chấm mặc định do một số trình duyệt cung cấp không rõ ràng lắm và nó không được áp dụng cho các điều khiển tùy chỉnh đã được đưa vào thứ tự tiêu điểm. Vì vậy, bạn cần cung cấp kiểu dáng trực quan rõ ràng để hiển thị điều khiển nào có tiêu điểm

Bạn có thể thêm đường viền xung quanh điều khiển (điều này có thể đặc biệt hiệu quả đối với các nút) hoặc thay đổi màu của văn bản hoặc thay đổi màu nền (hoặc kết hợp các màu đó). Cho dù bạn chọn phương pháp nào, hãy tránh tạo ra các hiệu ứng động không mong muốn, điều này có thể xảy ra nếu các đường viền được áp dụng không phù hợp hoặc nếu kích thước văn bản bị thay đổi

Trong ví dụ này, để tránh các hiệu ứng dự kiến ​​đó, CSS được sử dụng để thay đổi màu nền của liên kết văn bản đoạn văn khi nó nhận được tiêu điểm, làm nổi bật nó thành màu vàng

p a:focus {
  outline: none; 
  background: #fea;
}

Xem thêm. Cung cấp chỉ báo tiêu điểm rõ ràng và hợp lý ✎ , Thị lực kém , Suy giảm vận động< , Keyboard ✎, Speech recognition, Switch-based input, Operable, Controls, Links, CSS

Chỉ ra trực quan yếu tố nào có tiêu điểm là điều quan trọng để điều hướng bàn phím hiệu quả. Điều quan trọng nữa là đảm bảo rằng chỉ những phần tử có sẵn trực quan để tương tác mới có thể được đặt tiêu điểm. Nếu một phần tử đang hoạt động được dự định là không khả dụng ở một trạng thái cụ thể và nó bị ẩn khỏi chế độ xem, thì phần tử đó sẽ không thể nhận được tiêu điểm

Việc phải chuyển qua các điều khiển vô hình để tiếp cận những điều khiển hiển thị là điều khó khăn và có khả năng gây nhầm lẫn cho những người dùng sáng mắt đang điều hướng trang bằng bàn phím. Ngoài ra, người dùng trình đọc màn hình sẽ nghe thấy sự hiện diện của các điều khiển được dự định ẩn khi sử dụng

ví dụ

✓ Ví dụ tốt

Trong ví dụ này, một menu con không được tiết lộ được ẩn bằng cách sử dụng

<my-button role="button" tabindex="0">first button</my-button> 
<my-button role="button" tabindex="0">second button</my-button> 
<my-button role="button" tabindex="0">third button</my-button>

<my-button role="button" tabindex="0">first button</my-button> 
<my-button role="button" tabindex="0">second button</my-button> 
<my-button role="button" tabindex="0">third button</my-button>

<a href="#" aria-haspopup="true" role="button" aria-expanded="false">Good example</a>
<ul aria-label="submenu" style="display:none">
  <li><a href="#">News</a></li><!-- not focusable -->
  <li><a href="#">Contact Us</a></li>
</ul>

Khi người dùng nhấp vào liên kết

<my-button role="button" tabindex="0">first button</my-button> 
<my-button role="button" tabindex="0">second button</my-button> 
<my-button role="button" tabindex="0">third button</my-button>

<my-button role="button" tabindex="0">first button</my-button> 
<my-button role="button" tabindex="0">second button</my-button> 
<my-button role="button" tabindex="0">third button</my-button>

<my-button role="button" tabindex="0">first button</my-button> 
<my-button role="button" tabindex="-1">second button</my-button> 
<my-button role="button" tabindex="0">third button</my-button>

<a href="#" aria-haspopup="true" role="button" aria-expanded="true">Good example</a>
<ul aria-label="submenu" style="display:block">
  <li><a href="#">News</a></li> <!-- focusable -->
  <li><a href="#">Contact Us</a></li>
</ul>

✗ Ví dụ xấu

Một cách khác để ẩn menu con khỏi chế độ xem là đặt

<my-button role="button" tabindex="0">first button</my-button> 
<my-button role="button" tabindex="-1">second button</my-button> 
<my-button role="button" tabindex="0">third button</my-button>

<my-button role="button" tabindex="0">first button</my-button> 
<my-button role="button" tabindex="-1">second button</my-button> 
<my-button role="button" tabindex="0">third button</my-button>

<a href="#" aria-haspopup="true" role="button" aria-expanded="false">Bad example</a>
<ul aria-label="submenu" style="height:0;overflow:hidden">
  <li><a href="#">News</a></li> <!-- focusable -->
  <li><a href="#">Contact Us</a></li>
</ul>

✓ Ví dụ tốt

Một ngoại lệ đối với quy tắc không bao gồm các điều khiển ẩn theo thứ tự tiêu điểm là các thành phần sẽ hiển thị sau khi chúng được đặt tiêu điểm, chẳng hạn như bỏ qua các liên kết. Liên kết bỏ qua là công cụ hỗ trợ điều hướng cung cấp phương tiện cho người dùng bàn phím bỏ qua các thanh điều hướng và chuyển trực tiếp đến nội dung trang chính, giúp truy cập nội dung quan trọng dễ dàng hơn

Trong trường hợp như vậy, một cách triển khai là ẩn các liên kết này khỏi chế độ xem theo mặc định nhưng vẫn được đưa vào thứ tự tiêu điểm của trang. Khi họ nhận được tiêu điểm, văn bản liên kết (ví dụ: "Chuyển đến nội dung chính") sẽ hiển thị để người dùng bàn phím biết về sự hiện diện của liên kết và có thể chọn theo dõi nếu họ muốn

Băng hình. Menu con ẩn và tiêu điểm với NVDA và Firefox

biên tập mã

Có sẵn một trình chỉnh sửa mã để khám phá cách xử lý tiêu điểm tốt và xấu liên quan đến các điều khiển không hoạt động. Hãy thử di chuyển tiêu điểm qua cấu trúc menu bằng phím TAB để xem các ví dụ tốt và xấu so sánh như thế nào

Xem cách xử lý tiêu điểm tốt và xấu của Bút liên quan đến các điều khiển không hoạt động của HUIT - Web, UX và Digital Accessibility Services (@hwpdas) trên CodePen

Tôi có thể đặt tiêu điểm bằng CSS không?

Tôi nên sử dụng tiêu điểm hay tiêu điểm có thể nhìn thấy?