https://github.com/VODGroup/VoiceOverDesigner

macOS app to help design accessibility for an iOS app
https://github.com/VODGroup/VoiceOverDesigner

accessibility

Last synced: about 1 month ago
JSON representation

macOS app to help design accessibility for an iOS app

• Host: GitHub
• URL: https://github.com/VODGroup/VoiceOverDesigner
• Owner: VODGroup
• Created: 2022-05-01T03:52:15.000Z (over 2 years ago)
• Default Branch: develop
• Last Pushed: 2024-06-29T11:42:53.000Z (7 months ago)
• Last Synced: 2024-08-10T14:17:51.954Z (5 months ago)
• Topics: accessibility
• Language: Swift
• Homepage:
• Size: 29.6 MB
• Stars: 116
• Watchers: 6
• Forks: 10
• Open Issues: 46
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# VoiceOverDesigner



# Beta-test

- [VoiceOver Designer](https://testflight.apple.com/join/GRsuZ0QD)

- [VoiceOver Preview](https://testflight.apple.com/join/ofatTjXD)

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.

1. 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.

2. 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.

3. 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.

![image](https://user-images.githubusercontent.com/3120680/184469370-d58a3dfb-52b0-4743-b71a-9496e72bfebc.png)

# How to learn VoiceOver

1. [Understand VoiceOver navigation](https://www.youtube.com/watch?v=L5UXN7l15ro)

1. [Check samples (Can be open by Preview app)](https://github.com/VODGroup/VoiceOverSamples)

# What's next

- [How to launch](https://github.com/VODGroup/VoiceOverDesigner/wiki)

- [Join to discussions](https://github.com/VODGroup/VoiceOverDesigner/discussions)

# Architecture

```mermaid

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

```