p5.js Accessibility Project
2018.4.29
This is a group project related to improving accessibility in p5.js website(https://p5js.org/).
Other group members: Elizabeth Betts, Raksha Ravimohan, Mithru Vigneshwara.
As part of a group, we are tasked by Claire Kearney-Volpe, Gus Chalkias, Luis Morales-Navarro and Mathura M Govindarajan.
My responsibility is to test examples on the website(https://p5js.org/examples), make a note about whether it is accessible or not. If it is not accessible enough, try to fix them or make some improvements.
I divided this project into four phases: Test & Make Notes, Ideation & Prototyping, User testing and Prototype 2.0.
Phase 1. Test and Make Notes(1 week). In this part, I tested examples under "structure" with a screen-reader and made some notes about difficulties I met when navigating in the website and try examples on the p5.js online editor as well. Check the project proposal here: Proposal Slides, Proposal Summary
Phase 2. Ideation and Prototyping(1 week). After the test, I found that there are some inconveniences when using a screen-reader to learn to code and try to understand what is on the canvas. Based on those difficulties, I came up with some ideas about how to make examples more accessible and understandable. Additionally, I found some general problems that not only inconvenient for people with low vision. Check notes and ideas here: Notes for p5.js - example
Phase 3. User testing (April 20th, Hellen Keller School for the blind). In this part, we went to Hellen Keller School for the blind to test our so-far progress on the project. However, our testers have very limited experience in using computers and screen readers, not to say coding and navigating through examples and code lines. Hence, in order to help my testers to understand better, I changed codes and comments into short stories and gradients description from some recipes.
To test comment sign, I used HTML 1:
HTML file for user testing
Try following two paragraphs of stories
First
//Once upon a time there lived in a certain village a little country girl
//the prettiest creature who was ever seen.
//Her mother was excessively fond of her
Second
/**Once upon a time there lived in a certain village a little country girl
the prettiest creature who was ever seen.
Her mother was excessively fond of her**/
Results:
Most Users thought the second paragraph makes more sense because it sounds continuous and has less // when going through the story.
While there is a user who has experience in coding said If there is only one line of comments, it's better to use //, and if there is a whole paragraph of comments, it's better to so with /**. When asked about whether it would get people confused about dealing with different symbols, she said:"No I don't think so. Since coders are very familiar with comment symbols, I don't think they will get them confused."
Especially, one of the users said that it would be better to change long - like as long as to take several lines to write comments - to short pieces in order to make people easier to understand and to use a specific line of code to try on.
To test whether comments should show before codes or after codes, I used HTML 2:
HTML file for user testing
Try following two paragraphs of recipes. Comment is description for related gradients in the recipe.
First: Frittata
Comment: parsley is a herb with curly leaves. Zucchini is a long vegetable with a dark green skin. Translucent is not transparent, but clear enough to allow light to pass through.
Step 1, Cook onion and parsley until onion is translucent. Add zucchini and salt.
Comment: Skillet is a flat heavy cooking pan with a long handle.
Step 2, Stir zucchini blossoms into the skillet.
Second: Lasagna
Step 1, In a Dutch oven, stir sugar, basil, fennel seeds about 1/2 hour.
Comment: basil is a strong-smelling and strong-tasting herb used in cooking. fennel is a flowering plant species with yellow flowers and feathery leaves.
Step 2, Cook lasagna noodles in boiling water, combine ricotta cheese.
Comment: lasagna is a very wide flat stripes of pasta. Ricotta cheese is a type of soft white Italian cheese.
Results:
In this test, most users think comments should go before instructor(codes) while few users think it make more sense to get comments after instructor(codes).
Phase 4: Prototype 2.0(1 week). Based on feedback from user testing, I made some changes to my original ideas. It includes changing short pieces comments back to // and try to simplify some long comments.
Final Presentation Slides link: Final Presentation Slides
Reference: