Content
View differences
Updated by Parimal Satyal over 1 year ago
### Notes
* For screenreaders, we will only target manual date input using the Start date, Finish date and Duration input fields, not the Flatpickr-based mini-calendar.
* This is because manually going through and tabbing over every day in a even a single calendar month is cumbersome and inefficient. (Flatpickr is not accessible presumably for this reason)
* Because the new Primer input fields use Rails helpers, they accept dates in a number of different formats (yyyy/mm/dd, dd-mm-yyyy, dd.mm.yyyy...). This greatly simplifies date input and reduces errors during manual input.
* There are a number of challenges:
* Indicating non-working days in "working days only" mode: if a non-working day is selected, an inline-validation error for that field will indicate that the input is invalid because it is a non-working day.
* Providing important banner information when there is a change of mode: the banner is generally above everything, but a control below (switch from manual to automatic, or vice-versa) can change banner text. This updated information needs to be accessible to a screen-reader.
* When you enter a date or a duration, this updates other fields; this has to be read out too so the user doesn't lose that context.
* On mobile:
* We'll remove the flatpicker mini-calendar on mobile for all users, so only the date input fields need to be accessible.
* The above challenges also apply.
### WCAG Guidelines
**Perceivable**
* [ ] [1.1.1](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) Relevant and functional non-text items (images, icons,...) have alternative text
* [ ] [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) Information, structure, and relationships/dependencies conveyed through presentation can be extracted with different user agents, assistive technologies, or have text representations
* [ ] [1.3.2](https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence) Data on screen is presented in a meaningful sequence when accessed with assistive technologies
* [ ] [1.3.3](https://www.w3.org/WAI/WCAG21/Understanding/sensory-characteristics) Instructions are not only provided through sound, size, shape, location, or orientation
* [ ] [1.4.1](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color) Color is not the only visual means of conveying information, indiacting action, prompting responses, or distinguishing a visual element
* [ ] [1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum) Contrast minimum ratios (4.5:1) are maintained (cf., https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum)
* [ ] [1.4.4](https://www.w3.org/WAI/WCAG21/Understanding/resize-text) Text is resizable up to 200% without loss of content
* [ ] [1.4.10](https://www.w3.org/WAI/WCAG21/Understanding/reflow) Text reflows without loss of information in a viewport of 320px/256px
* [ ] Can zoom text to 200% at that viewport
* [ ] [1.4.11](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) Visual presentation has contrast ratio of at least 3:1 (
* [ ] Active controls, state modifiers (selected, focused)
* [ ] Otherwise, provide other indication of the state (text, icon with minimum contrast)
**Operable**
* [ ] [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) All functionality of the content is operatable through keyboard interface
* [ ] Provide alternative inputs to the underlying function (i.e, text input for datepicker)
* [ ] [2.1.2](https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap) If focus can be moved to a component using keyboard, it cen be moved away using keyboard only
* [ ] [2.1.4](https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts) Provide means of preventing accidental activiation of shortcuts. Disabling/remapping keyboard shortcuts
* [ ] [2.2.1](https://www.w3.org/WAI/WCAG21/Understanding/timing-adjustable) Time limits set by content can be turned off or adjusted (cf., [https://www.w3.org/WAI/WCAG21/Understanding/timing-adjustable)](https://www.w3.org/WAI/WCAG21/Understanding/timing-adjustable))
* [ ] [2.2.2](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide) Moving, blinking, scrolling that starts automatically for more than 5 seconds, or auto-updating that starts automatically can be paused, stopped, or hidden
* [ ] [2.2.3](https://www.w3.org/WAI/WCAG21/Understanding/no-timing) Timing is not an essential part of an event or activity presented by the content, except for synchronized media or real-time events
* [ ] [2.2.4](https://www.w3.org/WAI/WCAG21/Understanding/interruptions) Interruptions/Alerts/Updates from the server can be postponed or suppressed.
* [ ] [2.2.5](https://www.w3.org/WAI/WCAG21/Understanding/re-authenticating) When an authenticated session expires, the user can continue the activity without loss of data afte rre-authentication
* [ ] [2.2.6](https://www.w3.org/WAI/WCAG21/Understanding/timeouts) Users are warned of any user inactivity that could cause data loss
* [ ] [2.3.1](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold)/[2.3.2](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes) Flashes are no more than three times in any one second period
* [ ] [2.3.3](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions) Motion animation by interaction can be disabled unless interaction is essential to functionality or information being conveyed
* [ ] [2.4.1](https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks) Mechanisms to bypass blocks of content that are repeated exist
* [ ] [2.4.2](https://www.w3.org/WAI/WCAG21/Understanding/page-titled) Pages have titles that describe topic or purpose
* [ ] [2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order) Focusable components receive focus in an order that preserves meaning an operability
* [ ] [2.4.4](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context) The purpose of each link can be determined from text alone, or from text and link context
* [ ] [2.4.5](https://www.w3.org/WAI/WCAG21/Understanding/multiple-ways) More than one way is available to locae a page within a set of pages, allowing users to locate content in a manner that best meets their needs
* [ ] [2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels) Headings and labels describe topic or purpose
* [ ] [2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible) Keyboard foucs indication is visible to the user
* [ ] [2.4.8](https://www.w3.org/WAI/WCAG21/Understanding/location) Information about the user's location in a set of pages is available
* [ ] [2.4.9](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-link-only) Link purpose is identifiable from text alone
* [ ] [2.4.10](https://www.w3.org/WAI/WCAG21/Understanding/section-headings) Section headings are used to organize content, facilitating navigation with content
**Understandable**
* [ ] [3.1.1](https://www.w3.org/WAI/WCAG21/Understanding/language-of-page) Default language of each page can be programatically determined
* [ ] [3.1.2](https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts) Language in each passage or phrase in content can be determined
* [ ] [3.1.3](https://www.w3.org/WAI/WCAG21/Understanding/unusual-words) A mechanism is available for identifying specific definitions of words or phrases (Definitions, Glossary, In-line definitions)
* [ ] [3.1.4](https://www.w3.org/WAI/WCAG21/Understanding/abbreviations) A mechanism for identifying the expanded form or meaning of abbreviations is available
* [ ] [3.1.5](https://www.w3.org/WAI/WCAG21/Understanding/reading-level) A simplified version of text exists, if text requires advanced reading ability
* [ ] [3.1.6](https://www.w3.org/WAI/WCAG21/Understanding/pronunciation) A mechanism is available for identifying specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation.
* [ ] [3.2.1](https://www.w3.org/WAI/WCAG21/Understanding/on-focus) When any componet receives focus, it does not initiate a change of context (user agent, viewport, focus, content)
* [ ] [3.2.2](https://www.w3.org/WAI/WCAG21/Understanding/on-input) Changing the setting of any component does not cause a change of context unless user has been adviced about such a change
* [ ] [3.2.3](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation) Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.
* [ ] [3.2.4](https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification) Components that have the same functionality within a set of Web pages are identified consistently (Icons, check marks, references)
* [ ] [3.2.5](https://www.w3.org/WAI/WCAG21/Understanding/change-on-request) Changes of context are initiaed only by user request or a mechanism is available to turn off such changes
* [ ] [3.3.1](https://www.w3.org/WAI/WCAG21/Understanding/error-identification) Input errors are described to the user in text
* [ ] [3.3.2](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions) Labels or instructions are provided when content requires user input
* [ ] [3.3.3](https://www.w3.org/WAI/WCAG21/Understanding/error-suggestion) Input errors have suggestions with regards how to correct that error
* [ ] [3.3.4](https://www.w3.org/WAI/WCAG21/Understanding/error-prevention-legal-financial-data)/[3.3.6](https://www.w3.org/WAI/WCAG21/Understanding/error-prevention-all) Errors can be prevented
* [ ] Submissions are reversible
* [ ] Data entered by the user is checked for errors and user is able to correct them
* [ ] A mechanism exists for reviewing, confirming, and correcting information before finalizing them
* [ ] [3.3.5](https://www.w3.org/WAI/WCAG21/Understanding/help) Context-sensitive help is available (Help links, spell checking, in-place text instructions)
### References
[https://www.w3.org/TR/2008/REC-WCAG20-20081211](https://www.w3.org/TR/2008/REC-WCAG20-20081211)
https://www.w3.org/WAI/WCAG21/Understanding/
[https://www.digitala11y.com/wcag-checklist/](https://www.digitala11y.com/wcag-checklist/)
* For screenreaders, we will only target manual date input using the Start date, Finish date and Duration input fields, not the Flatpickr-based mini-calendar.
* This is because manually going through and tabbing over every day in a even a single calendar month is cumbersome and inefficient. (Flatpickr is not accessible presumably for this reason)
* Because the new Primer input fields use Rails helpers, they accept dates in a number of different formats (yyyy/mm/dd, dd-mm-yyyy, dd.mm.yyyy...). This greatly simplifies date input and reduces errors during manual input.
* There are a number of challenges:
* Indicating non-working days in "working days only" mode: if a non-working day is selected, an inline-validation error for that field will indicate that the input is invalid because it is a non-working day.
* Providing important banner information when there is a change of mode: the banner is generally above everything, but a control below (switch from manual to automatic, or vice-versa) can change banner text. This updated information needs to be accessible to a screen-reader.
* When you enter a date or a duration, this updates other fields; this has to be read out too so the user doesn't lose that context.
* On mobile:
* We'll remove the flatpicker mini-calendar on mobile for all users, so only the date input fields need to be accessible.
* The above challenges also apply.
### WCAG Guidelines
**Perceivable**
* [ ] [1.1.1](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) Relevant and functional non-text items (images, icons,...) have alternative text
* [ ] [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) Information, structure, and relationships/dependencies conveyed through presentation can be extracted with different user agents, assistive technologies, or have text representations
* [ ] [1.3.2](https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence) Data on screen is presented in a meaningful sequence when accessed with assistive technologies
* [ ] [1.3.3](https://www.w3.org/WAI/WCAG21/Understanding/sensory-characteristics) Instructions are not only provided through sound, size, shape, location, or orientation
* [ ] [1.4.1](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color) Color is not the only visual means of conveying information, indiacting action, prompting responses, or distinguishing a visual element
* [ ] [1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum) Contrast minimum ratios (4.5:1) are maintained (cf., https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum)
* [ ] [1.4.4](https://www.w3.org/WAI/WCAG21/Understanding/resize-text) Text is resizable up to 200% without loss of content
* [ ] [1.4.10](https://www.w3.org/WAI/WCAG21/Understanding/reflow) Text reflows without loss of information in a viewport of 320px/256px
* [ ] Can zoom text to 200% at that viewport
* [ ] [1.4.11](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) Visual presentation has contrast ratio of at least 3:1 (
* [ ] Active controls, state modifiers (selected, focused)
* [ ] Otherwise, provide other indication of the state (text, icon with minimum contrast)
**Operable**
* [ ] [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) All functionality of the content is operatable through keyboard interface
* [ ] Provide alternative inputs to the underlying function (i.e, text input for datepicker)
* [ ] [2.1.2](https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap) If focus can be moved to a component using keyboard, it cen be moved away using keyboard only
* [ ] [2.1.4](https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts) Provide means of preventing accidental activiation of shortcuts. Disabling/remapping keyboard shortcuts
* [ ] [2.2.1](https://www.w3.org/WAI/WCAG21/Understanding/timing-adjustable) Time limits set by content can be turned off or adjusted (cf., [https://www.w3.org/WAI/WCAG21/Understanding/timing-adjustable)](https://www.w3.org/WAI/WCAG21/Understanding/timing-adjustable))
* [ ] [2.2.2](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide) Moving, blinking, scrolling that starts automatically for more than 5 seconds, or auto-updating that starts automatically can be paused, stopped, or hidden
* [ ] [2.2.3](https://www.w3.org/WAI/WCAG21/Understanding/no-timing) Timing is not an essential part of an event or activity presented by the content, except for synchronized media or real-time events
* [ ] [2.2.4](https://www.w3.org/WAI/WCAG21/Understanding/interruptions) Interruptions/Alerts/Updates from the server can be postponed or suppressed.
* [ ] [2.2.5](https://www.w3.org/WAI/WCAG21/Understanding/re-authenticating) When an authenticated session expires, the user can continue the activity without loss of data afte rre-authentication
* [ ] [2.2.6](https://www.w3.org/WAI/WCAG21/Understanding/timeouts) Users are warned of any user inactivity that could cause data loss
* [ ] [2.3.1](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold)/[2.3.2](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes) Flashes are no more than three times in any one second period
* [ ] [2.3.3](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions) Motion animation by interaction can be disabled unless interaction is essential to functionality or information being conveyed
* [ ] [2.4.1](https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks) Mechanisms to bypass blocks of content that are repeated exist
* [ ] [2.4.2](https://www.w3.org/WAI/WCAG21/Understanding/page-titled) Pages have titles that describe topic or purpose
* [ ] [2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order) Focusable components receive focus in an order that preserves meaning an operability
* [ ] [2.4.4](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context) The purpose of each link can be determined from text alone, or from text and link context
* [ ] [2.4.5](https://www.w3.org/WAI/WCAG21/Understanding/multiple-ways) More than one way is available to locae a page within a set of pages, allowing users to locate content in a manner that best meets their needs
* [ ] [2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels) Headings and labels describe topic or purpose
* [ ] [2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible) Keyboard foucs indication is visible to the user
* [ ] [2.4.8](https://www.w3.org/WAI/WCAG21/Understanding/location) Information about the user's location in a set of pages is available
* [ ] [2.4.9](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-link-only) Link purpose is identifiable from text alone
* [ ] [2.4.10](https://www.w3.org/WAI/WCAG21/Understanding/section-headings) Section headings are used to organize content, facilitating navigation with content
**Understandable**
* [ ] [3.1.1](https://www.w3.org/WAI/WCAG21/Understanding/language-of-page) Default language of each page can be programatically determined
* [ ] [3.1.2](https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts) Language in each passage or phrase in content can be determined
* [ ] [3.1.3](https://www.w3.org/WAI/WCAG21/Understanding/unusual-words) A mechanism is available for identifying specific definitions of words or phrases (Definitions, Glossary, In-line definitions)
* [ ] [3.1.4](https://www.w3.org/WAI/WCAG21/Understanding/abbreviations) A mechanism for identifying the expanded form or meaning of abbreviations is available
* [ ] [3.1.5](https://www.w3.org/WAI/WCAG21/Understanding/reading-level) A simplified version of text exists, if text requires advanced reading ability
* [ ] [3.1.6](https://www.w3.org/WAI/WCAG21/Understanding/pronunciation) A mechanism is available for identifying specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation.
* [ ] [3.2.1](https://www.w3.org/WAI/WCAG21/Understanding/on-focus) When any componet receives focus, it does not initiate a change of context (user agent, viewport, focus, content)
* [ ] [3.2.2](https://www.w3.org/WAI/WCAG21/Understanding/on-input) Changing the setting of any component does not cause a change of context unless user has been adviced about such a change
* [ ] [3.2.3](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation) Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.
* [ ] [3.2.4](https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification) Components that have the same functionality within a set of Web pages are identified consistently (Icons, check marks, references)
* [ ] [3.2.5](https://www.w3.org/WAI/WCAG21/Understanding/change-on-request) Changes of context are initiaed only by user request or a mechanism is available to turn off such changes
* [ ] [3.3.1](https://www.w3.org/WAI/WCAG21/Understanding/error-identification) Input errors are described to the user in text
* [ ] [3.3.2](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions) Labels or instructions are provided when content requires user input
* [ ] [3.3.3](https://www.w3.org/WAI/WCAG21/Understanding/error-suggestion) Input errors have suggestions with regards how to correct that error
* [ ] [3.3.4](https://www.w3.org/WAI/WCAG21/Understanding/error-prevention-legal-financial-data)/[3.3.6](https://www.w3.org/WAI/WCAG21/Understanding/error-prevention-all) Errors can be prevented
* [ ] Submissions are reversible
* [ ] Data entered by the user is checked for errors and user is able to correct them
* [ ] A mechanism exists for reviewing, confirming, and correcting information before finalizing them
* [ ] [3.3.5](https://www.w3.org/WAI/WCAG21/Understanding/help) Context-sensitive help is available (Help links, spell checking, in-place text instructions)
### References
[https://www.w3.org/TR/2008/REC-WCAG20-20081211](https://www.w3.org/TR/2008/REC-WCAG20-20081211)
https://www.w3.org/WAI/WCAG21/Understanding/
[https://www.digitala11y.com/wcag-checklist/](https://www.digitala11y.com/wcag-checklist/)