Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Input Date

v.1.0.0 | Saturn

Accessibility is a crucial consideration when designing and developing components, as it ensures that all users, regardless of their abilities or limitations, can interact effectively with your project. In this section, we will explore how our inputDate has been developed with accessibility in mind, ensuring that all users have a smooth and meaningful experience.

The following mencioned props and recommendations are optional, althougt at Kubit strongly recommend their use to meet accessibility standars.

Text

They need a visible text labels that clearly indicate their purpose. Helper texts and error messages must clearly indicate the information. In error messages, when possible, include information about how to correct them.

Icon

  • Calendar icons: buttons that display the calendar to select dates. It needs an accessible text label.
  • Error icon: needs an accessible text label, such as "Error". The icon will be indicated as decorative when the message itself indicates to the user that it is an error message.

Screenreader and Keyboard interactions

To support screen reader users, this component should include WAI ARIA attributes (the alt and aria specific props) to have a correct semantic markup. Screen reader and keyboard users should be able to operate with all the interactive elements.

The fields that are disabled must be indicated by programming. These disabled fields do not receive keyboard or screen reader focus. When an input has an error and/or help text, it is necessary to associate these texts to the input so that the screen reader user is informed. If there is an error in the mbInput, this error information has to be announced to screen reader users.

Required fields identified with an asterisk may not always being announce for screen reader users. Use semantic markup in order to screen readers could identify required fields.

Calendar

The days of the month are within a table, so it is necessary to use the proper semantic mark for tables in order to make the data accessible for screen reader users. Interactive elements that allow to change month and year, needs and accessible label.

  • Once the user opens the date picker, screen readers must announce that it is opened, and the date that is selected on the date picker. For example: "8 of August of 2023".
  • Once the user selects a date, the modal dialog must be closed and screen readers have to announce again the date the user has picked.
  • ESCAPE key must close the calendar.

Visual design

Color contrast

  • For text labels in links needs a color contrast of at least 4'5:1 for regular text and 3:1 for large scale (18pt) or bold text (14pt).
  • For the rest of elements and the focus indicator at least of 3:1 color contrast ratio is needed.

Target Size

The area for clicking and tapping buttons must be large enough. The recommended size of the target for pointer inputs is at least 24x24px and 44x44px for best readability.

Technical references

Input DateStyling API
Input Digit SequenceUsage