7-Minute-Workout – Accessibility Exam

A project Glenn has created called 7-Minute-Workout – Accessibility Exam

Project Outline

const quickFacts = {

  • Timeline: November – December 2022
  • Type: Group Project
  • Course: IDG2012 - Accessibility
  • Role: Front-end Developer
  • Tools: HTML5, CSS3, JavaScript
  • Client: Associate Professor at Department of Design at NTNU in Gjøvik

Problem Description

The task was to develop a single-page website that displays, in a usable and accessible way, the same exercise instructions shown in the provided starting image. The starting image depict the 7-minute workout, a series of calisthenics exercises to be carried out in 7 minutes, doing each exercise for 30 seconds and resting for 5 seconds between exercises. Some exercises require changing sides. There are 4 different personas with different disabilities such as blindness, shaky hands, physical disability and small mobile screen.

Our Solution

7-minute-workout is a single page application created with HTML, CSS and vanilla JavaScript. It has text-to-speech to combat blindness, big buttons to make the clicking easier for people with shaky hands, the ability to select only certain exercises or specific body parts you want to exercise and is responsive, making it available for everyone. It uses different ARIA-Labels to make it accessible.

Improving 7-Minute-Workout

My role in the project

A snippet of the website 7-Minute-Workout showing different exercises

For this project, I was mainly responsible for setting up the HTML, CSS and making it accessible with ARIA-labels. I also wrote the logic for modal-windows in JavaScript and figuring out which exercises that were supposed to be included in the 7-minute-workout.

Using a JS Framework

A big improvement for this project could be to use a JavaScript framework such as React. By using React, I could further improve the user experience and sustainability of the web page. Using techniques like code-splitting, bringing information to the front, subsetting fonts and using svg-sprites I could reduce the bundle size, resulting in an even more accessible website.

Furthermore, reformatting the code, as shown in the image, into a single function would also be quite preferrable. As of right now, there is a function for each button. This is not very modular. Instead, it should be made modular by compressing all the funtions into a single modular function that can accomplish the same task. This will also help improve sustainability.

code showing the logic behind a form element

Other projects you may like