- Issue created by @matthieuscarset
-
matthieuscarset →
committed 43a067cf on 2.0.x
Add missing aria-label on pager links #3339661
-
matthieuscarset →
committed 43a067cf on 2.0.x
-
matthieuscarset →
committed 5ddc0066 on 2.0.x
Add missing table summary #3339661
-
matthieuscarset →
committed 5ddc0066 on 2.0.x
- Status changed to Needs review
almost 2 years ago 6:11pm 6 February 2023 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 THURSDAYcolumn 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 MonthWed, 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 09list 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 MonthWed, 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 19list 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 MonthWed, 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 01THURSDAY 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 tableTitle: 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 ESTAnd 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 SATURDAYrow 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 MonthWed, 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 listFRIDAY 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 04row 3 SUNDAY column 1 05
MONDAY column 2 06
TUESDAY column 3 07
WEDNESDAY column 4 08
THURSDAY column 5 09
FRIDAY column 6 10SATURDAY column 7 11
row 4 SUNDAY column 1 12
MONDAY column 2 13
TUESDAY column 3 14
WEDNESDAY column 4 15THURSDAY 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 24Looking 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 thelinks
section you have for example several redundant links (edit
,test
andadmin
, each for a different calendar event and a context is unavailable in the aural interface). in contrast theprevious
,next
andback
links provide extra context by adding visually hidden month and year which is excellent!
thewindow spots
sections has no relevant entries for calendar view. thelandmark 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 theprevious
andnext
nav at the bottom. at the moment you only have themain
landmark wrapping everything calendar_view related. in theform controls
section after the first three claro related options you have fivefilter 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 theform controls
after the filter buttons are redundantly named and are also missing some sort of context (the form controls related to calendar events).
theheadings
section 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 thebuttons
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 thetitle
, aname
andedit
andlist 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 tabbingctrl-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 withcontrol 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 pressingctrl option arrow left
orright
. that way i stepped through the elements sequentially.control option arrow up
anddown
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:
-
matthieuscarset →
committed b4b339a3 on 2.1.x
Add table header col scope #3339661
-
matthieuscarset →
committed b4b339a3 on 2.1.x
- Status changed to Active
8 months ago 9:56am 18 March 2024 Just 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...- Status changed to Postponed
3 months ago 6:51am 18 August 2024