Improve calendar table accessibilty

Created on 6 February 2023, over 1 year ago
Updated 18 March 2024, 3 months ago

Problem/Motivation

As discussed in this Slack thread, it is important to provide the best UX when navigating Calendar View tables.

Links:

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

...

💬 Support request
Status

Active

Version

2.1

Component

Code

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @matthieuscarset
  • Status changed to Needs review over 1 year ago
  • I'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 (see related commits in this thread).

    As far as I know about accessibility, this issue is ready for review.

  • 🇺🇸United States fallenturtle

    I 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:

    list with 3 items link Previous month, January 2023
    FEBRUARY
    link Next month, March 2023 out of list
    link Back to February 2023
    table with 6 rows and 7 columns caption February 2023
    row 1 column 1 SUNDAY
    column 2 MONDAY
    column 3 TUESDAY
    column 4 WEDNESDAY
    column 5 THURSDAY

    column 6 FRIDAY
    column 7 SATURDAY
    row 2 SUNDAY column 1 29
    MONDAY column 2 30
    TUESDAY column 3 31
    WEDNESDAY column 4 01
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    THURSDAY column 5 02
    list with 1 items Title: link National Taco Month

    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    FRIDAY column 6 03
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    SATURDAY column 7 04
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    row 3 SUNDAY column 1 05
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day
    out of list
    MONDAY column 2 06
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    TUESDAY column 3 07
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    WEDNESDAY column 4 08
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    THURSDAY column 5 09

    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    FRIDAY column 6 10
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    SATURDAY column 7 11
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    row 4 SUNDAY column 1 12
    list with 1 items Title: link National Taco Month

    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    MONDAY column 2 13
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    TUESDAY column 3 14
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    WEDNESDAY column 4 15
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day
    out of list
    THURSDAY column 5 16
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    FRIDAY column 6 17
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    SATURDAY column 7 18
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    row 5 SUNDAY column 1 19

    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    MONDAY column 2 20
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    TUESDAY column 3 21
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    WEDNESDAY column 4 22
    list with 1 items Title: link National Taco Month

    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    THURSDAY column 5 23
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    FRIDAY column 6 24
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    SATURDAY column 7 25
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day
    out of list
    row 6 SUNDAY column 1 26
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    MONDAY column 2 27
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    TUESDAY column 3 28
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    WEDNESDAY column 4 01

    THURSDAY column 5 02
    list with 2 items Title: link Taco Conference
    Thu, Mar 2 2023, 9am - 5pm EST
    Title: link Taco Conference
    Fri, Mar 3 2023, 9am - 3pm EST out of list
    FRIDAY column 6 03
    list with 2 items Title: link Taco Conference
    Thu, Mar 2 2023, 9am - 5pm EST
    Title: link Taco Conference
    Fri, Mar 3 2023, 9am - 3pm EST
    out of list
    SATURDAY column 7 04 out of table

    Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day
    Title: link Taco Conference
    Thu, Mar 2 2023, 9am - 5pm EST
    Title: link Taco Conference
    Fri, Mar 3 2023, 9am - 3pm EST

    And the beginning of the next month:

    table with 6 rows and 7 columns caption March 2023
    row 1 column 1 SUNDAY
    column 2 MONDAY
    column 3 TUESDAY
    column 4 WEDNESDAY
    column 5 THURSDAY
    column 6 FRIDAY
    column 7 SATURDAY

    row 2 SUNDAY column 1 26
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    MONDAY column 2 27
    list with 1 items Title: link National Taco Month
    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    TUESDAY column 3 28
    list with 1 items Title: link National Taco Month

    Wed, Feb 1 - Tue, Feb 28 2023, All day out of list
    WEDNESDAY column 4 01
    THURSDAY column 5 02
    list with 2 items Title: link Taco Conference
    Thu, Mar 2 2023, 9am - 5pm EST
    Title: link Taco Conference
    Fri, Mar 3 2023, 9am - 3pm EST out of list

    FRIDAY column 6 03
    list with 2 items Title: link Taco Conference
    Thu, Mar 2 2023, 9am - 5pm EST
    Title: link Taco Conference
    Fri, Mar 3 2023, 9am - 3pm EST out of list
    SATURDAY column 7 04

    row 3 SUNDAY column 1 05

    MONDAY column 2 06
    TUESDAY column 3 07
    WEDNESDAY column 4 08
    THURSDAY column 5 09
    FRIDAY column 6 10

    SATURDAY column 7 11

    row 4 SUNDAY column 1 12
    MONDAY column 2 13
    TUESDAY column 3 14
    WEDNESDAY column 4 15

    THURSDAY column 5 16
    FRIDAY column 6 17
    SATURDAY column 7 18
    ...

    I also use NVDA with Google Calendar.... here's the output for part of it:

    WEDNESDAY column 4 heading level 2 No events, Wednesday, March 15
    THURSDAY column 5 heading level 2 No events, Thursday, March 16
    FRIDAY column 6 heading level 2 No events, Friday, March 17
    SATURDAY column 7 heading level 2 No events, Saturday, March 18
    row 5 SUNDAY column 1 heading level 2 No events, Sunday, March 19
    MONDAY column 2 heading level 2 No events, Monday, March 20
    TUESDAY column 3 heading level 2 No events, Tuesday, March 21
    WEDNESDAY column 4 heading level 2 No events, Wednesday, March 22
    THURSDAY column 5 heading level 2 No events, Thursday, March 23
    FRIDAY column 6 heading level 2 No events, Friday, March 24

    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.

  • 🇩🇪Germany rkoller Nürnberg, Germany

    saw 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 links section you have for example several redundant links (edit, test and admin, each for a different calendar event and a context is unavailable in the aural interface). in contrast the previous, next and back links provide extra context by adding visually hidden month and year which is excellent!
    the window spots sections has no relevant entries for calendar view. the landmark regions section has only the general claro landmarks. might be helpful to have one for the filter component, one for the calendar content, and one for the previous and next nav at the bottom. at the moment you only have the main landmark wrapping everything calendar_view related. in the form controls section after the first three claro related options you have five filter component related 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 the form controls after the filter buttons are redundantly named and are also missing some sort of context (the form controls related to calendar events).
    the headings section doesnt have and headings related to the calendar. i would have expected march 2023 being a heading but instead it is just a caption. 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 the buttons section 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, a name and edit and list 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 t but 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 pressing ctrl option arrow left or right. that way i stepped through the elements sequentially. control option arrow up and down had 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:

  • Status changed to Active 3 months ago
Production build 0.69.0 2024