Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/illimag/dominos-app-visually-impaired

Visually Impaired Personas Spectrum Conceptual Web App Prototype built in Angular 8, Voice Assistant CSS module Implementation
https://github.com/illimag/dominos-app-visually-impaired

personas-limitation-spectrum prototype voice-assistant

Last synced: 20 days ago
JSON representation

Visually Impaired Personas Spectrum Conceptual Web App Prototype built in Angular 8, Voice Assistant CSS module Implementation

Host: GitHub
URL: https://github.com/illimag/dominos-app-visually-impaired
Owner: Illimag
Created: 2019-09-30T22:47:07.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2020-05-11T22:46:05.000Z (over 4 years ago)
Last Synced: 2024-05-02T04:49:45.632Z (6 months ago)
Topics: personas-limitation-spectrum, prototype, voice-assistant
Language: TypeScript
Homepage:
Size: 5.11 MB
Stars: 2
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Dominos App for the Visually Impaired.

## Visual Overview

### Voice Assistant Hidden Element Overview Readout

![voice_assistant_hidden_element_readout](images/voice_assistant_functionality_overview.png)

### Application Screen Mockups

![screen_mockups](images/dominos_visually_impaired_template_upated-01.png)

## Context

### Prototype

This Web Application Prototype built in Angular 8 is based on the Personas Limitation Spectrum from the Inclusive Design Methodology.

### Example of a Live Use Case

According to the document 

	20190613153319483_DominosPetition.pdf 

located in this repository, in the case between Domino's Pizza LLC vs Guillermo Robles states the question:

	Whether Title III of the ADA requires a website

	or mobile phone application that offers goods or services

	to the public to satisfy discrete accessibility requirements

	with respect to individuals with disabilities?

### Hypothesis Driven Design

The following are hypotheses, experiments, and evidence according to the hypothesis driven design process. 

Hypothesis: Increasing the size of the elements of the Dominos Application will increase usability and visability.

Experiment: Testing this application on individuals with Visual Impairment.

Evidence: The hypothesis is correct when the individuals who normally can not order from Domino's can order using the elements of increased size.

### Design Constraints and Platform Features

The near certain usage of Voice Assistant on Android devices and Vision Accessibility for iOS devices, constrain the design of the application. 

Additionally, design details that are purely aesthetic will be of increased difficulty for Personas Limitation Spectrum with Visual Impairment to see. 

### Implementation of a hidden element component in the Angular 8 Prototype. 

The hidden component is located in the home.component.html file as a div with the class = hidden. 

	home.component.html

	


	Welcome Jim to Domino's Pizza. 

	This is the home screen. 

	You can select 

	1. Create a new order. 

	2. Your Orders. 

	The two options are stacked on top of each other. 

	Equal spaced in the center of the screen.

	


The corresponding style sheet is located in the same folder named home.component.css and has a class named hidden which is styled in a way to hide the element visually but is still seen by the Voice Assistant and so is read out first.

	home.component.css

	.hidden {

	position:absolute;

	left:-10000px;

	top:auto;

	width:1px;

	height:1px;

	overflow:hidden;

	}

The Voice Assistant functionality of the Samsung S10 5G device can be used by tapping three fingers on the screen.

When the user taps with three fingers all the elements will be read by Voice Assistant.

### Fullscreen API and the Welcome Component

In the welcome component we have a Fullscreen API call that takes the web application and turns it closer to a Progressive web app. By the means of taking up the entire screen space of the device of which it is being triggered.

The details of the implementation is as follows.

The welcome screen is the first route because of the

	app-routing.modules.ts

	{ 

    path:  '', 

    redirectTo:  'welcome', 

    pathMatch:  'full' 

  	},

There is an clickable div element with an onclick event that calls the launchFullscreen function API.

	onclick="launchFullscreen(document.documentElement);"

Added the Fullscreen API to the assets/js folder

	function launchFullscreen(element) {

	if(element.requestFullscreen) {

	  element.requestFullscreen();

	} else if(element.mozRequestFullScreen) {

	  element.mozRequestFullScreen();

	} else if(element.webkitRequestFullscreen) {

	  element.webkitRequestFullscreen();

	} else if(element.msRequestFullscreen) {

	  element.msRequestFullscreen();

	}

  }

## Source Code

The source code for the prototype is located in

	/source_code/prototype