Hi there, I have a quick question about the use of the article element. I was under the impression that it was to be used to group content that could stand alone without the rest of the context on the page, such as a blog post.
However, I’m going back through the newly updated Responsive Web Design course, and in the Cafe Menu project, each part of the menu is coded as a section, while each menu item is coded as a separate article, i.e. “Coffee, 3.00”. How is that the proper use of “article”, especially as a child of sections? Would it not make more sense to classify the items as divs, or even not use any individual elements (since all the items could be modified using a single class applied to the overall section)?
I questioned this myself when I encountered it. The fact that both Coffee and Desserts are sections makes sense because they are sections of the webpage. However, the use of article does complicate things as from my understanding an article should be the parent of sections and not the other way around. I feel like with the (New) Responsive Web Design courses freeCodeCamp is trying to incorporate more exposure to different element tags and in doing so this was created. I personally would use divs instead of articles in this situation.
Articles and sections can be nested within each other in any order. There are no limitations here.
As far as accessibility goes, there really isn’t too much difference between an article and a section, with one big exception, if a section is given an accessible name then it acts as a landmark region. But this exception is always done intentionally for specific circumstances and definitely doesn’t apply here. Some screen readers will allow the user to navigate the page by article (JAWS does), and they may also announce the beginning/end of an article (JAWS seems to do this but NVDA does not). This extra bit of information could come in handy so I think it is probably a good idea to use an article where it is appropriate. Which brings us to this challenge.
An article does not always have to be a what we think of as a “traditional” print article. As accessibility expert Bruce Lawson explains: “Think of <article> not just as a newspaper article, or a blog post, but as an article of clothing — a discrete entity that can be reused in another context.” So in this case, I think an argument could be made that each of the items on the menu could be coded as an article. Traditionally, articles usually have headings though, so I would perhaps recommend that the name of the menu item be marked up as a heading. This might also make it easier for screen reader users to navigate the page as navigation by heading is definitely one of the most popular, if not the most popular method of page navigation.
But just because an argument could be made to use an article here doesn’t mean it’s the best fit. I think a definition list would be just as good, if not a better fit. Unfortunately, VoiceOver (the screen reader for macs and iOS) is just not very good with definition lists, so I would probably shy away from that approach. Perhaps just a good old regular unordered list would do the job. And if you replaced the <p>s with <span>s then screen readers will read both the name of the item and the price together at once. That would probably be my preferred approach to marking up this menu. But there is really no one “correct” solution.
Thanks so much for your detailed reply and explanations! It’s really helpful to get some broader context and see how different solutions can apply. Accessibility as I’m learning is definitely not a one-size-fits-all sort of approach, so your thoughts make sense here.
Thanks also to others who have weighed in, this kind of discussion is really helpful both for talking through things and also not feeling so isolated as I grapple with new concepts
