WWDC 2018 : Deliver an exceptional accessibility experience

This video available on the official Apple website (session 230) aims at highlighting the essential elements that will provide an optimal user experience for visual impaired people.




Various contents and their video timelapse are indicated hereunder:

The latest content points out an amazing application for the developers interested in finding out detailed explanations about many VoiceOver implementations and those who are willing to figure out how a mobile application should interact with VoiceOver to obtain an optimal user experience (see 'Final rendering with an optimized VoiceOver implementation').

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


Transparency and blurring (03:07) #

Since iOS 8, classes such as UIBlurEffect and UIVisualEffectView perfectly handle the blurring effect of an image.

However, this could give rise to sighting difficulties for some people having visual impairments.

In this case, there's a possibility for the user to drastically weaken these effects by activating the appropriate accessibility option in his settings.



The result is a darker background that may become completely uniform under certain circumstances.



The isReduceTransparencyEnabled property value is available in the programing language as well.




Contrast (04:38) #

The contrast between the foreground and the background colors is very important and depends a lot on the font type properties that are detailed in the iOS guide section of this site.

To improve the reading experience, it's natively possible to increase the colors contrast by activating the appropriate accessibility option in the settings.



The isDarkerSystemColorsEnabled property enables the developed application to be informed of its value.




Sizing (07:04) #

The individual presented elements about the Dynamic Type are widely explained in the iOS developement section and refer to another presentation detailed in the WWDC part of this site.

Display a bold font type may improve the visual rendering enough without disproportionately increase the font size.

Once more, this accessibility option can be activated in the mobile settings.



The isBoldTextEnabled property enables the developed application to be informed of its value.




Motion (08:48) #

Any animations may give rise to problems of balance even of nausea to certain people.

The user settings allow to strongly decrease the effects of all kind of native animations by activating the appropriate accessibility option.



The isReduceMotionEnabled property enables the developed application to be adapted to the user preference.




UIAccessibilityElement (21:03) #

The implementation and the purpose of this element are explained and introduced inside the demo application.




Adjustable values (21:44) #

This functionality that is implemented thanks to a specific trait is specifically introduced in this presentation so as to ease the element selection inside a CollectionView.



A different outline of this functionality is developed in another presentation detailed in the WWDC part of this site.


Custom actions (23:49) #

On a single selection, it's possible to gather many actions that are initially trigerred by distinct graphic elements.



All the explanations are also exposed in another presentation detailed in the WWDC part of this site.


Accessibility modal view (25:02) #

When a view is only presented as being at the top of the view hierarchy, VoiceOver doesn't know natively that the background elements mustn't be analyzed.

The solution deals with the accessibilityViewIsModal value so as to avoid VoiceOVer to check other elements than those in the foreground.



A perfect explanation of a modal view implementation is alsp exposed in the developer guide if need be.


Notifications (25:13) #

Reminder to notify the users about modifications on the screen.



More detailed explanations are available in the developer part of this site.


Demo #

During this presentation, some solutions for VoiceOver implementation pitfalls are suggested thanks to a simple application.

First of all, the application introduction and the non optimized VoiceOver rendering must be watched in order to understand the rationale behind the proposed solutions.


  • Create an accessible element to define the carousel. (26:11)

  • Implementations of the label and value properties. (26:43)

  • Definition of adjustableTrait with its increment and decrement methods. (26:58)

  • Creation of a scrolling function. (27:14)

  • Add the carousel element as an accessible element. (28:38)

  • Updating of the displayed data in conjunction with the user selection. (29:51)

  • Screen updating notification when a carousel element selection occurs. (30:14)


  • Gather elements to significatively improve the selection. (31:14)

  • Synchronization of the regrouped elements with the selected carousel element. (32:46)


How to gather actions with an elements regroupment ? (33:05) #



How to avoid selections behind a 'Modal View' ? #

  • Override accessibilityViewIsModal. (34:33)

  • Notify the user of a new presented screen. (35:00)


Final rendering with an optimized VoiceOver implementation. (35:38) #


The presented code of this video and many explanations of its implementation are available on the Apple developer site.