Tabindex là gì

post-promotion-placement#checkSidebarAdDisplayCondition" data-controller="scroll-position sticky-ad post-promotion-placement ">
Read Time:8 minsLanguages:url-selector#selectionChanged" data-controller="url-selector">EnglishEspañolBahasa IndonesiaItalianoPусскийTiếng Việt

Making your trang web accessible for keyboard-only users is an important part of the bigger accessibility picture. Here are some keyboard accessibility tips you can quickly implement using basic HTML and CSS.

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

A11y From the Beginning

These tips are part of Web Accessibility: the Complete Learning Guide, where we’ve collected a range of tutorials, articles, courses, & ebooks, khổng lồ help you understvà website accessibility from the beginning.

What is Keyboard Accessibility?

A keyboard can be the primary means for some users lớn navigate websites. Nowadays, when most web interfaces are designed with mouse cursors and touch interaction in mind, keyboard navigation is neglected. Keyboard accessibility is the practice of making sure that users can navigate efficiently và unhindered using just their keyboard.

Who Might Need Keyboard Accessibility?

These are the main target groups of keyboard accessibility:

Blind or visually impaired users frequently prefer to lớn navigate websites with specific Braille keyboards.Amputees or those with congenital amputation (birth without a limb or limbs, specifically hands in this case) often use special hardware mimicking keyboard functionality.Anyone who simply doesn’t have access to a functioning mouse or touchpad.

1. Test Your Site for Keyboard Accessibility

The most important goal of keyboard accessibility is khổng lồ make every interactive element, such as link and form controls, available with the Tab key. This is how keyboard-only users navigate through a website page. Testing your website for keyboard accessibility is actually pretty easy: just press the Tab key và navigate from the top of the page to lớn the bottom, highlighting active sầu elements as you go.

Navigating quiông xã links in the Tuts+ footer with the Tab key

Observe sầu how easy or difficult it is lớn get to the main content, cliông chồng a menu thành phầm, fill in a khung, operate a slider, or follow your current position on the page. You can also thử nghiệm the reverse direction using the Shift + Tab keyboard shortcut.

Xem thêm: Hướng Dẫn Dùng Ultraiso Để Cài Game, Hướng Dẫn Cài Đặt Game Và Phần Mềm Bằng Ổ Đĩa Ảo

2. Create Noticeable :focus Styles

CSS has a :focus pseudo-class that is triggered when a user clicks or taps on an tòa tháp, or selects it with the Tab key. The :focus state only applies to focusable elements, namely , , , , , và .

Every browser comes with its own default :focus styles–usually a dotted blaông chồng outline around the element, or a blurred glow, however many designers find it not to lớn their taste và will completely remove it. This is actually the number one mistake that ruins keyboard accessibility on website pages. If you don’t lượt thích the mặc định styles, use something that matches your website’s kiến thiết. 

Default :focus styles in Google Chrome browser

Choose a style that’s easily noticeable but doesn’t rely solely on colors. Here’s a possible example that can work well for keyboard-only users:

:focus outline: 3px solid red;

3. Use Non-Màu sắc Designators for Links

Hyperlinks shouldn’t be distinguished only by color. This principle is usually mentioned in relation lớn visual accessibility, as people with low vision find the differences between certain colors difficult lớn discern. However, clearly visible links are also important for keyboard accessibility. Keyboard-only users should be able to lớn spot liên kết as quickly as possible. This helps them scan the page và figure out how lớn navigate to lớn the part they are interested in.

Similarly lớn :focus styles, hyperlinks also come with mặc định browser styling— xanh underlines in most cases. However, designers frequently remove the underline and only use colors to lớn indicate the presence of a links. If you remove sầu the mặc định underline always use another non-color designator that matches your website design, such as borders, icons, or outlines.

Clear liên kết on (1) hyperliên kết (2) focused (3) visited

You can use the title attribute khổng lồ describe a link’s content, but it only becomes visible when someone hovers the link. Keyboard-only users don’t have sầu access to lớn hover events, so never place crucial information in the title attribute. It also doesn’t count as a non-color designator. For example, never do this:

Cliông xã hereInstead, bởi vì this:

Important informationWCAG 2.0 also warns about the accessibility problems of the title attribute. Either use it with care or don’t use it at all.

Xem thêm: Tặng 300 Vip Code Độc Cô Cửu Kiếm, Tặng 300 Vip Code Độc Cô Cầu Bại Nhân Dịp Ra Mắt

4. Use Native sầu Control Elements

Forms are interactive sầu elements, so they need to be accessible via the keyboard. Keyboard-only users should be able lớn fill in forms, press buttons, use range sliders, select options, và operate controls with ease. If you have sầu any forms on your trang web you should thử nghiệm them one by one, using the Tab key. Think of signup forms, newsletter forms, login forms, bình luận forms, shopping carts, and so on.

The best way lớn create accessible forms is by using native control elements wherever it’s possible. Native control elements come with built-in keyboard accessibility, meaning they are focusable và respond khổng lồ keypress events by mặc định. They are as follows:

For example, you can create a keyboard accessible range slider with the following HTML:

Keyboard users can first focus it with the Tab key, then move sầu the slider up & down with Space

If you need to lớn use a non-focusable HTML tag for an interactive sầu element for some reason, you can make it focusable with the tabindex="0" attribute. For instance, here’s a