Usage of audio effects to convey information of user interface : proof of concept: JavaScript-library

Abstract

Digitalisoitumisen myötä on yleistynyt tiedon ja palveluiden saatavuuden rajoittuminen ainoastaan digitaalisiin lähteisiin. Ruudunlukuohjelmia käyttäville näkövammaisille tieto saavutetaan pääsääntöisesti yksi elementti kerrallaan navigoinnin tapahtuessa näppäimistöllä. Tämän opinnäytetyön tavoitteena oli tuottaa vaihtoehtoinen tapa kuvata käyttöliittymän sisältöä ja rakennetta käyttäjälle ja mahdollistaa elementtien rinnakkaisen havainnoinnin ja tietokonehiiren käytön navigoinnissa. Tavoitteeseen pyrittiin tuottamalla ohjelmistokirjasto ja sen tarvittava ympäristö konseptitodistukseksi.

Kehitystyössä käytettiin JavaScript-ohjelmointikieltä, selainten tarjoamia Web API -rajapintoja sekä Flask-ohjelmistokehystä.

Tuotoksena syntyi JavaScript-kirjasto sekä sen taustapalvelut, joita käyttämällä voidaan luoda valituista verkkosivun elementeistä äänellä tuotettu kuvaus. Elementin äänikuvaukseen sisältyy uniikki äänisisältö, joka tuotetaan käyttämällä 3D-äänentuottoa, siten että äänisisältöä tuotetaan suunnasta, joka on suhteutettu kyseisen elementin sijaintiin verkkosivulla. Tämän lisäksi elementit, joita osoitetaan tietokonehiirellä, tuottavat äänikuvauksensa kaksinkertaisella nopeudella ja elementit, jotka ovat lähellä hiiren horisontaalista akselia, tuottavat äänikuvauksensa korkeammalla äänenvoimakkuudella, joka mahdollistaa elementtien rinnakkaisen havainnoinnin.

Digitalization of information has grown, and it is common for information and services to be only accessible through the Internet. For visually impaired users using screen readers, this information is commonly navigated with keyboard, one element at a time. This thesis aimed to investigate an alternative methodology for representing information and structure of user interfaces for the user, allowing parallel inspection of the contents and usage of computer mouse for navigation. This aim was approached by developing a proof-of-concept software library and its necessary environment.

Development was performed by utilizing JavaScript -programming language, Web APIs provided by browsers and Flask-framework.

This thesis resulted in a JavaScript-library and its backend services that can be used to represent selected elements of a web page in an auditory manner by associating unique audio for each selected element and the mouse pointer, which will be played by utilizing 3D spatialization relating its position to the position of the element. In addition to this, elements hovered by the mouse will have their playback speed doubled and elements that are close to mouse pointer’s horizontal axis, will have their audio volume increased, allowing for parallel scanning of the contents.