Accessibility in Flutter Event Calendar (SfCalendar)

13 May 2021 / 5 minutes to read

Screen reader support

The SfCalendar can easily be accessed by screen readers. Please find the following table to get spoken feedback about the inner element contents of the screen.

Month view

View Format Example
Month cell EEE, dd/MMMM/yyyy Thursday the 2nd of January 2020
No events EEE, dd/MMMM/yyyy, No events Wednesday the 15th of January 2020, No events
No selected dates No selected date No selected date

TimeSlot view

View Format Example
Timeslot view hh mm a dd/MMMM/yyyy 11AM the 28th of January 2020
All day expander icons Expand all day panelCollapse all day panel Expand all day sectionCollapse all day section
All day expander view + appointment Count +3

Appointments

View Format Example
Normal appointment Subject hh mm a – hh mm a dd/MMMM/yyyy Yoga therapy 10AM to 11AM the 29th of January 2020
Month agenda view appointment Subject hh mm a – hh mm a dd/MMMM/yyyy Plan execution 9AM to 11AM the 23rd January 2020
All day appointment Subject All day General meeting all day
Spanning appointment Subject hh mm a dd/MMMM/yyyy - hh mm a dd/MMMM/yyyy General meeting 12AM the 23rd of January 2020 – 1AM the 30th of January 2020

Headers

View Format Example
Header MMMM yyyy January 2020
Timeline week header dd/MMMM to dd/MMMM/yyyy 15th of January to 21th January 2020
Timeline workweek header dd/MMMM to dd/MMMM/yyyy 16th of January to 20th January 2020
Month view header EEE Monday
TimeSlot view header EEE, dd/MMMM/yyyy Wednesday the 29th of January 2020

Sufficient contrast

The SfCalendar theming support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements.

The following APIs allow you to customize the colors of the following elements.

Large fonts

The SfCalendar font size can be adjusted automatically based on device settings and the font size scaled based on the MediaQueryData.textScaleFactor. And also it allows to change the font size of all UI elements in the calendar.

Keyboard navigation

The following keyboard interactions are supported by the SfCalendar.

Key Description
Up arrow Moves selection to the next calendar cell directly above the currently selected time slot
Down arrow Moves selection to the next calendar cell directly below the currently selected time slot
Right arrow Moves selection to the same time slot on the next day
Left arrow Moves selection to the same time slot on the previous day
Tab Focuses the next clickable element, except appointments and cells
Shift + tab Focuses the previous clickable element, except appointment and cells