Markup over a screenshot of your UI
Just draw rectangles to specify places of accessible elements. Yes, just so simple.
VoiceOverDesigner
The essential tool to design, prototype and test accessibility of iOS-apps
The essential tool to design, prototype and test accessibility of iOS-apps
VoiceOver Designer is a macOS app to design accessible layouts for different accessibility technologies. Create the layout and open it in the iOS app VoiceOver Preview to hear your design.
Just draw rectangles to specify places of accessible elements. Yes, just so simple.
Text for an element's label will be recognized automatically. Just add additional properties.
Sliders or carousels are adjustable elements in terms of VoiceOver. Their values can be adjusted by vertical swipe.
Save the document to iCloud and test it on a real device with help from Handoff. Then, turn on VoiceOver to hear the result.
This process is so simple that full-screen adaptation requires just two minutes:
You can run your accessible design in Presentation Mode to discuss it with colleagues and test it yourself. You can repeat the VoiceOver navigation using the keyboard and read descriptions of elements
You can open any .vodesign document in VoiceOver Preview app and check how blind people hear your interface.
The sample of the screen doesn't have a proper accessible layout: a lot of elements, no labels, and the structure is not recognizable when you are listening to it.
After adaptation, we have reduced a number of elements. Now all of them have labels, and the app has become easier to use by hearing.
A couple of videos you've seen are samples from the app. At the beginning of your learning, you can check examples of full-scenario adaptation for several apps in different languages.
Hint: save files to iCloud, then you can open files by Handoff.
If you have perfect samples of accessible layouts, you can share them with others. Add samples to the repository. Your samples will be visible in the app and help others better understand VoiceOver rules.
If you are learning VoiceOver for the first time, you can start with the video "How to navigate your iPhone or iPad with VoiceOver". Other videos from the playlist are also great!
After prototyping, you can send the document to a developer. It's less cool than link-for-everybody like a Figma, but you can attach a file to task-tracker, like in old times.
We have another offer — the book "About accessibility on iOS". It's in Russian, but we are working on a translation, and you can check code examples for free!
We have many plans to help other designers and developers to work with accessibility, but it would be hard to achieve alone. So if you can code, you can help us by joining development at the repository.
Maintainers:
Also, you can help by describing a bug or inspiring us with your idea or feature request.
We have just released our application, and of course, we have unexpected bugs. We have tested a lot, but who knows what could happen with real users.
During the development process, we understood that you could design and check the result on a single device – iPad! So many things are already done, but we should tweak a few details for a better experience.
It will be better for designers to add accessible layouts not in a separate application but directly in Figma. So we will try to do so. Everything should be on cloud.
Do not break accessibility with a new release is one of the main properties of the accessible product. We want to provide the possibility to generate test cases directly from design and simplify automation.
You can now add a layout just for a single screen, but we would like to link several screens to a document and make interactive prototypes.
The app is created around VoiceOver, but we will add support for other properties of Voice Control and Switch Control. Also, the app should be fully accessible to all people.
We have no dates for these features, and it's just feature plans, but with your help, we certainly can achieve that. So tell your friends about the application, and we will see that we have created an important project.