Accessibility in Flutter DateRangePicker (SfDateRangePicker)

13 May 20216 minutes to read

Screen reader support

The SfDateRangePicker 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
Month header MMMM yyyy January 2020
View header EEE Monday
Disabled cells (Enable dates in past, dates exceed min/max dates) EEE, dd/MMMM/yyyy, Disabled date Friday, 31st January 2020, Disabled date
Blackout date EEE, dd/MMMM/yyyy, blackout date 6th February 2020, Blackout date

Year view

View Format Example
Year cell MMMM yyyy January 2020
Header yyyy 2020
Disabled cell (Enable dates in past, dates exceeds min/max date) MMMM yyyy, Disabled cell December 2019, Disabled cell

Decade view

View Format Example
Header yyyy - yyyy 2020 to 2029
Decade cell yyyy 2020
Disabled cell (Enable dates in past, dates exceeds min/max date) yyyy, Disabled cell 2019 Disabled cell

Century view

View Format Example
Header yyyy - yyyy 2020 to 2029
Century cell yyyy - yyyy 2020 to 2029
Disabled cell (Enable dates in past, dates exceeds min/max date) yyyy - yyyy 2010 to 2019, Disabled cell
View Format Example
Forward navigation arrow > Forward button
Backward navigation arrow < Backward button

Sufficient contrast

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

The following APIs allows to customize the colors of the following elements.

Large fonts

The SfDateRangePicker 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 elements in date range picker.

Keyboard navigation

The following keyboard interactions are supported by the SfDateRangePicker.

Key Description
Up arrow Selects the same day of the previous week
Down arrow Selects the same day of the next week
Right arrow Selects the day after
Left arrow Selects the day before
Alt+1 Displays month view
Alt+2 Displays year view
Alt+3 Displays decade view
Alt+4 Displays century view
Tap Focuses the next clickable element
Shift + upper arrow Selects the same day in previous week to complete range selection or add the day in multiple selection
Shift + down arrow Selects the same day in next week to complete range selection or add the day in multiple selection
Shift + left arrow Selects the day before to complete range selection or add the day in multiple selection
Shift + right arrow Selects the day after to complete range selection or add the day in multiple selection