Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
As discussed in this Slack thread, it is important to provide the best UX when navigating Calendar View tables.
Links:
- https://www.drupal.org/about/core/policies/core-change-policies/core-gat...
- https://www.24a11y.com/2018/a-new-day-making-a-better-calendar/
- https://wiki.mozilla.org/Accessibility/TableHeaders#Examples
Steps to reproduce
- Create a new Calendar View with a Page display
- Make sure there are results
- Visit the page
- Test navigation with a text-to-speech plugin
(need to check what is the best tool to run an a11y test)
Proposed resolution
...
Remaining tasks
...
User interface changes
...
| Comment | File | Size | Author |
|---|---|---|---|
| #7 | 24a11y_calendar_widget.mp4 | 5.84 MB | rkoller |
| #7 | goto_tables_and_arrow_nav.mp4 | 940.6 KB | rkoller |
| #7 | sequential_tabbing.mp4 | 5.34 MB | rkoller |
| #7 | tabbing.mp4 | 4.49 MB | rkoller |
| #7 | rotor.mp4 | 4.64 MB | rkoller |
Issue fork calendar_view-3339661
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
matthieuscarset commentedComment #5
matthieuscarset commentedI've used several tools to audit the code of the Calendar View table, such as Wave tool and a11y CSS.
There were no issue found in the markup except some improvements needed on the pager links and the table summary (see related commits in this thread).
As far as I know about accessibility, this issue is ready for review.
Comment #6
fallenturtle commentedI actually was just trying out this module with the NVDA speech reader. To be honest, as a person who doesn't use screen readers, I'm not sure what the expectation is for a person dependent on screen readers for reading a grid based calendar, but I think all the table row/column information is a lot of noise and a little confusing. I've pasted the output that is read from a February 2023 calendar I created. It has two events... one is month long, National Taco Month, and then I have a 2 day Taco Conference (one node with two date fields). I've customized the twig to put the pager at the top, hence the order:
And the beginning of the next month:
I also use NVDA with Google Calendar.... here's the output for part of it:
Looking at the source, it seems they aren't using a table but use grid instead. Each week has a container for screen readers and another for onscreen. It seems very complex with a lot of aria attributes.
As I said, I still want to gain a better understanding of what expectations a person dependent on AT has with a grid calendar. I think at the very least the date needs to be announced as not just the number but also the month as I believe the announcing of the column number prior to the date number is confusing.
Comment #7
rkollersaw your posting in the #accessibility channel a few weeks ago but haven't had the time to get back to it. but to illustrate a few potential stepping stones for screenreader users i've recorded a few small videos on macos with voiceover plus i've opened the keyboard viewer alongside (that way you see most of the interactions clicked). unfortunately the extra keys like VO (ctrl and option) weren't really indicated when pressed. but nevertheless i think the videos give a pretty good idea where potential stepping stones might be. in addition i've also created a video for a calendar widget from 24a11y christmas blog series from a few years ago.
1. rotor (rotor.mp4)
at first the rotor, it is a feature voiceover and i guess nvda have. you are able to switch through sections like links and landmarks sections. for the
linkssection you have for example several redundant links (edit,testandadmin, each for a different calendar event and a context is unavailable in the aural interface). in contrast theprevious,nextandbacklinks provide extra context by adding visually hidden month and year which is excellent!the
window spotssections has no relevant entries for calendar view. thelandmark regionssection has only the general claro landmarks. might be helpful to have one for the filter component, one for the calendar content, and one for thepreviousandnextnav at the bottom. at the moment you only have themainlandmark wrapping everything calendar_view related. in theform controlssection after the first three claro related options you have fivefilter componentrelated options. but i have to admit without the visual context just solely based on the announced output i would have a hard time myself to understand their function. and theform controlsafter the filter buttons are redundantly named and are also missing some sort of context (the form controls related to calendar events).the
headingssection doesnt have and headings related to the calendar. i would have expected march 2023 being a heading but instead it is just acaption. some extra context screenreader users most often orient on pages they are new to or in general either by the heading or the landmark region (https://heydonworks.com/article/responses-to-the-screen-reader-strategy-... first question and answer). based on the available options in both aforementioned sections it is sort of challenging for them. and within in thebuttonssection there are again redundant button names.2. i just tabbed through the interface (tabbing.mp4)
if a user just tabs through the interface the person gets all the elements contained in the filters component announced. after that only the three available events have focusable elements. but you dont actually know on which date those are. it starts with the checkbox (no general context what the overall element is about) then the
title, anameandeditandlist additional actions. all are missing the label being announced automatically. and again as already mentioned before the previous-next nav at the bottom is announced in an informative and good way.3. sequential tabbing (sequential_tabbing.mp4)
i am stepping through the aural interface "granularly" by tabbing
ctrl-option-arrow right. one detail that is suboptimal, for each day i first get the announcement for the group starting with the date, then just the number, and then again the end of group with again the date. and for an event i get all information announced in detail.4. arrow key navigation (goto_table_and_arrow_nav.mp4)
at first i tried to reach the table element with
control option command tbut as you can see and hear the table was not found? then i got into the table element and from there i tried to navigate. as soon as a day was in focus i tried to navigate from there by pressingctrl option arrow leftorright. that way i stepped through the elements sequentially.control option arrow upanddownhad no effect at all. when i just try to use the arrow keys, up and down steps me through the elements while using left and right gets me into a granular sequential level (character by character).another example (24a11y_calendar_widget.mp4)
during 24accessibility christmas blog series a few years ago there was an article about accessible calendars https://www.24a11y.com/2018/a-new-day-making-a-better-calendar/ (demo : https://unfetteredthoughts.net/a11y/calendar/calendar.html)
what i like about it is that you are able to navigate within the calendar by simply using the arrow keys. you also have the option easily to jump to the beginning and end of the calendar as well as jump to the next or previous month by the page up and down key. the visually hidden link to the nav instruction is also very handy. and if you take a look at the calendar via the rotor everything is clearly labeled and has a context. each day is clearly visible. there are also landmark regions and the calendar has a heading.
the widget isnt using tables and advocates for that. but there is a small discussion in the comments section of the linked article where adrian rosselli argues against that. meaning tables are also totally fine. meaning the link to the demo shouldnt imply that removing tables is the recommended best practice. and for example another demo of a calendar with accessibility in mind is the following: http://demos.joedolson.com/my-calendar/
and another detail you are able to test is the windows high contrast mode (here in microsoft edge). the circles behind the day numbers are invisible there:
Comment #10
matthieuscarset commentedJust added the col scope attribute to headers based on this example from W3C:
https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-ambiguous...
Comment #11
matthieuscarset commented