WWDC 2019 : Accessibility Lessons
This video encompasses four short presentations all available on the official Apple website:
- Visual Design Accessibility
- Accessibility Inspector
- Writing Great Accessibility Labels
- Accessibility Custom Actions
Visual Design Accessibility
This video available on the official Apple website (session 244) highlights some points to provide a better accessible application visually speaking. Various contents are indicated hereunder:
- DYNAMIC TYPE
- REDUCE MOTION
Dynamic Typeis based on four principles that are highly recommended to be followed:
- If the text can be dynamic, it must be implemented to reach this purpose.
- Use as much of the screen width as possible.
- Don't truncate text as it grows if it's not the case in the default user interface.
- Scale the glyphs next to text to make the interface look balanced.
Dynamic Typeimplementation is available in the developers guide section.
Reduce Motionaccessibility option is activated. Its purpose is to lower the transition visual effect between screens that may impact some users having a visual motion painful sensitivity. Once activated, the
Prefer Cross-Fade Transitionsoption is automatically taken into account by all the UIKit standard elements (navigation, modal views...).
Differentiate Without ColoriOS 13 new feature is a user setting that indicates the will of having visual information not passed on by colors. There's also a programmatic way to be aware of its value so as to subsequently adapt the user interface: Admittedly, it's highly recommended never to transmit information by colors but this situation may be critical for some use cases that must adapt their configuration accordingly (video games for instance).
This video available on the official Apple website (session 257) aims at introducing the Accessibility Inspector tool and some Xcode 11 new features that will solve problems exposed inside a demo application. Various contents and their video timelapse are indicated hereunder:
- Introduction (00:51)
- Audit (02:26)
- Inspection (03:40) including a Xcode 11 new feature
- CATextLayer (05:26)
- Color Contrast (06:26) including a Xcode 11 new feature
- Conclusion (08:24)
The demo application is introduced in depth so as to have a better understanding of some further issues while highlighting:
Introduction of a Xcode 11 new feature to vocalize and select elements on the simulator (04:11) after showing the way to get the complete description of a graphic element in conjunction with its selection.
Besides the font size, it's also very important to be above a contrast ratio to enable sight-impaired people to perfectly understand the whole screen content. Once the color contrast issue is detected, a solution is brought about by the Xcode 11 new feature: Color Contrast Calculator.
Writing Great Accessibility Labels
This video available on the official Apple website (session 254) is entirely presented by a blind person who explains the importance and the way of writing labels to be perfectly understood whatever the context. Many examples are provided to show how the visual elements are exposed to a VoiceOver user when its properties are well fulfilled... or not. After a quick introduction regarding the expectations of a blind user about a mobile application at first launch (00:13), the label definition is introduced in details (01:53) followed by clear explanations of different contexts a button example belongs to in order to adapt its label accordingly (02:41). Finally, the following best practices are presented with illustrative examples: (04:24)
- Always add appropriate labels to the accessibility elements (04:33).
- Don't include the element type in the label (05:22).
- Update labels when the user interface changes (05:46).
- Provide a context clarification when necessary (06:07).
- Avoid redundancy when things are clear according to the context (06:42).
- Add labels to the meaningful animations (spinner...) (07:08).
- Avoid verbose labels when not necessary (07:24) but don't hesitate to use it when appropriate (07:48).
Accessibility Custom Actions
This video available on the official Apple website (session 250) highlights the custom actions for the screen reader and the Switch Control feature thanks to a demo application that presents the explained concepts. Various contents and their video timelapse are indicated hereunder:
- Introduction (00:12)
- Custom Actions: VoiceOver (03:10)
- Custom Actions: Switch Control (04:28)
- Implementation (07:59) ⟹ iOS 13 new syntax
Since iOS 8, the custom actions implementation relies on an Objective C syntax that now fits a Swift form by introducing a closure in iOS 13.