Project intro

There are many ways to improve user accessibility, but the one which I was most interested in was ‘Voice Recognition’. The use of such features can be beneficial for individuals who suffer from disabilities including visual, motor and cognitive impairments.

It means that one does not necessarily need to input data using a mouse or a keyboard. The prototype discussed on this page is a way in which I would improve and develop my Recipe Binder project.

It is important to note that Web Speech API is not supported by all browsers however, so it does affect who can use it. The is also the issue of consent and it is essential that users are able to give their consent before their voice is recorded. These are all things that would be taken into

Developmentresearch

In order to understand the best way to achieve this, I explored Web Speech APIs. This technology has two main functions. The first is ‘Speech Recognition, where user audio is taken and turned into text. The second is ‘Speech Synthesis’, where text can be turned into speech. The Recipe Binder App was already built using React.js, so I researched the different types of JavaScript functions that I could use for my recording feature. I looked at both the ‘start/stopRecording function and the ‘recognition.onresult’ function. The first function is the one that allows audio to actually be recorded. I also explored the use of JavaScript’s ‘event listeners’. The latter function works with the above and runs once it has picked up any inputs. A more detailed explanation of how the code used to create this project can be seen below. To view all more of the research undertaken, view a bibliography located at the bottom of this page.

Projectdevelopment

To view the script written to create the Speech Recognition demo, please click here. The code has been annotated throughout if you would prefer to see the notes alongside the script. The page structure was created using HTML, it is within the body of the HTML that the JavaScript is located. First, I created a button that the user can click to turn the recording feature on and off. This is achieved using the ‘onclick’ event.

Next, I created a variable called ‘recognition’ with the JavaScript object for Web Speech API, giving multiple browser options for it to run through.

In order to make sure that the speech results are only shown at the end of recording I used the following line of code ‘recognition.interimResults = false;’. Which is followed by ‘recognition.maxAlternatives = 1;’ which ensures that only the most similar result that was picked up is used.

The code on the right shows the start/stop function being ran, then call the ‘recognition’ function variable which actions Web Speech API and then output any of the results to the console log. Console log is a developer’s tool to test and debug.

Finally, the JS ‘event listeners’ that were previously mentioned are triggered when the audio recording is finished. The speech that was recognised will then be given. However if an error occurs, a function called ‘onerror’ is called and it will be displayed in the Console Log.

Personal Evaluation

I found this project particularly interesting as I was not aware of the many different standards a website should be help to in order to be accessible. If I were to take The Recipe Binder Project forward I would take this working demon and incorporate it into the website with a visually pleasing UI. It would blend into the current design of the app. In addition, I would look at other ways to improve user accessibility, e.g. I could incorporate Keyboard Navigation' so that users who are visually impaired do not have to use the mouse.

Time management

I am glad that I added this project as a way to further develop the Recipe Binder. It was interesting to learn and explore the different ways a user's may have difficulty accessing a website and the ways in which I can improve them as a developer. view chart