2

Assume this HTML structure:

<h2>Our latest News and Events</h2>
<ul>
  <li>news item 1</li>
  <li>news item 2</li>
  <li>news item 3</li>
</ul>
<ul>
  <li>event item 1</li>
  <li>event item 2</li>
</ul>

My question is whether the above structure is accessible and good enough, or whether I should merge the 2 lists into one so it becomes:

<h2>Our latest News and Events</h2>
<ul>
  <li>news item 1</li>
  <li>news item 2</li>
  <li>news item 3</li>
  <li>event item 1</li>
  <li>event item 2</li>
</ul>

Notes:

  • In both cases the heading semantically covers all subsequent items (news and events).
  • I cannot change any of the content, nor add any new headings. The data is given as is, so I can only affect the HTML (i.e combine the two lists in one).
  • Both cases would have the exact same presentation (i.e there wouldn't be a visible gap between the 2 lists in the first case).
2
  • Are you able to add aria attributes to the ul's? If you can, add an aria-label attribute. If not there is not much you can do except maybe the suggestion @smuxer gave in an answer.
    – jazZRo
    Apr 15, 2021 at 16:50
  • @jazZRo: Yes, I can add any attributes, but content is what it is. i.e I do not have the ability for any other words other what has been described. So I can only work programmatically (e.g merge lists, count items and present counts in some attribute etc).
    – cherouvim
    Apr 16, 2021 at 6:34

3 Answers 3

2

good question btw ;) Grabbing your example:

<h2>Our latest News and Events</h2>
<ul>
  <li>news item 1</li>
  <li>news item 2</li>
  <li>news item 3</li>
</ul>
<ul>
  <li>event item 1</li>
  <li>event item 2</li>
</ul>

I used to do something more like this with sub headings to guiding the user.

<h2>Latest News</h2>
<ul>
  <li>news item 1</li>
  <li>news item 2</li>
  <li>news item 3</li>
</ul>

<h2>Events</h2>
<ul>
  <li>event item 1</li>
  <li>event item 2</li>
</ul>

Why these solution:

  1. You maintain your semantic.
  2. The info list are grouped by your Heading;
  3. The user after the first list know immediately what kind of information is the next one.
  4. It's good for multiple list (scalable).
2
  • Thanks. That combined header I use is both a client requirement and a restriction I have from the system emiting the data. Thus I'm only asking whether the 1 header and 2 lists is acceptable from an accessibility perspective.
    – cherouvim
    Apr 8, 2021 at 17:21
  • So in that case It will be not a problem but you should use title attributes to all your list items and title. Apr 12, 2021 at 12:02
2
+25

I don't think this is possible, based on your requirements.

A screen-reader user, or any user for that matter, would have to decipher what is a news item and what is an event item.

If you can't organize them by separate lists, then maybe change the link text to make it understandable.

Ex. "News | News Item 1" or "Event | Event Item 1"

0

If they are displayed visually in one group for screen users, it often means that you can use the same grouping for screen reader users too.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.