WWDC 2019: Accessibility Lessons

This video encompasses four short presentations all available on the official Apple website:


Thereafter, according to the presentation configuration, the selection of a title or a timelapse will give rise to the video playback on the Apple website directly at the proper moment.


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
    • ⟹ iOS 13 new feature

  • Reduce motion
    • ⟹ iOS 13 new feature
    • ⟹ iOS 13 new feature

  • Color
    • ⟹ iOS 13 new feature



Dynamic Type #

🎬 (01:17)

The use of Dynamic Type is 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.
🎬 (01:50)

Reminder of the 11 text styles available since iOS 11:

... and the programmatic way of their implementations:

A more detailed explanation of the Dynamic Type implementation is available in the developers guide section.

🎬 (03:00)

A new pane is available with Xcode 11 to vary the text size and to dynamically visualize its rendering on the simulator.



Reduce motion #

🎬 (03:23)

Reminder of the current situation already including this functionality to reduce motion on screen:

... and of the programmatic way to be aware of its value from the device settings:

A detailed explanation of the accessibility options states and events is available in the developers guide section.

🎬 (04:17)

The video automatic preview playing is now in the hands of the user who can decide its de/activation thanks to the device settings as an iOS 13 new feature:


It's also possible to be aware of this option state following a programmatic way:


If this option is deactivated, the video control must be regained only under the user interaction.

🎬 (05:43)

This iOS 13 new feature only appears once the Reduce Motion accessibility 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 Transitions option is automatically taken into account by all the UIKit standard elements (navigation, modal views...).



Color #

🎬 (06:40)

Introduction of dyschromatopsia whose understanding will naturally lead towards the new functionality exposed in the next sheet.

🎬 (07:33)

The Differentiate Without Color iOS 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).




Accessibility Inspector #

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) #

The demo application is introduced in depth so as to have a better understanding of some further issues while highlighting:

  • The way to open Accessibility Inspector (01:34).

  • The hover text mac feature (01:43).


Audit (02:26) #

The purpose of this functionality is to provide a list of potential accessibility issues.




Inspection (03:40) #

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.




CATextLayer (05:26) #

This example emphasizes the non automatic accessibility handling for this kind of element that must be programmatically implemented to behave like any other accessibility element.


Color Contrast (06:26) #

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.



Conclusion (08:24) #

All the previous tools that have been used during this session are highlighted in order to visualize the final rendering and to be sure that the suggested solutions are effective.




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)

  • (03:10)

  • (04:28)

  • Implementation (07:59) ⟹ iOS 13 new syntax



Introduction (00:12) #

Quick introduction of VoiceOver with a problem due to an inadequate implementation highlighted by the demo application that's used all along the session.


Custom Actions #

🎬 (03:10)

The purpose of the custom actions with VoiceOver is clearly explained which helps understand why and in which contexts this functionality must be implemented to significantly improve the user experience.

🎬 (04:28)

The demo application uses the Switch Control feature on the device that is paired with two switches: the first one (orange) aims at moving the focus to the next item while the second one (white) aims at activating the focused item.

Implementing custom actions in this context leads to a drastic decrease of focus/activations actions to be carried out by the user so as to reach the same result.



Implementation (07:59) #

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.