Is it a good practice to put <article>s inside <li>s?

Question

Typically on the front page of a blog, there are several recent blog posts, and each blog post is an <article>. And usually blog comments are markuped using <article>s, too.

My question is: Is it a good practice to put those <article>s inside <li>s? I used to do that because in my own interpretation those <article>s together are presented in a way of a certain amount/quantity. So when it comes to listing a certain amount/quantity of elements, <ul> and <ol> are the best choices.

However, maybe I need to reconsider my interpretation because putting <article>s inside <li>s seems to be a misuse of <li>. And I also want to take accessibility into account. I'm not sure if doing that causes confusions to assistive technologies or not.

Answer 1

The question really comes down to: What constitutes a list? If it's a list of articles, then it should be marked up as such using <li>. The advantage for screen reader users is that screen readers can use the semantic markup to communicate useful information. For example, informing the user that they've just landed on a "list of 5 items" helps them to understand how the content is organized, and how much of it there is.

That said, if each item in the list is very long or contains complex content with lots of nested elements, I agree @IanY that this could be confusing, as it then becomes difficult for users to keep track of where they are within the list.

When blocks of content are relatively large, if a sighted user isn't likely to look at that content and identify it as a list of items, then you shouldn't use <li>. If you use <article> and a heading to mark the article title, that provides a sufficient amount of semantics to facilitate navigation for screen reader users.