Calendar is difficult to browse with a screen reader

[mcking65]

Describe the issue

When browsing the calendar with a screen reader, it is arduous to perceive the date and status of an event. The majority of events are repeating. It is difficult to distinguish one event from another because the date and status information are so far removed from the event name. I have several times opened and even edited the wrong instance of an event! So, I now take great care to double check I have opened the correct instance, and that is unnecessarily time consuming.

To reproduce

Open the calendar with any screen reader running. Navigate by heading. Every event sounds the same. If you want to know the status and date of any given an event, it takes at least 6 additional key presses.

Expected behavior

When browsing, the title, date, and status of every event should be perceivable with a single key press. The simplest way would be to include all three elements in the heading.

Screenshots

N/A

Additional context

Another possible approach is to wrap each event in an article element and label the article with the event name, status, and date. Example:

<div role="article" aria-labelledby="n s d">
  <h2 id="n">Event Name</h2>
  <ul>
    <li id="s">Upcoming Confirmed</li>
    <li id="d">July 4, 3000</li>
  </ul>
</div>

[LJWatson]

Thanks for raising this @mcking65. Your proposed solution (using the article element with serial aria-labelledby values) seems like a good solution to this problem to me.

[jean-gui]

Some examples for reference: https://www.w3.org/events/ and https://www.w3.org/groups/tf/aria-editors/calendar/

[NicolaSaunders]

I have created a branch called hotfix/#410-event-labelling to tackle this issue.

Related pull request is at https://github.com/w3c/w3c-website-templates-bundle/pull/114

[jean-gui]

@mcking65 This should now be fixed, see https://www.w3.org/groups/tf/aria-editors/calendar/ or https://www.w3.org/users/myprofile/calendar/ for example. Is that better like so?

[mcking65]

Thanks for this!!

It is almost fixed; one of the very important bits of info, the date, is not included in the label.

To make browsing calendar efficient, I think the date should be first in the label. It is typically the most distinguishing information and is of uniform length while meeting names are long and repetitive.

Example:

7 August 2023, ARIA Editors Upcoming Confirmed

If possible, please don't include the time in the label. It would add a lot of verbosity without much value when trying to find a specific calendar entry. It is extremely rare to have multiple meetings on the same day with the same title.

[jean-gui]

@mcking65 Is it better now?

[mcking65]

it is wonderful!!! thank you!!! This plus the title change make a huge improvement to quality of life!