FullCalendar v6.1.8 resource timeline view is not accessible by Screen readers. It only announces the header by ignoring entire calendar body

Question

I tried using a screen reader to access the resource timeline view on (FullCalendar's website). It works well with the regular calendar view, where I can read and navigate through each date and cell. However, when I switch to the resource view, only the header options are accessible with the screen reader. The rest of the calendar, including dates and cells, is not recognized.

Can you please help me understand what needs to be done to make the resource timeline view accessible to screen readers? Thank you

Resource timeline view of fullCalendar v6.1.8 should be accessible by screen readers similar to calendar standard view. If user needs to use any of the arrow keys to navigate between cells, how is that communicated to use these keys?

Answer 1

There are lots of problems with that calendar, but first, what do you mean by "resource view"? I didn't see that option on the sample page. Do you mean "list" view (instead of "month", "week", or "day")?

Accessibility issues:

• The next/prev buttons are using aria-pressed but they're not really toggle buttons. That is, you select them to go next/prev but they don't remain "pressed". That attribute should be removed.
• The month/week/day/list buttons are also using aria-pressed. You could get away with that in this case because you're only allowed to choose one of the buttons out of the group. The one you selected will remain selected (aria-pressed="true"). It'd be better if that was coded as a radio group but you could have a series of toggle buttons as long as you convey to the user that only one button can be selected out of the group.
• It'd be nice to have screen reader text for the days of the week. Otherwise the screen reader says "Sun", "Mon", "Tue" instead of "Sunday", "Monday", "Tuesday".

Getting back to your original question, assuming you mean "list" view for "resource view". The "list" view works for me with a screen reader. I can tab to each day, just like I can in month or week view. In all views, the actual event is not a keyboard focusable element. You have to arrow down to the event text.

Update:

Based on @ADyson's comment, I was able to find the "resource view". The resulting table is actually a table with three nested tables. One for the column headers (times), one for the row headers ("auditorium"), and one for the main contents (events). That makes it harder to navigate using a screen reader because I can't move from a row header into the main part of the table since they're separate tables. I can certainly navigate to each table individually, but you can't seamlessly navigate between cells of adjacent tables.

However, I could still navigate in the table and hear the information using standard table navigation (ctrl+alt+arrow) or simply walking the DOM with the down arrow key.