Single list item with multiple anchors

user_8178401 0
Viewed 186

Is it accessible to have multiple links in a single list item ?

Let say I need to have code like this one below:

<ul>
  <li><a href="#">link 1</a> <a href="#">link 2</a></li>
  <li><a href="#">link 3</a> <a href="#">link 4</a></li>
  <li><a href="#">link 5</a> <a href="#">link 6</a></li>
</ul>

Going thru the list with a tab key, VoiceOver reads that there are a 3 items list (which is true). But going thru the whole list I need to use the tab key 6 times because in every single <li> there are two anchors.

Is it still accessible for the visually impaired people if they hear that there is a list with 3 items, but going thru the list they find out that actually there are six anchors?

Will that be confusing or inserting two anchors inside one <li> is fine?

EDITED:

enter image description here

This is how should it look. And this is why I inserted two anchors inside single <li>

The thing is links on the left are of different lengths and on the right the same (let's say it's an "only icon link").

The only thing that comes to my mind is to style it like in this fiddle:

https://jsfiddle.net/n0azsq75/

But I would like to have the links to the left and right touch hug together

accessibility html-lists anchor html
1 Answers

A list item can have pretty much have any HTML inside it so you could potentially have lots and lots of interactive elements and thus lots of tab stops within a list item. There isn't a(n) (accessibility) problem with that.

What might be a problem is the purpose of using a list. If you are truly grouping things into enumerated chunks of information, then a list is exactly what you want to use (whether an ordered or unordered list). But if you are using a list to get a certain layout, as in your jsfiddle example, but are not really chunking information together, then you'd want to remove the semantics of the list with role="presentation".

<ul role="presentation">
  <li></li>
  <li></li>
</ul>
user_767140
Related