Acessibility: Using ARIA role="group" within nested list (ul)

I have a list of agenda items I want to display. For that I would use a simple ul.

The thing is that within this list I have grouped the items by month. So in general they are sorted by date and now they are also grouped by month.

Example:

January 2010
- Item 1
– Item 2

February 2010
- Item 3
– Item 4

March 2010
- Item 5
– Item 6

How could I make this information more accessible.

I found this POST about role="group" which seems to be right here?! https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role

So would the following structure make sense?

<ul>
  <li role="group">
    <h3>January 2010</h3>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </li>
  <li role="group">
    <h3>February 2010</h3>
    <ul>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </li>
</ul>

Or how would I make clear that the nested ul is a group.

Or would I leave away the nested uls, build everything with a single ul with equal li for every entry?

Or would I do something like:

<div role="list">
  <div>
    <h3 id="label-1">January 2010</h3>
    <ul aria-labelledby="label-1" role="group">
      <div role="listitem">Item 1</div>
      <div role="listitem">Item 2</div>
    </ul>
  </div>
  <div>
    <h3 id="label-2">February 2010</h3>
    <ul aria-labelledby="label-2" role="group">
      <div role="listitem">Item 3</div>
      <div role="listitem">Item 4</div>
    </ul>
  </div>
</div>

Solution

role="group" is not intended for use on non-interactive items. It is designed to group controls such as inputs, buttons together or for grouping elements that are related.

Your third example is closest to the way this should be structured. The headings are great for quick navigation (as heading levels are one of the primary ways screen reader users navigate a page) and the relationships are created within the HTML itself, removing the need for any extra WAI-ARIA.

Yet again there is no need for role="group".

The following example would be perfectly acceptable and accessible. I have change it to a set of listed <ul> and <li> as that is semantically correct and removes the need for any WAI-ARIA there also. (Golden rule, use semantic elements if you can as support is 100% for those, support for WAI-ARIA is a little patchy still. and so should be used for complimentary information / if there is no way to achieve the desired document structure / relationships using standard HTML5 elements.)

Obviously if the Items 1 to 4 are interactive elements and you have left that out for brevity then that is a different matter entirely and I will change this answer.

    <ul>
      <li>
        <h3>January 2010</h3>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </li>
      <li>
        <h3>February 2010</h3>
        <ul>
          <li>Item 3</li>
          <li>Item 4</li>
        </ul>
      </li>
    </ul>