macOS app to help design accessibility for an iOS app
VoiceOverDesigner
Beta-test
Design accessibility features for your iOS app with VoiceOver Designer, a macOS app that offers a range of design tools and generates specifications for developers. Preview your work on an iPhone with the companion app, VoiceOver Preview.
- Design
The VoiceOver Designer app for macOS gives designers all possible instruments to lay out accessibility features on their mockups, teaches them what developers can and cannot do with accessibility, and creates specifications to hand over to developers. They can hear the result of their work on an iPhone via a little companion iPhone app called VoiceOver Preview.
Integrating it directly into Figma feels natural but can be done later.
- Development
Developers get the instructions in the form of a VoiceOver Designer document from designers, read them and understand what accessibility features designers want them to implement.
- Unit testing (in future releases)
The app generates test cases for automatic accessibility testing. In general, we can start from AccessibilitySnapshot, but use it differently: instead of performing image comparisons, we can create and compare textual representations of accessible elements. I’ll elaborate on this idea on a different topic, as it’s not the goal of the first release.
How to learn VoiceOver
What’s next
Architecture
flowchart TD
subgraph Model Layer
Artboard-->Element
Artboard-->Container
Artboard-->Frame
end
subgraph UI Layer
Navigator
Canvas
ElementSettings
end
subgraph Data Layer
Document(NS/UIDocument)
end
subgraph Logic Layer
Document-->Artboard-->DocumentPresenter
Document-->UndoManager-->|Manages undo on model layer|DocumentPresenter
DocumentPresenter-->CanvasPresenter
DocumentPresenter-->|Publish changes in model|AP(ArtboardPublisher)
DocumentPresenter-->selectedPublisher
AP-->Navigator{{Navigator}}
AP-->CanvasPresenter
CanvasPresenter-->Canvas{{Canvas}}
CanvasPresenter-->selectedPublisher
selectedPublisher-->ElementSettings{{ElementSettings}}
end