Remove elements from tab order

Elements like links, buttons, and form fields, can be reached via the keyboard (by default by using the tab key). This post shows you how to remove specific elements from this tab order, so they can no longer be accessed via the keyboard.

You may ask yourself: »Why should I want to remove an element from the tab order?«

Great question. Let us take the following scenario of a blog view as an example: title, featured image, date, and read-more-link are linking to the single view of the post. This means if the user is using the keyboard to tab through the page, he will – assuming that all have a title, featured image, and read-more-link (the date is always there) – have four tab stops per post, all linking to the single view.

To improve that, you can use tabindex="-1" for all these links except one. With that, they are no longer accessible via the keyboard, and there would only be one link to the single view for keyboard users.

Leave a Reply

Your email address will not be published. Required fields are marked *