TABINDEX LÀ GÌ

admin - 02/04/2022 146

Length:MediumLanguages:url-selector#selectionChanged" data-controller="url-selector">EnglishEspañolBahasa IndonesiaItalianoPусскийTiếng Việt

Làm mang đến trang web của quý khách hàng có thể truy cập được đối với người dùng chỉ sử dụng bàn phím là một phần quan lại trọng vào bức ttinh quái khả năng truy tìm cập lớn hơn. Dưới đây là một số mẹo truy cập bàn phím mà người mua có thể nhanh cđợi cài đặt bằng HTML và CSS cơ bản.Quý Khách vẫn xem: Tabindex là gì

A11y từ Sơ khởi

Những mẹo này là một phần của Khả năng Truy cập Web: Hướng dẫn hoàn chỉnh, nơi chúng ta thu thập một loạt các hướng dẫn, bài viết, khóa học và sách điện tử, để giúp quý khách hàng hiểu về khả năng tróc nã cập website ngay từ đầu.

Bạn đang xem: Tabindex là gì

Khả năng Truy cập từ bàn phím là gì?

Bàn phím có thể là phương tiện chính để một số người dùng điều hướng các website. Ngày ni, Lúc hầu hết các giao diện website được thiết kế với bé trỏ chuột và ý tưởng tương tác cảm ứng, điều hướng thông qua bàn phím bị bỏ qua. Khả năng truy nã cập bằng bàn phím là thực tế để đảm bảo rằng người dùng có thể điều hướng hiệu quả và không bị cản trở chỉ bằng bàn phím của họ.

Ai có thể cần truy nã cập bằng bàn phím?

Đây là các nhóm chính đến khả năng truy vấn cập bằng bàn phím:

Người mù hoặc khiếm thị thường thích điều hướng các website với bàn phím chữ nổi. Người bị cụt hoặc những người bị cắt cụt bẩm sinch (hình thành không có bỏ ra hoặc tay chân, cụ thể là tay trong trường hợp này) thường sử dụng chức năng bắt chước phần cứng đặc biệt. Bất cứ ai chỉ đơn giản là không có khả năng tầm nã cập vào một bé chuột hoặc bàn di chuột.

1. Test website của quý khách mang lại việc tróc nã cập bàn phím

Mục tiêu quan liêu trọng nhất của khả năng tầm nã cập bàn phím là làm cho mọi yếu tố tương tác, chẳng hạn như liên kết và khung control có sẵn với phím Tab. Đây là cách người dùng chỉ sử dụng bàn phím điều hướng qua một trang web. Test khả năng truy tìm cập bàn phím của người mua thực sự khá dễ dàng: chỉ cần nhấn phím Tab và điều hướng từ đầu trang xuống dưới cùng, làm nổi bật các yếu tố active sầu.

Điều hướng các liên kết nkhô giòn vào footer trên trang Tuts+ bằng phím Tab

2. Tạo style :focus

CSS có một lớp giả :focus được kích hoạt lúc người dùng nhấp hoặc chạm vào một phần tử hoặc chọn nó bằng phím Tab. Trạng thái :focus chỉ áp dụng mang đến các phần tử có thể focus, cụ thể là , , , , và .

Xem thêm: Tổng Hợp Kiến Thức Về Mạch Tạo Xung Clock Là Gì ? Xung Clock Là Gì

Mỗi trình duyệt đều có style :focus mặc định riêng, thường là một đường viền màu Black chấm xung quanh thành phần hoặc ánh sáng mờ, Mặc dù nhiên nhiều nhà thiết kế thấy nó không hợp với sở thích của họ và sẽ loại bỏ tổng cộng. Đây thực sự là sai lầm số một làm hỏng khả năng truy hỏi cập bàn phím trên các website. Nếu bạn không thích style mặc định, hãy sử dụng thứ gì đó phù hợp với thiết kế trang web của quý khách.

Style :focus mặc định vào trình duyệt Google Chrome

Chọn một style mà dễ dàng nhận thấy, nhưng không chỉ dựa vào màu sắc. Dưới đây, một ví dụ khả thi có thể hoạt động tốt mang lại người dùng chỉ sử dụng bàn phím:

:focus outline: 3px solid red;

3. Sử dụng Thiết kế không màu mang lại các liên kết

Các siêu liên kết không nên chỉ được phân biệt bằng màu sắc. Nguyên tắc này thường được đề cập liên quan tiền đến khả năng tiếp cận thị giác, vì những người có thị lực kém nhận thấy sự khác biệt giữa các màu nhất định là rất khó. Tuy nhiên, các liên kết rõ ràng cũng rất quan liêu trọng đối với khả năng tầm nã cập bàn phím. Người dùng chỉ sử dụng bàn phím sẽ có thể phát hiện ra các liên kết nkhô nóng nhất có thể. Điều này giúp họ quét website và nhận thấy cách điều hướng đến phần họ quan tiền tâm.

Tương tự như style :focus, siêu liên kết cũng đi kèm với kiểu trình duyệt mặc định gạch chân màu xanh domain authority trời vào hầu hết các trường hợp. Tuy nhiên, các nhà thiết kế thường xuyên loại bỏ gạch chân và chỉ sử dụng màu sắc để chỉ ra sự hiện diện của một liên kết. Nếu khách hàng xóa phần gạch chân mặc định thì hãy luôn sử dụng một thiết kế không màu khác phù hợp với thiết kế website của khách hàng, chẳng hạn như viền, biểu tượng.

Liên kết rõ ràng trên gov.uk: (1) hyperlink (2) focused (3) visited

Bạn có thể sử dụng thuộc tính title để mô tả một nội dung liên kết, nhưng nó chỉ hiển thị khi ai đó di chuyển lên liên kết. Người dùng chỉ sử dụng bàn phím không có quyền tầm nã cập vào các sự kiện di chuột, vì vậy đừng bao giờ đặt thông tin quan liêu trọng trong thuộc tính title. Nó cũng không được tính là một kiểu thiết kế không màu. Ví dụ: đừng bao giờ làm điều này:

Cliông xã hereThay vào đó, hãy làm điều này:

Important informationWCAG 2.0 cũng chình ảnh báo về các vấn đề về khả năng truy nã cập của thuộc tính title. Hoặc là sử dụng nó một cách cẩn thận hoặc không nên sử dụng nó.

Xem thêm: Kế Hoạch Gây Quỹ Từ Thiện Năm 2015, Ý Tưởng Từ Thiện

4. Sử dụng các phần tử điều khiển gốc

Form là các phần tử tương tác, vì vậy chúng cần có thể truy cập thông qua bàn phím. Người dùng chỉ sử dụng bàn phím sẽ có thể điền vào khung, nhấn nút, sử dụng slider, chọn tùy chọn và điều khiển một cách dễ dàng. Nếu người tiêu dùng có bất kỳ form nào trên trang web của mình, quý khách nên demo từng cái một, sử dụng phím Tab. Hãy nghĩ về form đăng ký, khung bản tin, size đăng nhập, size bình luận, và vv.

Cách tốt nhất để tạo các form có thể truy tìm cập là sử dụng các control gốc bất cứ nơi nào có thể. Các control gốc đi kèm với khả năng truy nã cập bàn phím tích hợp, có nghĩa là chúng có thể focus và phản ứng đối với các sự kiện nhấn phím theo mặc định. Chúng là:

Ví dụ: người dùng có thể tạo một slider có thể truy tìm cập bằng bàn phím với HTML sau:

Người dùng bàn phím trước tiên có thể foucs nó bằng phím Tab, sau đó di chuyển slider lên và xuống bằng Dấu cách.

Nếu người dùng cần sử dụng thẻ HTML không thể focus đến một phần tử tương tác vì một số lý bởi vì, quý khách hàng có thể làm mang lại nó có thể focus bằng thuộc tính tabindex="0". Chẳng hạn, ở đây, một