Typography
Font size, colors, and links.
Text contrast should comply with WCAG 2.1 requirements
https://www.w3.org/TR/WCAG21/#contrast-minimum
https://www.w3.org/TR/WCAG21/#contrast-minimum
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for Large Text. Large-scale text and images of large-scale text [should] have a contrast ratio of at least 3:1;
Tips on tools for measuring contrast between two colors
Accessibility requirement
Signaling urgency or importance using color alone can make it difficult for color blind to interpret the information correctly.
https://www.w3.org/TR/WCAG21/#use-of-color
Recommendation
Always use an icon to support visual communication of status, urgency and severity, not just a color alone. This ensures color blind perceive the message as intended.
Scalable text
Example of a Ticket with text scaled up 200%
Example of a Travel plan with text scaled up 200%
Screen readers and keyboard navigation
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html
iOS Platform information
https://developer.apple.com/documentation/swiftui/accessibilitytraits
https://developer.apple.com/documentation/uikit/uiaccessibilitytraits
Keyboard navigation: order of content
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html
What it is?
In the same way a screen reader determines a meaningful reading order, a user navigating via keyboard must be given a meaningful presentation order of the content.
How it works?
When navigating with a keyboard, the user uses the Tab key (or Shift + Tab to go backwards) to move through the content in its visual/presentational order. To make a selection, the user presses Enter.
Technical documentation
https://www.w3.org/WAI/WCAG21/Techniques/css/C27
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
When implementing on the web, the “tabindex” attribute can be used to control the presentation order during tabbing.
Alt texts for pictograms, logos, and images
The Resplus logo should be implemented with alt text that can be interpreted by a screen reader. Alt texts are also displayed when an pictogram, logo or image cannot be loaded.
See more here:
www.w3.org/WAI/WCAG22/quickref/?versions=2.0#qr-text-equiv-all
