Tập trung vào CSS

Bạn có bỏ qua các kiểu lấy nét vì chúng xấu không?

Giả sử bạn được trình bày với thiết kế ở trên. Nếu bạn chỉ lướt qua Tab, thì đó là chức năng — nhưng chúng tôi có thể đồng ý rằng đó không phải là điều đáng chú ý

Xóa đường viền tiêu điểm không tốt cho khả năng truy cập

Bạn có thể muốn loại bỏ các kiểu tiêu điểm. Chỉ có một vấn đề. Thật tệ cho khả năng tiếp cận. Đường viền tiêu điểm cung cấp phản hồi trực quan cho người dùng không thể sử dụng chuột hoặc bị khiếm thị khi sử dụng Tab trên bàn phím để điều hướng

Hãy lưu ý rằng tình trạng khuyết tật không chỉ đề cập đến những người khuyết tật vĩnh viễn. Bạn có thể bị suy yếu tạm thời do chấn thương, vì vậy số người bị suy yếu cao hơn bạn nghĩ

Chúng tôi có trách nhiệm làm cho mọi người có thể truy cập web

Phác thảo không hoạt động đối với các góc tròn

Hiện tại không có cách nào chỉ định bán kính đường viền cho đường viền, ngoài một số tính năng thử nghiệm cụ thể của trình duyệt

Sử dụng đường viền khiến bố cục thay đổi

Bố cục thay đổi từ đường viền khiến các phần tử của chúng tôi nhảy xung quanh. Nó có thể được giải quyết bằng cách đặt đường viền trên từng thành phần không có độ mờ, sau đó đưa độ mờ trở lại tiêu điểm. Tôi không ghét ý tưởng này, nhưng nó không hay lắm

Sử dụng bóng hộp

Điều này hoạt động cho mọi yếu tố có thể tập trung. Nó không chỉ đảm nhận các góc tròn giống nhau mà bạn còn có thể kiểm soát các thuộc tính khác như màu sắc, độ mờ, độ lệch và độ mờ. Bạn có thể đọc thêm về box-shadow tại đây

Lưu ý rằng chúng tôi cũng có thể tạo hoạt ảnh cho quá trình chuyển đổi

.element {
  transition: box-shadow 0.3s ease;
}

Phần kết luận

Khả năng tiếp cận là quan trọng. Đó là một chủ đề quan trọng đáng để hiểu. Không ai cố tình tạo ra trải nghiệm người dùng tồi. Nếu bạn nhận thức được và cố gắng làm cho trang web trở thành một nơi tốt hơn — đó mới là điều quan trọng

Trong thủ thuật nhanh này, tôi sẽ chỉ cho bạn cách tạo các kiểu tiêu điểm tốt hơn trên các phần tử biểu mẫu với lớp giả CSS có tên là

2

4. Hoặc, bằng tiếng Anh đơn giản, tôi sẽ chỉ cho bạn cách loại bỏ đường viền màu xanh này đúng cách

Lớp giả CSS. tập trung có thể nhìn thấy

Hãy xem video bên dưới, đăng ký kênh Tuts+ Youtube và xem bên dưới để biết phiên bản bằng văn bản của thủ thuật nhanh này

Kiểu lấy nét tốt hơn với CSS Pseudo-Class. tập trung có thể nhìn thấy

Loại bỏ kiểu lấy nét đầu vào [cách sai]

Khi bạn tạo một biểu mẫu đơn giản, tác nhân người dùng [trình duyệt] sẽ áp dụng các kiểu riêng của nó cho trạng thái tiêu điểm của các thành phần biểu mẫu [như kiểu nhập văn bản, vùng văn bản, v.v.]

Đây thực sự là một tính năng trợ năng quan trọng và nó cho phép người dùng có trải nghiệm về trang bị suy giảm bằng cách nào đó điều hướng và sử dụng biểu mẫu đúng cách. Khi một phần tử nằm trong tiêu điểm, các sự kiện bàn phím sẽ được áp dụng cho phần tử đó

Màu xanh lam #2360c5 rất rõ ràng mà các trình duyệt có xu hướng sử dụng theo mặc định là màu hiệu quả và thiết thực để sử dụng xét về khả năng truy cập, nhưng rất có thể màu này sẽ không hoạt động tốt với phần còn lại của thiết kế của bạn

Để loại bỏ hoàn toàn đường viền màu xanh lam này, chúng tôi có thể sử dụng CSS sau để nhắm mục tiêu tất cả các trạng thái tiêu điểm

1

:focus {

2

    outline: none;

3

    }

Điều đó giải quyết vấn đề của bạn từ một góc độ phong cách, nhưng khi thực hiện việc này, bạn sẽ xóa dấu hiệu trợ năng cho người dùng biết một cách trực quan yếu tố nào được tập trung. Nói cách khác, đó không phải là một ý kiến ​​hay

Thay đổi kiểu tiêu điểm đầu vào [đúng cách]

Hãy xem lớp giả

2

4. Điều này áp dụng khi một phần tử khớp với lớp giả

2

6 [nói cách khác. một phần tử đang được lấy nét]

Nó thậm chí còn đi xa hơn, cho phép chúng tôi phân biệt phương thức nhập liệu [ví dụ: liệu người dùng đang tập trung vào một yếu tố bằng bàn phím hay chuột]. Tôi sẽ trình bày cách bạn có thể xóa kiểu tiêu điểm cho người dùng chuột, nhưng vẫn giữ kiểu tiêu điểm cho những người dùng điều hướng các phần tử biểu mẫu bằng bàn phím

Ghi chú. đây không nhất thiết phải là một ví dụ về khả năng tiếp cận hoàn hảo, nhưng nó phục vụ mục đích của chúng tôi là thể hiện các khả năng của

2

4.  

Áp dụng một kiểu mặc định phác thảo

Hãy bắt đầu bằng cách xác định cách đường viền tiêu điểm của chúng tôi sẽ xuất hiện theo mặc định. Chúng tôi sẽ cung cấp cho các yếu tố tập trung một đường viền màu đỏ đồng nhất

1

:focus {

2

2

4

3

    }

Đây là những gì mang lại cho chúng ta. Điều quan trọng là bạn sẽ nhận thấy rằng tất cả các đầu vào và nút đều có đường viền màu đỏ khi được đặt tiêu điểm bằng bàn phím và chuột

Theo mặc định, trình duyệt sẽ không cung cấp cho các nút kiểu tiêu điểm hiển thị khi bạn nhấp vào chúng bằng chuột. Điều này ngụ ý rằng người dùng đang thực hiện một sự kiện bằng cách nhấp có chủ ý và không cần xem tiêu điểm. Tuy nhiên, nó sẽ thêm kiểu tiêu điểm khi nút được điều hướng qua bàn phím

Loại bỏ kiểu lấy nét cho kết hợp nút và chuột

Hãy mô phỏng hành vi này bằng cách loại bỏ các kiểu tiêu điểm cho nút khi được nhấp vào bằng chuột

Chúng tôi có thể thực hiện việc này bằng cách chọn bất kỳ yếu tố nào được đặt tiêu điểm, nhưng được trình duyệt

2

8 coi là

2

4. Như thế này

1

:focus {

3

2

____5

3

    }

Thêm kiểu nâng cao cho trình duyệt hỗ trợ

Là một cải tiến cuối cùng, chúng tôi có thể thêm đường viền màu tím cho bất kỳ phần tử nào có tiêu điểm và được coi là.

2

4 bởi trình duyệt

1

:focus {

9

2

2

1

3

2

3

Đây là bản demo kết quả

Phần kết luận

Điều đó kết thúc cách sử dụng lớp giả

2

4. Bây giờ bạn đã biết cách tạo các biểu mẫu thời trang và dễ tiếp cận. Để biết thêm chi tiết về cách trình duyệt xác định yếu tố nào nên và không nên đủ điều kiện cho

2

4, hãy xem video ở đầu trang

CSS tập trung là gì?

Bộ chọn tiêu điểm CSS là gì?

Tiêu điểm và hoạt động trong CSS là gì?

Tiêu điểm [] trong JavaScript là gì?