Search code examples
htmlaccessibilityscreen-readers

Accessibility: is tab-index in a list of anchors and one paragraph recommended?


I'm creating a timeline. The timeline represents a sequence of posts of a blog and the central one is the current post. Every item in the timeline is an anchor but the center.

I'm wondering which way is better for screen readers and assistive technologies. Create a tab index for every item of the list, or only for the p or even do nothing!

Here's a screenshot of the timeline:


Solution

  • If the order of the anchors in the time line matches the chronological order of the blog posts, and if each a element has a href attribute, then keyboard users (including screen reader users) will be able to navigate the items on the timeline in the intended order. These items don't need a tabindex attribute.

    The only item that will presumably not be keyboard accessible is the "current post", unless

    • the item representing the current post is also a link (a element with href) to the current page, which is not an elegant solution (and potentially confusing), OR
    • the item representing the current post has an attribute tabindex="0" to make it keyboard-focusable without changing the tab order of other elements on the page.

    Based on your description and the screenshot, I am assuming that the item that represents the current post is not a link and that you should use the second option.