Skip to content
This repository has been archived by the owner on Nov 6, 2023. It is now read-only.
/ Moca Public archive

Prepare Accessible Mockups for Visually Impaired

Notifications You must be signed in to change notification settings

imesut/Moca

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Moca - Accessible Mockups

Moca is a mockup tool for designing accessibility experience for disabled people, works on browser, online and offline.

You can import your screen images and mark UI elements visible at the screen.

Then you can test your UI with visually impaired people.

Go to Moca Demo

Go to Moca App

Purpose

Moca, is my weekend project, that I need to use as a product manager while working with a visually impaired community.

Designing applications or any design properly accessible requires feedback from visually impaired while working and deciding on features. Moca is a tool for interviewing design ideas with visually impaired. User interview preparation process is shown in the image below.

Accessible Screen Design Steps Visualized; Step 1: Design Screens, Step 2: Mark Elements with Moca, Step 3: Interview with Visually Impaired, Use opinions from interview to reshape Moca design at step 2 and master screens at step 1

How it's working?

Mark elements at your screen;

brief 1

Test and interview screens on iOS with Voiceover or Android with Talkback, by opening exported screen at browser (mobile) or adding to home screen.

brief 1

See all steps at Slideshare presentation;

Click to open slideshare slide

Slides are also available at this repository, here.

How to Install?

Just clone this repository to your computer and open the index.html file from app folder!

Contribute to Moca

I will be delighted to see contributions (pull requests) to Moca. Primarily looked for the contribution topics below;

  • Complete PWA compatibility
  • New features
  • UX Improvements for Screen Designer
  • Multiple Screen Creation in a Single file
  • Save the Progress Feature (importing and exporting moca file)